We Keep Coding

"Silently" save canvas to image with javascript

I have a canvas on which I draw pretty images!
Using .toDataURL('image/gif'), I save those images as image files. So far so good.
Thing is that I want to save a number of those images (I change parameters for each image to be saved.)
I would like to do it "silently", that is without having to click on "Save" on the modal window that pops up every time.
Is there a way to do that?
Thanks.

Using the download attribute of an <a> element, you can silently download the image data without needing to deal with any dialog windows. I should warn that this could be potentially dangerous as it is literally downloading a file to your computer without any direct confirmation.
Once you have your data URL from your canvas, the rest is pretty easy. You can create a new <a> element, set the href to your data URL, set the download attribute to the filename you wish to use, and then execute the click() event on this newly created element.
let dataURL
const _Base64Image = url => {
const img = new Image()
img.setAttribute('crossOrigin', 'anonymous')
img.onload = () => {
const canvas = document.createElement("canvas")
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0)
dataURL = canvas.toDataURL("image/png")
_SetBG(document.querySelector("#imgTest"), dataURL, img.width, img.height)
}
img.src = url
}
const _SetBG = (el, data, w, h) => {
el.style.width = `${w}px`
el.style.height = `${h}px`
el.style.backgroundImage = `url("${data}")`
}
const _SaveImage = (data, filename) => {
const a = document.createElement("a")
a.href = data
a.download = filename
a.click()
}
_Base64Image('https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png')
document.querySelector("input[type='button']").addEventListener("click", e => {
_SaveImage(dataURL, "test_image.png")
})
.random-background {
max-height: 100px;
max-width: 100px;
background-size: contain;
}
<div id="imgTest" class="random-background"></div>
<br>
<br>
<input type="button" value="Save Image">
NOTE
This snippet will not work on StackOverflow as part of their security settings. However I also uploaded this to CodePen so you can see a working version.
For the sake of not forcing downloads on anyone I included a button that must be clicked to save the image. However this is not required for the code to work. Simply calling the _SaveImage() function (and passing in the data URL and filename) will work. But having the snippet do this automatically is somewhat problematic as you can get hit with multiple downloads for the same file just by going to the page.

Save canvas img with droidscript

OK so I am aware of the traditional HTML5 ways of saving a canvas img as a png, however my project is a DroidScript app and window location doesn't work and there is no server side to post process the img on a server and download it.
My question is how would one get the img to save using the DroidScript api probably using app.WriteFile.
I've tried generating the img with var img = app.CreateImage and then saving it with img.Save but the img isn't successfully generated, I've also tried converting it to a blob using canvas.toBlob and using app.WriteFile but the png is broken... same with canvas.toDataURL as well.
Both conversions fail with app.WriteFile and app.CreateFile which are the only solutions that seem to actually save the file at all. I've also tried using JavaScript's FileReader to do the conversions with no success...
I believe I am simply doing the order of operations incorrectly or using the wrong properties.
I don't have all of the versions of code that I've tried but here is the latest version that is generating a broken png.
app.toImage = function(){
var reader = new FileReader();
reader.onload = function readSuccess(e) {
var img = e.target.result;
var file = app.CreateFile('/sdcard/Download/t.png', "rw");
uint8ArrayNew = new Uint8Array(img);
file.WriteData(uint8ArrayNew, "Bytes");
file.Close();
};
win.canvas.toBlob(function(b) {
reader.readAsDataURL(b);
});
}
}
EDIT... this code saves the base64 data url inside of the file as a string which can be validated to show the correct image, however the file still appears as broken in a file browser
app.toImage = function(){
var img = win.canvas.toDataURL("image/png;base64;");
var reader = new FileReader();
reader.addEventListener("load", function (e) {
// preview.src = reader.result;
app.WriteFile('/sdcard/Download/t.png', reader.result);
}, false);
win.canvas.toBlob(function(b) {
reader.readAsDataURL(b);
});
}
}
This is the file contents
data:image/png;base64,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BAgQIECAAAECBFZSYKkAOE1wzx0b+w4j/K3kjr0oAgQIECBAgAABAgQIECBAgACBGQscKQDO2MvoBAgQIECAAAECBAgQIECAAAECBNZKQABcq3V5sQQIECBAgAABAgQIECBAgAABAgSWExAAl/PytwkQIECAAAECBAgQIECAAAECBAislYAAuFbr8mIJECBAgAABAgQIECBAgAABAgQILCcgAC7n5W8TIECAAAECBAgQIECAAAECBAgQWCsBAXCt1uXFEiBAgAABAgQIECBAgAABAgQIEFhOQABczsvfJkCAAAECBAgQIECAAAECBAgQILBWAgLgWq3LiyVAgAABAgQIECBAgAABAgQIECCwnIAAuJyXv02AAAECBAgQIECAAAECBAgQIEBgrQSOFACfeWEYrr9yreb0YgkQIECAAAECBAgQIECAAAECBAjMUuBIAXCS+sZ/D8OtPzpLN0MTIECAAAECBAgQIECAAAECBAgQWAuBVxUA12JCL5IAAQIECBAgQIAAAQIECBAgQIDAjAUEwBkv3+gECBAgQIAAAQIECBAgQIAAAQJ9gSMFQJ8B2D8MExIgQIAAAQIECBAgQIAAAQIECDQEjhQAG6ObggABAgQIECBAgAABAgQIECBAgEBf4MgB8J//9fHhHW99c1/IhAQIECBAgAABAgQIECBAgAABAgTWWGDpACj8rfG2vXQCBAgQIECAAAECBAgQIECAAIHZCSwdAEehjY2NBdRD//KYpwBndzIGJkCAAAECBAgQIECAAAECBAgQWCeBpQLgFP6++eyFxYw3X3fV4tfNzc11mtlrJUCAAAECBAgQIECAAAECBAgQIDAbgUMHwDH+feIrLwxvP/GD4ekzTy2Abjj+E8M//Nu54ffeeYMIOJuTMSgBAgQIECBAgAABAgQIECBAgMA6CSwVAMcn/778rdcNF77z3M6Mv/bT1yyeBPQU4Dqt3WslQIAAAQIECBAgQIAAAQIECBCYi8ChA+AI4i3AczkLcxIgQIAAAQIECBAgQIAAAQIECFQElg6ADzz5/eGem67Ynv93PzUMn3ivp/8q12AOAgQIECBAgAABAgQIECBAgACBnMDSAfDDD28ON//4D4Z/fOJ1w988+NcCYO4kDESAAAECBAgQIECAAAECBAgQIFASOFIAfPS/huHa1w/DZ+94bNh47Vs8AVi6CLMQIECAAAECBAgQIECAAAECBAikBF5VAPQEYOoWDEOAAAECBAgQIECAAAECBAgQIBAUWDoAbv7v14fbP3fb4glAATB4EUYiQIAAAQIECBAgQIAAAQIECBBICSwdAMfPAJzeAiwApm7BMAQIECBAgAABAgQIECBAgAABAkGBIwfAh9699fl/H/iaLwEJHoWRCBAgQIAAAQIECBAgQIAAAQIEOgJHDoDeAtw5ApMQIECAAAECBAgQIECAAAECBAh0BZYOgD4DsHsMJiNAgAABAgQIECBAgAABAgQIEOgJLB0AfQZg7whMRIAAAQIECBAgQIAAAQIECBAg0BU4UgB84tw2iC8B6R6GyQgQIECAAAECBAgQIECAAAECBBoCRwqA4+hjBPzsHVtfBPLatwybm5sNDVMQIECAAAECBAgQIECAAAECBAgQiAksHQDH+cfPAZy+AXjxzwJg7CyMQ4AAAQIECBAgQIAAAQIECBAgUBFYKgCOQ29sbOyZXfyrnII5CBAgQIAAAQIECBAgQIAAAQIEigJLB8AigpkIECBAgAABAgQIECBAgAABAgQIVAUEwOpmzUWAAAECBAgQIECAAAECBAgQIEBgS0AAdAYECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFqi+qawAACAASURBVBAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAvcXANwAAC11JREFUgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgICYHi5RiNAgAABAgQIECBAgAABAgQIECAgALoBAgQIECBAgAABAgQIECBAgAABAmEBATC8XKMRIECAAAECBAgQIECAAAECBAgQEADdAAECBAgQIECAAAECBAgQIECAAIGwgAAYXq7RCBAgQIAAAQIECBAgQIAAAQIECAiAboAAAQIECBAgQIAAAQIECBAgQIBAWEAADC/XaAQIECBAgAABAgQIECBAgAABAgQEQDdAgAABAgQIECBAgAABAgQIECBAICwgAIaXazQCBAgQIECAAAECBAgQIECAAAECAqAbIECAAAECBAgQIECAAAECBAgQIBAWEADDyzUaAQIECBAgQIAAAQIECBAgQIAAAQHQDRAgQIAAAQIECBAgQIAAAQIECBAICwiA4eUajQABAgQIECBAgAABAgQIECBAgIAA6AYIECBAgAABAgQIECBAgAABAgQIhAUEwPByjUaAAAECBAgQIECAAAECBAgQIEBAAHQDBAgQIECAAAECBAgQIECAAAECBMICAmB4uUYjQIAAAQIECBAgQIAAAQIECBAgIAC6AQIECBAgQIAAAQIECBAgQIAAAQJhAQEwvFyjESBAgAABAgQIECBAgAABAgQIEBAA3QABAgQIECBAgAABAgQIECBAgACBsIAAGF6u0QgQIECAAAECBAgQIECAAAECBAgIgG6AAAECBAgQIECAAAECBAgQIECAQFhAAAwv12gECBAgQIAAAQIECBAgQIAAAQIEBEA3QIAAAQIECBAgQIAAAQIECBAgQCAsIACGl2s0AgQIECBAgAABAgQIECBAgAABAgKgGyBAgAABAgQIECBAgAABAgQIECAQFhAAw8s1GgECBAgQIECAAAECBAgQIECAAAEB0A0QIECAAAECBAgQIECAAAECBAgQCAsIgOHlGo0AAQIECBAgQIAAAQIECBAgQICAAOgGCBAgQIAAAQIECBAgQIAAAQIECIQFBMDwco1GgAABAgQIECBAgAABAgQIECBAQAB0AwQIECBAgAABAgQIECBAgAABAgTCAgJgeLlGI0CAAAECBAgQIECAAAECBAgQICAAugECBAgQIECAAAECBAgQIECAAAECYQEBMLxcoxEgQIAAAQIECBAgQIAAAQIECBAQAN0AAQIECBAgQIAAAQIECBAgQIAAgbCAABhertEIECBAgAABAgQIECBAgAABAgQICIBugAABAgQIECBAgAABAgQIECBAgEBYQAAML9doBAgQIECAAAECBAgQIECAAAECBARAN0CAAAECBAgQIECAAAECBAgQIEAgLCAAhpdrNAIECBAgQIAAAQIECBAgQIAAAQICoBsgQIAAAQIECBAgQIAAAQIECBAgEBYQAMPLNRoBAgQIECBAgAABAgQIECBAgAABAdANECBAgAABAgQIECBAgAABAgQIEAgLCIDh5RqNAAECBAgQIECAAAECBAgQIECAgADoBggQIECAAAECBAgQIECAAAECBAiEBQTA8HKNRoAAAQIECBAgQIAAAQIECBAgQEAAdAMECBAgQIAAAQIECBAgQIAAAQIEwgL/D4op7GOot1T8AAAAAElFTkSuQmCC
Paste into this tool and i get the correct image
http://codebeautify.org/base64-to-image-converter
How do i save it as an actual png

The DroidScript Image control allows you to set the pixel data using a base64 string, so you could send the data to a hidden or visible image control and then use the img.Save() method to save it as a jpeg or png.
This is the prototype for the img.SetPixelData method:-
SetPixelData( data, width, height, options )
It can handle with or without mime type header and you can leave out the width, height and options params if you like

There's a bit of hack to it, you have to use webview in order to view the base64 one, here's the sample code:
var temporaryFile = "/sdcard/temp.png";
//Called when application is started.
function OnStart()
{
//Create a layout with objects vertically centered.
lay = app.CreateLayout( "linear", "VCenter,FillXY" );
//Create a text label and add it to layout.
txt = app.CreateText( "Hello" );
txt.SetTextSize( 32 );
lay.AddChild( txt );
btn= app.CreateButton("Choose Image");
btn.SetOnTouch(function(){
app.ChooseImage("Internal", function(path){
var img2 = app.CreateImage(path);
var img2 = app.CreateImage(path);
var img = app.CreateImage(null, 0.3, 0.3);
img.DrawImage(img2,0,0,1,1);
img.Save(temporaryFile);
txt = app.ReadFile(temporaryFile,'base64');
var pixelData = 'data:image/png;base64,' + txt;
var converted = base64Image(pixelData, 0.3, 0.3);
lay.AddChild(app.CreateText("raw"));
lay.AddChild(img2);
lay.AddChild(app.CreateText("modified"));
lay.AddChild(img);
lay.AddChild(app.CreateText("base64 src"));
lay.AddChild(converted);
});
});
lay.AddChild( btn );
//Add layout to app.
app.AddLayout( lay );
}
function base64Image(src, w, h)
{
var web = app.CreateWebView(w,h);
var html = [
"<body style='margin:0px'>",
"<img src='"+src+"' width='100%' height='100%'/>",
"</body>"
].join('');
web.LoadHtml(html, "file:///Sys/");
return web;
}

Turning HTML content in to a canvas element [duplicate]

It would be incredibly useful to be able to temporarily convert a regular element into a canvas. For example, say I have a styled div that I want to flip. I want to dynamically create a canvas, "render" the HTMLElement into the canvas, hide the original element and animate the canvas.
Can it be done?

There is a library that try to do what you say.
See this examples and get the code
http://hertzen.com/experiments/jsfeedback/
http://html2canvas.hertzen.com/
Reads the DOM, from the html and render it to a canvas, fail on some, but in general works.

Take a look at this tutorial on MDN: https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas (archived)
Its key trick was:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>I</em> like ' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
That is, it used a temporary SVG image to include the HTML content as a "foreign element", then renders said SVG image into a canvas element. There are significant restrictions on what you can include in an SVG image in this way, however. (See the "Security" section for details — basically it's a lot more limited than an iframe or AJAX due to privacy and cross-domain concerns.)

Sorry, the browser won't render HTML into a canvas.
It would be a potential security risk if you could, as HTML can include content (in particular images and iframes) from third-party sites. If canvas could turn HTML content into an image and then you read the image data, you could potentially extract privileged content from other sites.
To get a canvas from HTML, you'd have to basically write your own HTML renderer from scratch using drawImage and fillText, which is a potentially huge task. There's one such attempt here but it's a bit dodgy and a long way from complete. (It even attempts to parse the HTML/CSS from scratch, which I think is crazy! It'd be easier to start from a real DOM node with styles applied, and read the styling using getComputedStyle and relative positions of parts of it using offsetTop et al.)

You can use dom-to-image library (I'm the maintainer).
Here's how you could approach your problem:
var parent = document.getElementById('my-node-parent');
var node = document.getElementById('my-node');
var canvas = document.createElement('canvas');
canvas.width = node.scrollWidth;
canvas.height = node.scrollHeight;
domtoimage.toPng(node).then(function (pngDataUrl) {
var img = new Image();
img.onload = function () {
var context = canvas.getContext('2d');
context.translate(canvas.width, 0);
context.scale(-1, 1);
context.drawImage(img, 0, 0);
parent.removeChild(node);
parent.appendChild(canvas);
};
img.src = pngDataUrl;
});
And here is jsfiddle

Building on top of the Mozdev post that natevw references I've started a small project to render HTML to canvas in Firefox, Chrome & Safari. So for example you can simply do:
rasterizeHTML.drawHTML('<span class="color: green">This is HTML</span>'
+ '<img src="local_img.png"/>', canvas);
Source code and a more extensive example is here.

No such thing, sorry.
Though the spec states:
A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas.
Which may be as close as you'll get.
A lot of people want a ctx.drawArbitraryHTML/Element kind of deal but there's nothing built in like that.
The only exception is Mozilla's exclusive drawWindow, which draws a snapshot of the contents of a DOM window into the canvas. This feature is only available for code running with Chrome ("local only") privileges. It is not allowed in normal HTML pages. So you can use it for writing FireFox extensions like this one does but that's it.

You could spare yourself the transformations, you could use CSS3 Transitions to flip <div>'s and <ol>'s and any HTML tag you want. Here are some demos with source code explain to see and learn: http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

the next code can be used in 2 modes, mode 1 save the html code to a image, mode 2 save the html code to a canvas.
this code work with the library: https://github.com/tsayen/dom-to-image
*the "id_div" is the id of the element html that you want to transform.
**the "canvas_out" is the id of the div that will contain the canvas
so try this code.
:
function Guardardiv(id_div){
var mode = 2 // default 1 (save to image), mode 2 = save to canvas
console.log("Process start");
var node = document.getElementById(id_div);
// get the div that will contain the canvas
var canvas_out = document.getElementById('canvas_out');
var canvas = document.createElement('canvas');
canvas.width = node.scrollWidth;
canvas.height = node.scrollHeight;
domtoimage.toPng(node).then(function (pngDataUrl) {
var img = new Image();
img.onload = function () {
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
};
if (mode == 1){ // save to image
downloadURI(pngDataUrl, "salida.png");
}else if (mode == 2){ // save to canvas
img.src = pngDataUrl;
canvas_out.appendChild(img);
}
console.log("Process finish");
});
}
so, if you want to save to image just add this function:
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
}
Example of use:
<html>
<head>
</script src="/dom-to-image.js"></script>
</head>
<body>
<div id="container">
All content that want to transform
</div>
<button onclick="Guardardiv('container');">Convert<button>
<!-- if use mode 2 -->
<div id="canvas_out"></div>
</html>
Comment if that work.
Comenten si les sirvio :)

The easiest solution to animate the DOM elements is using CSS transitions/animations but I think you already know that and you try to use canvas to do stuff CSS doesn't let you to do. What about CSS custom filters? you can transform your elements in any imaginable way if you know how to write shaders. Some other link and don't forget to check the CSS filter lab.
Note: As you can probably imagine browser support is bad.

function convert() {
dom = document.getElementById('divname');
var script,
$this = this,
options = this.options,
runH2c = function(){
try {
var canvas = window.html2canvas([ document.getElementById('divname') ], {
onrendered: function( canvas ) {
window.open(canvas.toDataURL());
}
});
} catch( e ) {
$this.h2cDone = true;
log("Error in html2canvas: " + e.message);
}
};
if ( window.html2canvas === undefined && script === undefined ) {
} else {.
// html2canvas already loaded, just run it then
runH2c();
}
}

Convert div into downloadable Image

This is the code which I am using to convert div into image and download that using html2canvas.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>
<style>
#download{
margin:10% 40%;
}
.download-btn{
padding:10px;
font-size:20px;
margin:0 20px;
}
#test{
background:#3399cc;
padding:50px;
}
.x2{
transform: scale(2,2);
}
</style>
<div id="download">
<h1 id="test">Testing Download</h1>
</div>
<center>
<button id="download-window" class="download-btn">New Window</button>
<button id="download-png" class="download-btn">Download png</button>
<button id="download-jpg" class="download-btn">Download jpg</button>
<button id="download-pngx2" class="download-btn">Download pngx2</button>
</center>
<script>
$('#download-window').click(function(){
html2canvas($('#download'),
{
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
window.open(img);
}
});
});
$('#download-png').click(function(){
html2canvas($('#download'),
{
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
a.download = 'image.png';
a.click();
}
});
});
$('#download-pngx2').click(function(){
$('#download').addClass('x2');
html2canvas($('#download'),
{
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
a.download = 'image.png';
a.click();
}
});
});
$('#download-jpg').click(function(){
html2canvas($('#download'),
{
onrendered: function (canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'image.jpg';
a.click();
}
});
});
</script>
Here image generated is not having good resolution.
Is there any other way to generate image with good resolution?
Can php function be used for doing this task?

Here is a simple way to do this.
<div id="my-node">
You will get a image downloaded.
</div>
<button id="foo">download img</button>
<script>
var node = document.getElementById('my-node');
var btn = document.getElementById('foo');
btn.onclick = function() {
node.innerHTML = "I'm an image now."
domtoimage.toBlob(document.getElementById('my-node'))
.then(function(blob) {
window.saveAs(blob, 'my-node.png');
});
}
</script>
Here is a demo: this JSFiddle.
In this fiddle, two libraries are used:
dom-to-image: https://github.com/tsayen/dom-to-image
FileSaver.js: https://github.com/eligrey/FileSaver.js/
First one is used to turn dom into image, second one is used to download the image.
Update:
If you want to get a img of base64 instead of just downloading img as the blob format. You can do as below:
domToImage
.toBlob(document.getElementById("my-node"))
.then(function(blob) {
saveBlobAsFile(blob, "XX.png");
});
// this function is to convert blob to base64 img
function saveBlobAsFile(blob, fileName) {
var reader = new FileReader();
reader.onloadend = function() {
var base64 = reader.result;
var img = document.createElement("img");
img.classList.add("me-img");
img.setAttribute("src", base64);
// insert the img to dom
document.getElementById("bar").appendChild(img);
};
reader.readAsDataURL(blob);
}
Here FileSaver.js is not needed, we use html5 api FileReader to do the trick.

Increase resolution by making more pixels
Resolution kind of equals pixel density. If you want greater resolution then one attempt to create more pixels is to create a second canvas with a proportionally larger width & height and then use secondaryContext.scale & secondaryContext.drawImage(mainCanvas,0,0) to enlarge & draw the main canvas content onto the second canvas. Use this larger canvas, for example, on a printer.
Here's an example that increases the pixel density at the cost of some clarity. You don't state why you desire more resolution, but this example is useful, for example if you're outputting the image to a printer. Note: The printed page will be clearer than the density-increased image you feed to the printer because the printer prints at higher density (maybe 300dpi printer resolution vs maybe 72/96ppi).
var divX2=document.createElement('canvas');
divAt2X('#download',1.5);
$('#go').on('click',function(){
// save
var a = document.createElement('a');
a.href = divX2.toDataURL("image/png");
a.download = 'image.png';
a.click();
});
function divAt2X(id,upscale){
var w=$(id).width();
var h=$(id).height();
html2canvas($(id),{
onrendered:
function(canvasDiv){
// scale up
ctx=divX2.getContext('2d');
divX2.width=w*upscale;
divX2.height=h*upscale;
ctx.scale(upscale,upscale);
ctx.drawImage(canvasDiv,0,0);
}
}
);
}
#download{
margin:10% 20%;
}
.download-btn{
padding:10px;
font-size:20px;
margin:0 20px;
}
#test{
background:#3399cc;
padding:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://html2canvas.hertzen.com/build/html2canvas.js'></script>
<button id='go'>Download 1.5X</button><span>(IE/Edge don't support download)</span>
<div id="download"><h1 id="test">Testing Download</h1></div>
If you have already dismissed html2Canvas, then your way forward is more difficult because html2Canvas is one (perhaps the only one) tool we have to read html+css and draw them to the canvas element.
Increase resolution with an image manipulation library
You can use the ImageMagick library. In particular, the ImageMagick resize method will change the embedded resolution of a .png image using resampling for better quality.
Use a headless-browser on the server to capture the Div
If you need cross-browser compatibility, then you can use a server-size headless browser like PhantomJS.
The captureJS extension to PhantomJS allows you to specify a target div using standard CSS selectors. CaptureJS lets you specify the viewport size -- effectively letting you increase the pixel density.

One good approach that we've used at work in a production system for 1M+ daily users is to do this completely on the server side - spawn a browser (Chrome); then take a screenshot of it; then stream it to the client. The results are very clear / not pixelated at all - all of the other options turned out quite pixelated.

Convert Canvas to image then download

I am trying to convert a section of my site into a downloadable image.
Firstly I convert the html to a canvas using:
$(function() {
$("#download").click(function() {
html2canvas($("#the-grid"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
$("#saved").append(canvas);
$("#saved canvas").attr('id', 'scan');
}
});
Which works fine the canvas get generated and all look's good.
I then want to turn that into an image which I can use for thumbnails later but also initiate a download of the image.
To do so I complete the function like this.
$(function() {
$("#download").click(function() {
html2canvas($("#the-grid"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
$("#saved").append(canvas);
$("#saved canvas").attr('id', 'scan');
var c=document.getElementById("scan");
var d=c.toDataURL("image/png");
var w=window.open('about:blank','Download Mix');
w.document.write("<img src='"+d+"' alt='Custom Blend'/>");
}
});
But it doesn't work.
The error's I get are totally irrelevant.
I am an experienced developer but I'm pretty new to Jquery so any help would be appreciated.
UPDATE
Got it to work.
Create image like this
$(function () {
$("#download").click(function () {
html2canvas($("#the-grid"), {
onrendered: function (canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
$("#saved").append(canvas);
$("#saved canvas").attr('id', 'scan');
var image = canvas.toDataURL("image/png");
$("#saved").append("<img src='"+image+"' alt='Custom Blend'/>");
}
});
image html ends up looking like
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Custom Blend">

Maybe this can help you :
var image = canvas.toDataURL("image/png"); // build url of the image
window.location.href=image; //activate download
image = "<img src='"+image+"'/>"; // set canvas image as source

Here's how I did this (note, there's no way to download a file in Safari and set the filename without pinging a server):
First, you need to get the canvas as a png: var img = canvas.toDataUrl('image/png');
Then, you'll want to convert that dataURL to a blob. For a good way to do that, see this function.
Now you want to download that blob. This will work in all browsers but Safari:
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, 'image.png');
} else {
var url = window.URL || window.webkitURL;
var objectURL = url.createObjectURL(blob);
var ele = $('<a target="_blank"></a>')
.hide()
.attr('download', 'image.png')
.attr('href', objectURL);
$('body').append(ele);
var clickEvent = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false,
});
ele[0].dispatchEvent(clickEvent);
window.setTimeout(function() {
url.revokeObjectURL(objectURL);
ele.remove();
}, 1000);
}
This creates an invisible link and simulates a click on it. The click() function won't work in Firefox, so you have to create an event and dispatch it by hand. Finally, it does a bit of clean up by removing the invisible link after one second. In IE, it uses the method provided by Microsoft. This will download the image with the filename "image.png". It also has the benefit of being able to download any blob, if you need to be able to do more with your code. Hopefully this helps!