Drawing img containing SVG source with canvas to get Data URL

canvas, firefox, image, javascript, svg

Solution

You need to set the dimension of the canvas to the dimensions of the image. Here's an update to your fiddle.

var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
image.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
    image.src = canvas.toDataURL();
}

Adding `image.onload` makes this work in Firefox.

Problem

I ultimately want to get a data URI of an SVG graphic, and I am trying to do this by adding the SVG source to an image element, drawing the image with canvas, and then In this sample jsFiddle, it fails when trying to draw the canvas, what am I missing? I believe this should work in Firefox, and not Chrome, due to a security restriction. ``` var image = new Image(); var xml = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill-rule="evenodd" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" overflow="hidden" preserveAspectRatio="none" width="1291px" height="1006px" viewBox="0 0 491871 383286"><rect fill="#ffffff" fill-opacity="0" width="100%" height="100%"></rect><g transform="translate(6858 12192) scale(1.309375)"><g id="editor-ged1ef149_00"><g></g><g id="editor-ged1ef149_00-bg"><g></g><path fill="#FFFFFF" fill-opacity="1" d="M 0 0 L 365760 0 365760 274320 0 274320 Z"></path></g><g id="editor-ged1ef149_01"><g></g><path d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"></path><g direction="ltr" style="opacity: 0.8;"><g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,21945,31712.5209903717)"><g><g id="editor-ged1ef149_01-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"><g class="sketchy-text-content-text" transform="translate(0 43.34375)"><text x="0px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">Click</text><text x="128.34375px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">to</text><text x="186.6875px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">add</text><text x="285.03125px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">title</text></g></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 18186.157517899763 10911.694510739857 L 347573.84248210024 10911.694510739857 347573.84248210024 56595.32219570406 18186.157517899763 56595.32219570406 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"></path><path d="M 21336 14033.51953125 L 344424.0076446533 14033.51953125 344424.0076446533 53657.5209903717 21336 53657.5209903717 Z" pointer-events="all"></path><path d="M 21945 31712.5209903717 L 162926.90625 31712.5209903717 162926.90625 53048.5209903717 21945 53048.5209903717 Z" pointer-events="all"></path></g></g><g id="editor-ged1ef149_02"><g></g><path d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"></path><g direction="ltr" style="opacity: 0.8;"><g pointer-events="none" transform="matrix(381,0,0,381,21945,67665)"><g><g id="editor-ged1ef149_02-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"><g class="sketchy-text-content-text" transform="translate(0 44.671875)"><text x="0px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">Click</text><text x="98.125px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">to</text><text x="142.25px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">add</text><text x="220.375px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">text</text></g></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 18186.157517899763 63869.78520286396 L 347573.84248210024 63869.78520286396 347573.84248210024 262608.1145584726 18186.157517899763 262608.1145584726 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"></path><path d="M 21336 67056 L 344424.0076446533 67056 344424.0076446533 259668.00018310547 21336 259668.00018310547 Z" pointer-events="all"></path><path d="M 21945 70713 L 130291.875 70713 130291.875 91287 21945 91287 Z" pointer-events="all"></path></g></g><g id="editor-ged1ef149_05"><g><path stroke="#5da2ff" stroke-opacity="0.6" stroke-width="1925.9140811455848" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path></g><path fill="#3D85C6" fill-opacity="1" stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path></g><g id="editor-ged1ef149_06"><g></g><path fill="#FF0000" fill-opacity="1" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"></path><path fill="#cc0000" fill-opacity="1" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"></path><path stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"></path><g direction="ltr"><g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,59119.9988,140863.9374)"><g><g id="editor-ged1ef149_06-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 59119.9988 140863.9374 L 59119.9988 140863.9374 59119.9988 148864.9374 59119.9988 148864.9374 Z" pointer-events="all"></path></g></g></g><path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" pointer-events="none" d="M 238747.87589498807 125848.21002386636 L 238747.87589498807 192773.26968973747 127303.10262529833 192773.26968973747 127303.10262529833 125848.21002386636 Z"></path><path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 182880 125848 L 182880 120029"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 1163.9140811455848 0 C 1163.9140811455848 642.811997130027 642.8119971300271 1163.9140811455848 7.126682895371086e-14 1163.9140811455848 -642.8119971300268 1163.9140811455848 -1163.9140811455845 642.8119971300271 -1163.9140811455848 1.4253365790742172e-13 -1163.9140811455848 -642.8119971300268 -642.8119971300273 -1163.9140811455845 -2.1380048686113256e-13 -1163.9140811455848 642.8119971300267 -1163.9140811455848 1163.9140811455845 -642.8119971300273 1163.9140811455848 -2.8506731581484343e-13" transform="translate(182880,120028.63961813843)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,125848.21002386636)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,125848.21002386636)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,159310.73985680193)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,159310.73985680193)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,125848.21002386636)"></path></g><defs><filter id="myblur" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" stdDeviation="1524"></feGaussianBlur></filter></defs></svg>'; image.src = 'data:image/svg+xml,' + xml; document.querySelector('#container').appendChild(image); var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); context.drawImage(image, 0, 0); image.src = canvas.toDataURL(); ```

Original source