We Keep Coding

Convert an SVG to PNG using Javascript/jQuery and C# for download

I have an svg image on a page. A user then clicks a link and this is called to get the toDataUrl():
console.log('Processing svg for NOT Internet Explorer');
var svgText = $("#div-surrounding-svg-element").html();
var d3Canvas = document.getElementById("d3-canvas");
d3Canvas.width = 2000;
d3Canvas.height = 300;
var ctxt = d3Canvas.getContext("2d");
// make canvas background
ctxt.fillStyle = "#fff";
ctxt.fillRect(0, 0, d3Canvas.width, d3Canvas.height);
var svg = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" });
var domURL = self.URL || self.webkitURL || self;
var url = domURL.createObjectURL(svg);
var img = new Image();
img.onload = function ()
{
ctxt.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
var dataUrl = d3Canvas.toDataURL();
// $('#download-chart-dataUrl').val(dataUrl);
// var downloadExcelForm = $('#download-chart-form');
// downloadExcelForm.submit();
// $('#download-chart-form').submit();
DownloadPNG(dataUrl);
};
img.src = url;
}
DownloadPNG does a POST to the server and C# does this:
var base64Data = Regex.Match(dataUrl, #"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
var binData = Convert.FromBase64String(base64Data);
using (var stream = new MemoryStream(binData))
{
var tempFolder = ConfigurationManager.AppSettings["tempFilesDirectory"];
var bitmap = new Bitmap(stream);
var folder = Server.MapPath(tempFolder);
var imagePath = folder + $"/{Guid.NewGuid().ToString()}.png";
bitmap.Save(imagePath);
//return File(imagePath, "image/png", "Chart.png");
Response.Clear();
Response.AddHeader("Content-Disposition", "attachment;filename=Chart.png");
Response.WriteFile(imagePath);
Response.End();
}
I am getting a plain white png instead of the image I want. What am I missing? Thanks.

You don't need any server-side for download png)))Please see an example
P.S.
Using jquery for a dom manipulation is a "bad taste" in 2k18, please use dom api))
Update: I have added querySelector to the SVG child of SVG, and SVG serializing code.
downloadPng=function(){
var img = new Image();
img.onload = function (){
var canvas = document.createElement("canvas");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var ctxt = canvas.getContext("2d");
ctxt.fillStyle = "#fff";
ctxt.fillRect(0, 0, canvas.width, canvas.height);
ctxt.drawImage(img, 0, 0);
var a = document.createElement("a");
a.href = canvas.toDataURL("image/png");
a.download = "image.png"
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
var innerSvg = document.querySelector("#div-surrounding-svg-element svg svg");
var svgText = (new XMLSerializer()).serializeToString(innerSvg);
img.src = "data:image/svg+xml;utf8," + encodeURIComponent(svgText);
}
<div id="div-surrounding-svg-element">
<svg id="inner-svg" height="100" width="500" xmlns="http://www.w3.org/2000/svg">
<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:green" />
</svg>
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
</svg>
</div>
<button onclick="downloadPng()">download</button>

Convert SVG to PNG with applied images as background to svg elements

I have an external SVG file which contains some embedded image tags in pattern. Whenever I convert this SVG into PNG using toDataURL(), the generated PNG images does not contain the image I have applied as pattern to some SVG paths. Is there any way to solve this problem?

Yes there are : append the svg into your document and encode all the included images to dataURIs.
I am writing a script that does this and also some other stuff like including external style-sheets and some other fix of where toDataURL will fail (e.g external elements referenced through xlink:href attribute or <funciri>).
Here is the function I wrote for parsing the images content :
function parseImages(){
var xlinkNS = "http://www.w3.org/1999/xlink";
var total, encoded;
// convert an external bitmap image to a dataURL
var toDataURL = function (image) {
var img = new Image();
// CORS workaround, this won't work in IE<11
// If you are sure you don't need it, remove the next line and the double onerror handler
// First try with crossorigin set, it should fire an error if not needed
img.crossOrigin = 'Anonymous';
img.onload = function () {
// we should now be able to draw it without tainting the canvas
var canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
// draw the loaded image
canvas.getContext('2d').drawImage(this, 0, 0);
// set our <image>'s href attribute to the dataURL of our canvas
image.setAttributeNS(xlinkNS, 'href', canvas.toDataURL());
// that was the last one
if (++encoded === total) exportDoc();
};
// No CORS set in the response
img.onerror = function () {
// save the src
var oldSrc = this.src;
// there is an other problem
this.onerror = function () {
console.warn('failed to load an image at : ', this.src);
if (--total === encoded && encoded > 0) exportDoc();
};
// remove the crossorigin attribute
this.removeAttribute('crossorigin');
// retry
this.src = '';
this.src = oldSrc;
};
// load our external image into our img
img.src = image.getAttributeNS(xlinkNS, 'href');
};
// get an external svg doc to data String
var parseFromUrl = function(url, element){
var xhr = new XMLHttpRequest();
xhr.onload = function(){
if(this.status === 200){
var response = this.responseText || this.response;
var dataUrl = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(response);
element.setAttributeNS(xlinkNS, 'href', dataUrl);
if(++encoded === total) exportDoc();
}
// request failed with xhr, try as an <img>
else{
toDataURL(element);
}
};
xhr.onerror = function(){toDataURL(element);};
xhr.open('GET', url);
xhr.send();
};
var images = svg.querySelectorAll('image');
total = images.length;
encoded = 0;
// loop through all our <images> elements
for (var i = 0; i < images.length; i++) {
var href = images[i].getAttributeNS(xlinkNS, 'href');
// check if the image is external
if (href.indexOf('data:image') < 0){
// if it points to another svg element
if(href.indexOf('.svg') > 0){
parseFromUrl(href, images[i]);
}
else // a pixel image
toDataURL(images[i]);
}
// else increment our counter
else if (++encoded === total) exportDoc();
}
// if there were no <image> element
if (total === 0) exportDoc();
}
Here the svgDoc is called svg,
and the exportDoc() function could just be written as :
var exportDoc = function() {
// check if our svgNode has width and height properties set to absolute values
// otherwise, canvas won't be able to draw it
var bbox = svg.getBoundingClientRect();
if (svg.width.baseVal.unitType !== 1) svg.setAttribute('width', bbox.width);
if (svg.height.baseVal.unitType !== 1) svg.setAttribute('height', bbox.height);
// serialize our node
var svgData = (new XMLSerializer()).serializeToString(svg);
// remember to encode special chars
var svgURL = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
var svgImg = new Image();
svgImg.onload = function () {
var canvas = document.createElement('canvas');
// IE11 doesn't set a width on svg images...
canvas.width = this.width || bbox.width;
canvas.height = this.height || bbox.height;
canvas.getContext('2d').drawImage(svgImg, 0, 0, canvas.width, canvas.height);
doSomethingWith(canvas)
};
svgImg.src = svgURL;
};
But once again, you will have to append your svg into the document first (either through xhr or into an <iframe> or an <object> element, and you will have to be sure all your resources are CORS compliant (or from same domain) in order to get these rendered.
var svg = document.querySelector('svg');
var doSomethingWith = function(canvas) {
document.body.appendChild(canvas)
};
function parseImages() {
var xlinkNS = "http://www.w3.org/1999/xlink";
var total, encoded;
// convert an external bitmap image to a dataURL
var toDataURL = function(image) {
var img = new Image();
// CORS workaround, this won't work in IE<11
// If you are sure you don't need it, remove the next line and the double onerror handler
// First try with crossorigin set, it should fire an error if not needed
img.crossOrigin = 'anonymous';
img.onload = function() {
// we should now be able to draw it without tainting the canvas
var canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
// draw the loaded image
canvas.getContext('2d').drawImage(this, 0, 0);
// set our <image>'s href attribute to the dataURL of our canvas
image.setAttributeNS(xlinkNS, 'href', canvas.toDataURL());
// that was the last one
if (++encoded === total) exportDoc();
};
// No CORS set in the response
img.onerror = function() {
// save the src
var oldSrc = this.src;
// there is an other problem
this.onerror = function() {
console.warn('failed to load an image at : ', this.src);
if (--total === encoded && encoded > 0) exportDoc();
};
// remove the crossorigin attribute
this.removeAttribute('crossorigin');
// retry
this.src = '';
this.src = oldSrc;
};
// load our external image into our img
var href = image.getAttributeNS(xlinkNS, 'href');
// really weird bug that appeared since this answer was first posted
// we need to force a no-cached request for the crossOrigin be applied
img.src = href + (href.indexOf('?') > -1 ? + '&1': '?1');
};
// get an external svg doc to data String
var parseFromUrl = function(url, element) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (this.status === 200) {
var response = this.responseText || this.response;
var dataUrl = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(response);
element.setAttributeNS(xlinkNS, 'href', dataUrl);
if (++encoded === total) exportDoc();
}
// request failed with xhr, try as an <img>
else {
toDataURL(element);
}
};
xhr.onerror = function() {
toDataURL(element);
};
xhr.open('GET', url);
xhr.send();
};
var images = svg.querySelectorAll('image');
total = images.length;
encoded = 0;
// loop through all our <images> elements
for (var i = 0; i < images.length; i++) {
var href = images[i].getAttributeNS(xlinkNS, 'href');
// check if the image is external
if (href.indexOf('data:image') < 0) {
// if it points to another svg element
if (href.indexOf('.svg') > 0) {
parseFromUrl(href, images[i]);
} else // a pixel image
toDataURL(images[i]);
}
// else increment our counter
else if (++encoded === total) exportDoc();
}
// if there were no <image> element
if (total === 0) exportDoc();
}
var exportDoc = function() {
// check if our svgNode has width and height properties set to absolute values
// otherwise, canvas won't be able to draw it
var bbox = svg.getBoundingClientRect();
if (svg.width.baseVal.unitType !== 1) svg.setAttribute('width', bbox.width);
if (svg.height.baseVal.unitType !== 1) svg.setAttribute('height', bbox.height);
// serialize our node
var svgData = (new XMLSerializer()).serializeToString(svg);
// remember to encode special chars
var svgURL = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
var svgImg = new Image();
svgImg.onload = function() {
var canvas = document.createElement('canvas');
// IE11 doesn't set a width on svg images...
canvas.width = this.width || bbox.width;
canvas.height = this.height || bbox.height;
canvas.getContext('2d').drawImage(svgImg, 0, 0, canvas.width, canvas.height);
doSomethingWith(canvas)
};
svgImg.src = svgURL;
};
window.onload = parseImages;
canvas {
border: 1px solid green !important;
}
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="Pattern" x="0" y="0" width=".25" height=".25">
<image xlink:href="https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png" width="100" height="100"/>
</pattern>
</defs>
<rect fill="url(#Pattern)" x="0" y="0" width="200" height="200"/>
</svg>

Save inline SVG as JPEG/PNG/SVG

I have an inline SVG in my html, and I need to be able to save this as either a JPEG, PNG or SVG.
I have tried a few different methods with converting the SVG to canvas and then converting to JPEG, but I haven't been able to get these working.
Here is an example of my inline SVG.
.font {
color: #ffffff;
font-family: Roboto;
font-weight: bold;
text-transform: uppercase;
}
.name {
font-size: 64pt;
}
.top-bar-text {
font-size: 32pt;
}
.font tspan {
dominant-baseline: middle;
}
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
<svg width="256" height="256" id="icon">
<rect class="bg1" id="bg_color_1" x="0" y="0" width="256" height="256" fill="#4cbc5a" />
<path class="bg2" id="bg_color_2" d="M 0 96 L0,256 L256,256 L256,96 s -128 96 -256 0" fill="#08a21c" />
<text id="left_corner_text" x="24" y="36" width="48" height="64" class="top_bar lct font top-bar-text" text-anchor="middle" fill="#ffffff"><tspan>1</tspan></text>
<text id="right_corner_text" x="232" y="36" width="48" height="64" class="top_bar rct font top-bar-text" text-anchor="middle" fill="#ffffff"><tspan>2</tspan></text>
<text id="line_1_text" transform="scale(1,2)" x="128" y="90" width="256" height="192" class="l1t font name" text-anchor="middle" fill="#ffffff"><tspan>ABC</tspan></text>
</svg>
Also, not all the elements need to be exported, as some of the options the user has is to remove the top corner numbers.
I would like for when it's been converted to download straight to the browser.

Nowadays this is pretty simple.
The basic idea is:
SVG to canvas
canvas to dataUrl
trigger download from dataUrl
it actually works outside of the Stack Overflow snippet
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');
function triggerDownload (imgURI) {
var evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
var a = document.createElement('a');
a.setAttribute('download', 'MY_COOL_IMAGE.png');
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
a.dispatchEvent(evt);
}
btn.addEventListener('click', function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
});
<button>svg to png</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">
<rect x="10" y="10" width="50" height="50" />
<text x="0" y="100">Look, i'm cool</text>
</svg>
<canvas id="canvas"></canvas>
Regarding the downloading part, you can set up a filename and etc etc (although not in this example). Some days ago I answered a question on how to download a specific portion of HTML from the given page. It might be useful regarding the downloading part: https://stackoverflow.com/a/28087280/2178180
update: now letting you specify the filename

Here's a solution that works in IE11 as well.
I just did a bunch of testing of various methods of this and while the above answer by Ciro Costa is fantastic in that it works in Firefox and Chrome it does not work in IE11. IE11 fails due to a security issue with rendering an svg to the canvas which requires a canvas implementation, canvg. Here's a solution using canvg that's pretty terse and works in the latest versions of Chrome, Firefox, Edge, and IE11.
Fiddle: https://jsfiddle.net/StefanValentin/9mudw0ts/
DOM
<svg
id="my-svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="200"
height="200"
>
<rect x="10" y="10" width="50" height="50" />
<text x="0" y="100">Look, i'm cool</text>
</svg>
JavaScript
var svg = document.querySelector('#my-svg');
var data = (new XMLSerializer()).serializeToString(svg);
// We can just create a canvas element inline so you don't even need one on the DOM. Cool!
var canvas = document.createElement('canvas');
canvg(canvas, data, {
renderCallback: function() {
canvas.toBlob(function(blob) {
download('MyImageName.png', blob);
});
}
});
The download function above could be whatever you want to do, as there are many ways to trigger a download via JavaScript. Here's the one we use that works in all the browsers I've tested.
// Initiate download of blob
function download(
filename, // string
blob // Blob
) {
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
const elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}

Working off #CiroCosta. 1 option if you are having trouble exporting an element you could just draw the image to the canvas before drawing the svg image
btn.addEventListener('click', function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
// get the raw image from the DOM
var rawImage = document.getElementById('yourimageID');
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(rawImage, 0, 0);
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
});
Worked for me but only for png and jpeg. SVG files still only display inline elements and not tags
EDIT: The way you create an svg like this is actually by converting the image tag into Base64 and the setting that as the xlink:href in the image attributes like this:
<image id="crop" width="725" height="1764" xlink:href="data:image/png;base64,iVBORw0KGgo ... " />
and then triggering the download on the whole svg url like this:
btn.addEventListener('click', function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var rawImage = document.getElementById('yourimageID');
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
triggerDownload(url);
DOMURL.revokeObjectURL(url);
}
};
you can convert pngs like this here:
function getDataUri(url, callback) {
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
canvas.getContext('2d').drawImage(this, 0, 0);
// Get raw image data
callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));
// ... or get as Data URI
callback(canvas.toDataURL('image/png'));
};
image.src = url;
}
then setting the attribute
getDataUri('localImagepath', function (dataUri) {
image.setAttribute('xlink:href', dataUri);
});

The solution for saving inline SVG as SVG file
Works in modern browsers
<svg width="100" height="100">
<rect fill="red" x="0" y="0" width="100" height="100" />
</svg>
<button>Save to SVG</button>
let btn = document.querySelector('button')
let svg = document.querySelector('svg')
let triggerDownload = (imgURI, fileName) => {
let a = document.createElement('a')
a.setAttribute('download', 'image.svg')
a.setAttribute('href', imgURI)
a.setAttribute('target', '_blank')
a.click()
}
let save = () => {
let data = (new XMLSerializer()).serializeToString(svg)
let svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'})
let url = URL.createObjectURL(svgBlob)
triggerDownload(url)
}
let btn = document.querySelector('button')
btn.addEventListener('click', save)
Codepen: https://codepen.io/udovichenko/pen/yLXaWLB

The answer by #ciro costa does help, but the generated png height is not working correctly unless the canvas height and width is set.
function downloadImg() {
const svgElem = document.querySelector('svg')
const serializer = new XMLSerializer();
let svgData = serializer.serializeToString(svgElem);
svgData = '<?xml version="1.0" standalone="no"?>\r\n' + svgData;
const svgBlob = new Blob([svgData], {
type: 'image/svg+xml;charset=utf-8',
});
let DOMURL = window.URL || window.webkitURL || window;
const url = DOMURL.createObjectURL(svgBlob);
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const domRect = svgElem.getBBox();
canvas.width = domRect.width;
canvas.height = domRect.height;
ctx.drawImage(img, 0, 0, domRect.width, domRect.height);
DOMURL.revokeObjectURL(url);
const imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
download(imgURI);
};
img.onerror = (e) => {
console.error('Image not loaded', e);
};
img.src = url;
}
function download(href) {
let download = document.createElement('a');
download.href = href;
download.download = 'img.png';
download.click();
download.remove();
}
<svg width="256" height="256" id="icon">
<rect class="bg1" id="bg_color_1" x="0" y="0" width="256" height="256" fill="#4cbc5a" />
</svg>
<div>
<button onclick="downloadImg()">Download</button>
</div>

In general, the solutions presented here work, but don't forget to explicitly set the canvas size in pixels, otherwise the image may be cropped.
For example:
// get the size of the svg image
const { width, height } = svg.getBBox();
// create a canvas and set its size
var canvas = document.createElement(`canvas`);
canvas.setAttribute(`width`, width);
canvas.setAttribute(`height`, height);

Use this to example, but JavaScript section is simplify to you.
function SVGPNG(svg, cb) {
let temp = document.createElement("img");
let imageSrc = URL.createObjectURL(
new Blob([svg], { type: "image/svg+xml" })
);
temp.src = imageSrc;
temp.setAttribute("style", "position:fixed;left:-200vw;");
document.body.appendChild(temp);
temp.onload = function onload() {
let canvas = document.createElement("canvas");
canvas.width = temp.clientWidth;
canvas.height = temp.clientHeight;
let ctx = canvas.getContext("2d");
ctx.drawImage(temp, 0, 0);
let src = canvas.toDataURL("image/png");
cb(src, canvas);
temp.remove();
URL.revokeObjectURL(imageSrc);
};
}
function onPaste(e) {
SVGPNG(e.target.value, (src) => {
document.getElementById("output").value = src;
});
}
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
textarea {
border: solid 1px #ccc;
border-radius: 10px;
resize: none;
outlined: solid 1px #999;
}
<textarea cols="60" rows="20" autofocus onchange="onPaste">Paste your SVG code here...</textarea>
<textarea cols="60" rows="20" readonly id="output">Your output here...</textarea>

Keeping it simple, place an svg, a canvas and an empty img into the HTML. Set all to the same size. The javascript will use the svg to create a binary large object which is then rendered in the canvas as a png image. The function call creates a clone of the canvas and converts it into a jpeg.
function fjpg(){
clone = c.cloneNode(true);
ctx = clone.getContext('2d');
ctx.fillStyle = "#FFF";
ctx.fillRect(0, 0, clone.width, clone.height);
ctx.drawImage(c, 0, 0);
document.all.jp1.src=clone.toDataURL("image/jpeg");
ctx = c.getContext('2d');
svgBlob = new Blob( [dataPNG], { type: 'image/svg+xml' } );
urlPNG = self.URL.createObjectURL( svgBlob );
img = new Image();
img.onload = function () {ctx.drawImage(img,0,0)}
img.src = urlPNG;
}
c = document.all.canvas0;
ctx = c.getContext('2d');
data = (new XMLSerializer()).serializeToString(document.all.svg0);
dataJPG = data.replace('>SVG<','>JPG<');
dataPNG = data.replace('>SVG<','>PNG<');
svgBlob = new Blob( [dataJPG], { type: 'image/svg+xml' } );
urlJPG = self.URL.createObjectURL( svgBlob );
img = new Image();
img.onload = function () {
ctx.drawImage( img, 0, 0 );
fjpg();
}
img.src = urlJPG;
<svg id='svg0' height=180 width=180><rect width=100% height=100% fill=red /><circle cx=90 cy=90 r=80 fill=green /><text x=90 y=105 font-size=60 text-anchor=middle fill=yellow>SVG</text></svg>
<canvas id="canvas0" height=180 width=180></canvas>
<img src='' id='jp1'>

Canvas toBlob does not work on iPhone Safari?

I try to convert a canvas image into a blob. This can be done with the toBlob() polyfile.
It works on desktop browsers but on iPhone I do not get any blob. The size is always zero.
Here is a JsFiddle for this: http://jsfiddle.net/confile/h7zV3/
How do I get the Blob from the canvas on the iPhone?
Here is the code I used:
<input id="file" type="file" />
<img id="img">
<br>canvas<br>
<canvas id="mycanvas" ></canvas>
<script type="text/javascript">
$(function(){
var $inputFile = $("#file"),
inputFile = $inputFile[0],
$img = $("#img"),
img = $img[0];
var tmpImage = img; // document.createElement("img");
$inputFile.on("change", function() {
var files = inputFile.files;
if (!files || !files.length)
return
var reader = new FileReader()
reader.onload = function(progressEvent) {
console.log("reader.result: "+reader.result);
tmpImage.onload = function() {
var canvas = $("#mycanvas")[0]; //document.createElement("canvas"),
context = canvas.getContext("2d");
canvas.width = this.width;
canvas.height = this.height;
context.drawImage(this, 0, 0);
var dataUrlValue = canvas.toDataURL(); //canvas.toDataURL("image/jpeg");
alert(dataUrlValue);
var myBlob1 = dataURItoBlob(dataUrlValue);
console.log(myBlob1);
alert(myBlob1.size);
canvas.toBlob(function(blob) {
console.log("done");
alert(blob.size);
}, 'image/jpeg');
}; // end onload
tmpImage.src = reader.result;
};
reader.readAsDataURL(files[0]);
});
}); // end JQuery
</script>

Use this plugin JavaScript-Canvas-to-Blob to convert canvas elements into Blob objects.
Then use the canvas.toBlob() method in the same way as the native implementation

You may use.
var data = context.getImageData(0, 0, IMAGE_WIDTH, IMAGE_HEIGHT);
Each element of the returned array is a byte of the image, considering the image is 3 bytes per pixel in the order RGB.
for(var i = 0; i < data.length; i++) {
// do something for saving the data (bytes) in the format you need
// ... if you need to
}

How can I draw an image from the HTML5 File API on Canvas?

I would like to draw an image opened with the HTML5 File API on a canvas.
In the handleFiles(e) method, I can access the File with e.target.files[0] but I can't draw that image directly using drawImage. How do I draw an image from the File API on HTML5 canvas?
Here is the code I have used:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
}
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(e.target.files[0], 20,20);
alert('the image is drawn');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
</body>
</html>

You have a File instance which is not an image.
To get an image, use new Image(). The src needs to be an URL referencing to the selected File. You can use URL.createObjectURL to get an URL referencing to a Blob (a File is also a Blob): http://jsfiddle.net/t7mv6/86/.
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
img.onload = function() {
ctx.drawImage(img, 20,20);
alert('the image is drawn');
}
img.src = URL.createObjectURL(e.target.files[0]);
Note: be sure to revoke the object url when you are done with it otherwise you'll leak memory. If you're not doing anything too crazy, you can just stick a URL.revokeObjectURL(img.src) in the img.onload function.
References:
https://developer.mozilla.org/en/DOM/File
http://html5demos.com/file-api

Live Example
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 20, 20);
}
img.src = url;
}
window.URL.createObjectUrldocs
You could also use the FileReader instead to create the object URL.
The FileReader has slightly better browser support.
The FileReader approach works in FF6 / Chrome. I'm not certain whether setting Img.src to a Blob is valid and cross-browser though.
Creating object urls is the correct way to do it.
Edit:
As mentioned in the commment window.URL support whilst offline seems unavailable in FF6/Chrome.

Here is a complete example (Fiddle) using FileReader (which has better browser support as mentioned by Raynos). In this example I also scale Canvas to fit the image.
In real life example you might scale the image to some maximum so that your form will not blow up ;-). Here is an example with scaling (Fiddle).
var URL = window.webkitURL || window.URL;
window.onload = function() {
var input = document.getElementById('input');
input.addEventListener('change', handleFiles, false);
// set original canvas dimensions as max
var canvas = document.getElementById('canvas');
canvas.dataMaxWidth = canvas.width;
canvas.dataMaxHeight = canvas.height;
}
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
var reader = new FileReader();
var file = e.target.files[0];
// load to image to get it's width/height
var img = new Image();
img.onload = function() {
// setup scaled dimensions
var scaled = getScaledDim(img, ctx.canvas.dataMaxWidth, ctx.canvas.dataMaxHeight);
// scale canvas to image
ctx.canvas.width = scaled.width;
ctx.canvas.height = scaled.height;
// draw image
ctx.drawImage(img, 0, 0
, ctx.canvas.width, ctx.canvas.height
);
}
// this is to setup loading the image
reader.onloadend = function () {
img.src = reader.result;
}
// this is to read the file
reader.readAsDataURL(file);
}
// returns scaled dimensions object
function getScaledDim(img, maxWidth, maxHeight) {
var scaled = {
ratio: img.width / img.height,
width: img.width,
height: img.height
}
if (scaled.width > maxWidth) {
scaled.width = maxWidth;
scaled.height = scaled.width / scaled.ratio;
}
if (scaled.height > maxHeight) {
scaled.height = maxHeight;
scaled.width = scaled.height / scaled.ratio;
}
return scaled;
}
canvas {
border:1px solid black
}
<input type="file" id="input"/>
<div>
<canvas width="400" height="300" id="canvas"/>
</div>