The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,839 other subscribers

Archive for the ‘Scripting’ Category

Type safe versus interpreted languages: which ones are safer?

Posted by jpluimers on 2022/10/06

An interesting thread by Kristian Köhntopp last year:

[Archive.is] Kristian Köhntopp on Twitter: “Python: >>> print(1+2+” = “+2+1) Traceback (most recent call last): File “”, line 1, in TypeError: unsupported operand type(s) for +: ‘int’ and ‘str’ Java: System.out.println(1+2+” = “+1+2); 3=12”

The examples from him and others in the thread:

Python:
>>> print(1+2+" = "+2+1)
Traceback (most recent call last):
  File "", line 1, in 
TypeError: unsupported operand type(s) for +: 'int' and 'str'

Java:
System.out.println(1+2+" = "+1+2);
3=12

php8.1  -r 'print 1+2+" = "+2+1;'
PHP Fatal error:  Uncaught TypeError: Unsupported operand types: int + string in Command line code:1
Stack trace:
#0 {main}
  thrown in Command line code on line 1

php7.3  -r 'print 1+2+" = "+2+1;'
PHP Warning:  A non-numeric value encountered in Command line code on line 1

Node?
Chrome & FF dev console:
window.alert(1+2+" = "+1+2)
3 = 12

Sind ja immerhin verschiedene Sprachen.

SELECT Wert1 
FROM table1
WHERE Wert1 < AVG(Wert1);

DB2 vs. Oracle vs. MSSQL vs. ....

The joke is that Python actually does better than Java.

But in practice, this is a problem on many platforms, so it deserves constant attention, that’s why Kristian pointed to [Archive] Anna “Legacy Archaeologist” Filina on Twitter: “My annotated slides “Fantastic Bugs and How to Avoid Them” from @LonghornPHP:  #LonghornPHP”

[Wayback/Archive] Fantastic Bugs and How to Avoid Them – Speaker Deck

I’ve expanded the examples from the thread below. The results are interesting and consistent over versions of the various languages.

–jeroen

Read the rest of this entry »

Posted in Development, Java, Java Platform, JavaScript/ECMAScript, Node.js, PHP, Python, Scripting, Software Development | Leave a Comment »

Python Breaking Distance calculator (includes the German DIN 1451 font for traffic signage)

Posted by jpluimers on 2022/09/20

If you ever want a good visual representation to compare the breaking distance for a car at two different speeds, and see at what speed you will hit the human “obstacle”, then use the Python script mkbremsweg.py.

Git repository: [Wayback/Archive.is] joschtl / bremsweg · GitLab.

The image is generated in the current directory

It probably won’t work on Windows as it dynamically builds a very long command-line calling ImageMagick tool [Wayback/Archive.is] convert once to do all the drawing.

The text in the picture for now is hardcoded in German, but would be easy to adopt.

The fonts used are and FreeSans and [Wayback/Archive.is] Alte DIN 1451 Mittelschrift Font Family · 1001 Fonts (which the Germans use for Traffic Signage and is very similar to fonts used in other countries).

Calculations are based on [Wayback/Archive.is] Bremsweg-Rechner für Anhalteweg & Bremsweg – Johannes Strommer.

Via:

–jeroen

Posted in *nix, *nix-tools, cars, Development, ImageMagick, LifeHacker, Power User, Python, Scripting, Software Development, Traffic, Windows | Leave a Comment »

Converting an html dl (delimited list) on a page to a table from the Chrome console

Posted by jpluimers on 2022/09/14

A while ago, I wanted to convert the dl delimited list html element on a web page into a regular table so I could more easily reorder the data into cells.

So I ran the below bit of code in the Chrome Console after first putting the mentioned table with id here_table in the place where I wanted the table to be included:


<table id="here_table"></table>

view raw

_table.html

hosted with ❤ by GitHub


var arr = $("#delimitedList").children().map(function () {
return $(this).html();
}).get();
for (var i = 0; i < arr.length; i += 2) {
$('#here_table').append('<tr><td>' + arr[i] + '</td><td>' + arr[i + 1] + '</td></tr>');
}

For this script to work, you need jQuery, so yesterday I wrote Better, Stronger, Safer jQuerify Bookmarklet | Learning jQuery.

The code is based on [Wayback/Archive.is] Rebuild each definition list () as a table using JQuery – Stack Overflow (thanks [Wayback/Archive.is] easy!) with an important adoption instead of calling text() to get the textual dt and dd information, it uses html() so the original innerHTML is being preserved.

Some similar JavaScript pieces of code are at [Wayback/Archive.is] Turning HTML into a nested JavaScript array with jQuery – Stack Overflow.

Related:

–jeroen

Posted in Bookmarklet, Chrome, Development, Google, JavaScript/ECMAScript, jQuery, Pingback, Power User, Scripting, Software Development, Stackoverflow, Web Browsers, Web Development | Leave a Comment »

Better, Stronger, Safer jQuerify Bookmarklet | Learning jQuery

Posted by jpluimers on 2022/09/06

For my link archive, the [Wayback] Better, Stronger, Safer jQuerify Bookmarklet | Learning jQuery

Via: [Wayback/Archive.is] Include jQuery in the JavaScript Console – Stack Overflow (thanks [Wayback/Archive.is] brichins!)

When you do not have jQuery installed, then the Chrome console will give you the error [Wayback/Archive.is] javascript – TypeError: $(...).children is not a function – Stack Overflow which has code to load jQuery in this gist: [Wayback/Archive.is] use jQuery in Chrome javascript console.

If this bookmarklet ever starts to fail, then I need to check out these links:

The content of the JQueryfi bookmarklet is in the below gist:


javascript:(function(){var%20el=document.createElement(%22div%22),b=document.getElementsByTagName(%22body%22)[0],otherlib=!1,msg=%22%22;el.style.position=%22fixed%22,el.style.height=%2232px%22,el.style.width=%22220px%22,el.style.marginLeft=%22-110px%22,el.style.top=%220%22,el.style.left=%2250%25%22,el.style.padding=%225px%2010px%22,el.style.zIndex=1001,el.style.fontSize=%2212px%22,el.style.color=%22#222%22,el.style.backgroundColor=%22#f99%22;function%20showMsg(){var%20txt=document.createTextNode(msg);el.appendChild(txt),b.appendChild(el),window.setTimeout(function(){txt=null,typeof%20jQuery==%22undefined%22?b.removeChild(el):(jQuery(el).fadeOut(%22slow%22,function(){jQuery(this).remove()}),otherlib&&(window.$jq=jQuery.noConflict()))},2500)}if(typeof%20jQuery!=%22undefined%22)return%20msg=%22This%20page%20already%20using%20jQuery%20v%22+jQuery.fn.jquery,showMsg();typeof%20$==%22function%22&&(otherlib=!0);function%20getScript(url,success){var%20script=document.createElement(%22script%22);script.src=url;var%20head=document.getElementsByTagName(%22head%22)[0],done=!1;script.onload=script.onreadystatechange=function(){!done&&(!this.readyState||this.readyState==%22loaded%22||this.readyState==%22complete%22)&&(done=!0,success(),script.onload=script.onreadystatechange=null,head.removeChild(script))},head.appendChild(script)}getScript(%22http://code.jquery.com/jquery.min.js%22,function(){return%20typeof%20jQuery==%22undefined%22?msg=%22Sorry,%20but%20jQuery%20was%20not%20able%20to%20load%22:(msg=%22This%20page%20is%20now%20jQuerified%20with%20v%22+jQuery.fn.jquery,otherlib&&(msg+=%22%20and%20noConflict().%20Use%20$jq(),%20not%20$().%22)),showMsg()})})();

view raw

jQuerify.url

hosted with ❤ by GitHub


javascript:(function(){var el=document.createElement("div"),b=document.getElementsByTagName("body")[0],otherlib=!1,msg="";el.style.position="fixed",el.style.height="32px",el.style.width="220px",el.style.marginLeft="-110px",el.style.top="0",el.style.left="50%",el.style.padding="5px 10px",el.style.zIndex=1001,el.style.fontSize="12px",el.style.color="#222",el.style.backgroundColor="#f99";function showMsg(){var txt=document.createTextNode(msg);el.appendChild(txt),b.appendChild(el),window.setTimeout(function(){txt=null,typeof jQuery=="undefined"?b.removeChild(el):(jQuery(el).fadeOut("slow",function(){jQuery(this).remove()}),otherlib&&(window.$jq=jQuery.noConflict()))},2500)}if(typeof jQuery!="undefined")return msg="This page already using jQuery v"+jQuery.fn.jquery,showMsg();typeof $=="function"&&(otherlib=!0);function getScript(url,success){var script=document.createElement("script");script.src=url;var head=document.getElementsByTagName("head")[0],done=!1;script.onload=script.onreadystatechange=function(){!done&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")&&(done=!0,success(),script.onload=script.onreadystatechange=null,head.removeChild(script))},head.appendChild(script)}getScript("http://code.jquery.com/jquery.min.js&quot;,function(){return typeof jQuery=="undefined"?msg="Sorry, but jQuery was not able to load":(msg="This page is now jQuerified with v"+jQuery.fn.jquery,otherlib&&(msg+=" and noConflict(). Use $jq(), not $().")),showMsg()})})();

view raw

UrlDecoded.js

hosted with ❤ by GitHub

–jeroen

Posted in Bookmarklet, Development, JavaScript/ECMAScript, jQuery, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

iOS/Android Privacy: InAppBrowser.com – see what JavaScript commands get injected through an in-app browser · Felix Krause

Posted by jpluimers on 2022/08/31

Especially on Archive, but also on Android and other mobile operating systems, mobile apps can have their in-app browsers to circumvent the OS provided wrapper around the system browser.

On iOS, the Safari is the only system browser engine whereas on Android you can have other engines too, so less Android applications have in-app browsers.

Most of those in-app browsers are in social media applications that go to great length to keep their users inside a walled garden.

The site [Wayback/Archive] inAppBrowser.com helps checking how severely information is leaked through the in-app browser as those potentially have a lot of control. TikTok is worst capturing all input including credentials like user names and passwords.

Read the rest of this entry »

Posted in Chrome, Conference Topics, Conferences, Development, Event, Firefox, iOS Development, JavaScript/ECMAScript, Mobile Development, Power User, Privacy, Safari, Scripting, Security, Software Development, Web Browsers, Web Development | Leave a Comment »

Don’t fall for the golden hammer: avoid git empty commits, especially for kicking off parts of your CI/CD

Posted by jpluimers on 2022/08/16

A while back Kristian Köhntopp (isotopp) wrote a blog post after quite a Twitter argument where he poses against using git empty commits. I’m with Kris: don’t use them for anything, especially not for kicking off your CI/CD.

Basically his blog post is all about avoiding to think you have a golden hammer, and avoid falling for the Law of the instrument – Wikipedia.

Originally, Abraham Maslow said in 1966:

“I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail.”

For me this has all to do with preventing technical debt: find the right tool to kick your CI/CD pipeline after part of that chain somehow malfunctioned is way better than polluting the commit history with empty commits.

His blog post: [Wayback/Archive.is] Empty commits and other wrong tools for the job | Die wunderbare Welt von Isotopp

The most important bit in it:

And since we are talking about CI/CD pipelines: Don’t YAML them. Don’t JSON them. Don’t XML them.

Programming in any of these three is wrong use of tooling, and you should not do it.

  • YAML, JSON and XML are for declarative things.
  • Python, Go and Rust are for procedural things.
  • Bash is for interactive use only.

Use the proper tooling for the job. Be an engineer.

This very much reminds me of an Entwickler Konferenz keynote a long time ago, where Neal Ford made the point that most software engineers act very much unlike what is expected from traditional engineering way of operating where the engineer is both responsible and liable for his actions.

The start of the Twitter thread: [Archive.is] Kristian Köhntopp on Twitter: “A lot of people right now that git is an API and triggering CI/CD pipelines with empty commits replaces the equivalent of a Kubernetes controller for their fragile pile of bash in git triggers. This is broken and begets more brokenness. Evidence:… “

The tweet that started the subtweet: [Archive.is] Florian Haas on Twitter: “(For anyone wondering, what’s nice about this one is it works in any CI. So you don’t have to remember how to manually kick off a GitLab CI pipeline or GitHub Action or Zuul job, you just push an empty commit and off you go.)”

Other relevant tweets:

Yes, you want to avoid shell too (anything like for instance sh, ash, dash, bash or zsh), but you have to know it (and understand why to avoid it) as often it is the only interactive way to access systems from the console.

And of course Kris also wrote a big document on that too, which is available as full PDF (Wayback), full HTML (Wayback) and chaptered HTML Die UNIX Shell /bin/sh.

But more importantly, Kris wrote [Wayback/Archive.is] Using Python to bash | Die wunderbare Welt von Isotopp which is about using Python to do things you might be tempted to do in the shell. It quotes

Shell is a thing you want to understand and then not use, because you learned to understand it.

which is from the German post in thread [Wayback/Archive.is] Bashprogrammierung, wo gehts am besten los which quotes Kris’ 1998 message:

From kris Tue Sep 1 11:26:12 1998
From: kris
Newsgroups: de.comp.os.unix.misc
Subject: Re: Shell-Frage, find, xargs, kopieren von vielen Dateien
References: <6seh24$q9a$2...@nz12.rz.uni-karlsruhe.de>
From: kr...@koehntopp.de (Kristian Koehntopp)
Alignment: chaotic/neutral
X-Copyright: (C) Copyright 1987-1998 Kristian Koehntopp -- All rights
reserved.
MIME-Version: 1.0
Content-Type: text/plain; charset=iso-8859-1
Content-Transfer-Encoding: 8bit

Marc.Hab...@gmx.de (Marc Haber) writes:
>mir ist das ganze Zeug mit der Shell, find, xargs und Konsorten noch
>reichlich verschlüsselt.

http://www.koehntopp.de/kris/artikel/unix/shellprogrammierung/

>xargs hin oder sollte ich besser ein Perlskript schreiben?

Verwende Perl. Shell will man koennen, dann aber nicht verwenden.

Kristian

–jeroen

Posted in *nix, *nix-tools, ash/dash, ash/dash development, bash, bash, Conference Topics, Conferences, Continuous Integration, Development, DVCS - Distributed Version Control, Event, git, Power User, Scripting, sh, Sh Shell, Software Development, Source Code Management, Technical Debt | Leave a Comment »

In some countries @archiveis redirect their domains using http-302 which can have trouble with multi-WAN

Posted by jpluimers on 2022/08/12

From [Wayback Archive.is blog — Why has the URL “archive-li” changed to…:

Why has the URL “archive-li” changed to “archive-ph”, and will this affect saved bookmarks at any time in the future?

Anonymous

This is temporary and only for some countries. All 7 domains work, so you do not need to change the bookmarks.

In The Netherlands all Archive Today domains redirect to archive.ph using a HTTP 302 redirect.

This caused trouble at my home location, but not at my brother, so I searched for local issues.

In the end, it was because I have dual WAN as network load balancing at home.

TL;DR

Modifying the routing table so traffic for 54.37.18.234 goes to WAN1 was my solution.

Finding the destination address

Read the rest of this entry »

Posted in .NET, Development, Hardware, Network-and-equipment, Power User, PowerShell, routers, Scripting, Software Development | Leave a Comment »

OWASP WebGoat repositories: Deliberately insecure JavaEE application to teach application security

Posted by jpluimers on 2022/08/02

Last year in OWASP top rated security “feature” A01:2021 – Broken Access Control, I promised to write more about how learn about OWASP documented and rated security vulnerabilities.

Today is the day you should start learning from [Wayback/Archive.is] Github: OWASP WebGoat:

Deliberately insecure JavaEE application to teach application security

It is a Java backend with a JavaScript/HTML frontend, but the vulnerabilities just as easily apply to other back-end stacks.

Repositories:

  1. [Wayback/Archive.is] WebGoat/WebGoat: WebGoat is a deliberately insecure application

    WebGoat is a deliberately insecure web application maintained by OWASP designed to teach web application security lessons.

    This program is a demonstration of common server-side application flaws. The exercises are intended to be used by people to learn about application security and penetration testing techniques.

    WARNING 1: While running this program your machine will be extremely vulnerable to attack. You should disconnect from the Internet while using this program. WebGoat’s default configuration binds to localhost to minimize the exposure.

    WARNING 2: This program is for educational purposes only. If you attempt these techniques without authorization, you are very likely to get caught. If you are caught engaging in unauthorized hacking, most companies will fire you. Claiming that you were doing security research will not work as that is the first thing that all hackers claim.

  2. [Wayback/Archive.is] WebGoat/WebGoat-Lessons: 7.x – The WebGoat STABLE lessons supplied by the WebGoat team.

    This repository contains all the lessons for the WebGoat container. Every lesson is packaged as a separate jar file which can be placed into a running WebGoat server.

  3. [Wayback/Archive.is] WebGoat/WebWolf (Can’t have a goat without a wolf, but I wonder where the cabbage is)
  4. [Wayback/Archive.is] WebGoat/WebGoat-Legacy: Legacy WebGoat 6.0 – Deliberately insecure JavaEE application
    This is the WebGoat Legacy version which is essentially the WebGoat 5 with a new UI.
    This program is a demonstration of common server-side application flaws. The exercises are intended to be used by people to learn about application penetration testing techniques.
  5. [Wayback/Archive.is] WebGoat/WebGoat-Archived-Releases: WebGoat 5.4 releases and older

    WebGoat 5.4 releases and older

  6. [Wayback/Archive.is] WebGoat/groovygoat: POC for dynamic groovy/thymeleaf based lesson system

    POC to demonstrate dynamic lessons with groovy controller/thymeleaf templates

They are by OWASP:

The Open Web Application Security Project (OWASP) is an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security.[4][5]The Open Web Application Security Project (OWASP) provides free and open resources. It is led by a non-profit called The OWASP Foundation. The OWASP Top 10 – 2021 is the published result of recent research based on comprehensive data compiled from over 40 partner organizations.

Very important is the [Wayback/Archive.is] OWASP Top Ten Web Application Security Risks | OWASP:

The OWASP Top 10 is a standard awareness document for developers and web application security. It represents a broad consensus about the most critical security risks to web applications.

Globally recognized by developers as the first step towards more secure coding.

Companies should adopt this document and start the process of ensuring that their web applications minimize these risks. Using the OWASP Top 10 is perhaps the most effective first step towards changing the software development culture within your organization into one that produces more secure code.
Changes in the OWASP Top 10 between 2017 and 2021:

More OWASP repositories (including the [Wayback/Archive.is] OWASP/Top10: Official OWASP Top 10 Document Repository and [Wayback/Archive.is] OWASP/www-project-top-ten: OWASP Foundation Web Respository which seem to be at a 4-year update interval got updated in 2021) are at [Wayback/Archive.is] Github: OWASP.

Related: [Archive.is] Jeroen Wiert Pluimers on Twitter: “This so much sounds like German government IT-projects: …”

Via:

–jeroen

Posted in Authentication, CSS, Development, Encryption, HTML, Java Platform, JavaScript/ECMAScript, Pen Testing, Scripting, Security, Software Development, Web Development | Leave a Comment »

eidam/cf-workers-status-page: Monitor your websites, showcase status including daily history, and get Slack/Telegram/Discord notification whenever your website status changes. Using Cloudflare Workers, CRON Triggers, and KV storage.

Posted by jpluimers on 2022/07/26

Cool: [Wayback/Archive.is] eidam/cf-workers-status-page:

Monitor your websites, showcase status including daily history, and get Slack/Telegram/Discord notification whenever your website status changes. Using Cloudflare Workers, CRON Triggers, and KV storage

Will try this out in a while, hopefully before this actually reaches the front of the blog article queue (:

Via: [Wayback/Archive.is] Status Page – Scott Helme (via [Archive.is] Scott Helme on Twitter: “And yes, I’m also nervously watching my own status page 😅 …”).

Related blog post: One of the Let’s Encrypt’s Root Certificates expired today (and their corresponding intermediate yesterday); how is your infrastructure doing?

–jeroen

Posted in CSS, Development, JavaScript/ECMAScript, Scripting, Software Development, Web Development | Leave a Comment »

Converting inline svg xml to png

Posted by jpluimers on 2022/07/19

A while ago, I had a web page showing the logo as inline svg xml code.

Edit 20231209: [Wayback/Archive] Render SVG to PNG: Edit fiddle – JSFiddle – Code Playground (explained in [Wayback/Archive] html – Convert embedded SVG to PNG in-place – Stack Overflow by [Wayback/Archive] User anatoly techtonik – Stack Overflow) works way better than the InfoHeap link:

  1. Replace the svg element in it (but keep the id="inputSvg" attribute!),
  2. Run the fiddle,
  3. Save the rendered PNG file by right-clicking the “PNG (Save link as..)” link then saving the file.

Original content

It took a while to find a place to convert that on-line: [Wayback/Archive.is] inline svg xml to png – online html sandbox – InfoHeap (via [Wayback/Archive.is] Convert svg xml text to png image using canvas – InfoHeap):

The solution is a bit of JavaScript (quoted below) that you can run-online: modify the svg bit in it, then run it, scroll down in the result and verify if the canvas fits (when not: adapt the canvas side, then re-run).

The svg xml code needs to be all on one line, so remove any line breaks in it before running.

I have tested it in Chrome, but it should work in non-Chromium browsers like Firefox as well.

The inner workings of the JavaScript conversion code is explained in [Wayback/Archive.is] html – Convert embedded SVG to PNG in-place – Stack Overflow with more demo code at [Archive.is] Rasterizing In-Document SVG (thanks [Wayback] Phrogz!).

Related: [Archive.is] Jeroen Wiert Pluimers on Twitter: “Nieuwe logo, oude logo. Vrijwel alle werknemers werden een halve dag naar huis gestuurd om ruimte te maken voor de genodigden voor de zodat die de introductie van naam en logo konden bijwonen. Heel goed om verbinding te verliezen met je echte doelgroep. … “

Provalu logo

MareGroep logo

--jeroen



<div id="diagram_image">
<svg id="inputSvg" xmlns="http://www.w3.org/2000/svg&quot; xmlns:inkspace="http://www.inkscape.org/namespaces/inkscape&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; viewBox="0 0 640 120">
<defs id="defs_block">
<filter height="1.504" id="filter_blur" inkspace:collect="always" width="1.1575" x="-0.07875" y="-0.252">
<feGaussianBlur id="feGaussianBlur3780" inkspace:collect="always" stdDeviation="4.2" />
</filter>
</defs>
<title>blockdiag</title>
<desc/>
<rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="67" y="46" />
<rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="259" y="46" />
<rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="451" y="46" />
<rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="64" y="40" />
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="128" y="66">discovery</text>
<rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="256" y="40" />
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="320" y="66">execution</text>
<rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="448" y="40" />
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="512" y="66">reporting</text>
<path d="M 192 60 L 248 60" fill="none" stroke="rgb(0,0,0)" />
<polygon fill="rgb(0,0,0)" points="255,60 248,56 248,64 255,60" stroke="rgb(0,0,0)" />
<path d="M 384 60 L 440 60" fill="none" stroke="rgb(0,0,0)" />
<polygon fill="rgb(0,0,0)" points="447,60 440,56 440,64 447,60" stroke="rgb(0,0,0)" />
</svg>
</div>
<img id="outputPngImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
<span id="outputPngLinkSpan">
<a href="">PNG (Save link as..)</a>
</span>

view raw

page-body.html

hosted with ❤ by GitHub


class SVGtoPNGDataURL {
constructor() {
this.canvas = document.createElement('canvas'); // Not shown on page
this.canvas2DContext = this.canvas.getContext('2d');
this.loaderImage = new Image; // Not shown on page
}
// Generate PNG data URL from SVG and send it to callback function when ready
go(svgElement, dataUrlCallback) {
var svgAsXML = (new XMLSerializer).serializeToString( svgElement );
this.loaderImage.width = this.canvas.width = svgElement.clientWidth;
this.loaderImage.height = this.canvas.height = svgElement.clientHeight;
var self = this;
this.loaderImage.onload = function() {
self.canvas2DContext.drawImage( self.loaderImage, 0, 0, self.loaderImage.width, self.loaderImage.height );
dataUrlCallback(self.canvas.toDataURL());
};
this.loaderImage.src = 'data:image/svg+xml,' + encodeURIComponent( svgAsXML );
}
};
var converter = new SVGtoPNGDataURL();
var inputSvgElement = document.querySelector('#inputSvg'), // Inline SVG element
outputPngImage = document.querySelector('#outputPngImage'), // Where to draw the result
outputPngLink = document.querySelector('#outputPngLinkSpan a');
converter.go(inputSvgElement, dataUrlCallback=function(dataURL) {
outputPngImage.src = dataURL;
outputPngLink.href = dataURL;
});

Posted in Chrome, Development, Firefox, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »