We Keep Coding

How can I use cropme.js to allow users upload their profile image?

This is a knowledge sharing Q&A.
Cropme is a nice JS add-on for cropping and rotating an image using visual sliders. The author provided good documentation, but building a working implementation is not as simple as it should be.
The question I want to answer is this:
I want to allow my website-users to upload their profile image. That image must be exactly 240x292 pixels. The users should be able zoom and rotate their image, then crop it to that specific size and upload it to my website. How can I do all that with cropme?
These are the requires steps:
Show an empty placeholder for the image we want the user to load.
By clicking the "Get Image" button, the user can select an image from its local files.
The selected file is loaded into memory, and presented for editing using 'cropme'. The user can use visual sliders to rotate and zoom in/out
After clicking "Crop", the user is presented with the cropped image, and can decide to save the image or to cancel.
After clicking "Save", the cropped image is uploaded to a PHP server, the modal window is closed, and the placeholder image is replaced with the link to the just-uploaded image.
So how can we do this?

A fully working demo is presented here:
https://codepen.io/ishahak/pen/XWjVzLr
I will explain some of the details, step by step.
Note: usually in my code when you see obj[0], it is simply a conversion from jQuery object into a simple JS object.
1. Showing a placeholder for the image.
We can create a real SVG image on the fly using this code:
getImagePlaceholder: function(width, height, text) {
//based on https://cloudfour.com/thinks/simple-svg-placeholder/
var svg = '\
<svg xmlns="http://www.w3.org/2000/svg" width="{w}" \
height="{h}" viewBox="0 0 {w} {h}">\
<rect fill="#ddd" width="{w}" height="{h}"/>\
<text fill="rgba(0,0,0,0.5)" font-family="sans-serif"\
font-size="30" dy="10.5" font-weight="bold"\
x="50%" y="50%" text-anchor="middle">{t}</text>\
</svg>';
var cleaned = svg
.replace(/{w}/g, width)
.replace(/{h}/g, height)
.replace('{t}', text)
.replace(/[\t\n\r]/gim, '') // Strip newlines and tabs
.replace(/\s\s+/g, ' ') // Condense multiple spaces
.replace(/'/gim, '\\i'); // Normalize quotes
var encoded = encodeURIComponent(cleaned)
.replace(/\(/g, '%28') // Encode brackets
.replace(/\)/g, '%29');
return 'data:image/svg+xml;charset=UTF-8,' + encoded;
}
2. By clicking the "Get Image" button, the user can select an image from its local files.
This process involves an input element of type "file" which has no visible appearance (we set it with the 'd-none' class), and a button element which 'clicks' it to open a dialog:
<button id="btnGetImage" class="btn btn-primary">Get Image</button>
<input class="d-none" type="file" id="fileUpload" accept="image/*" />
And the relevant code:
$('#btnGetImage').on('click', function(){
//force 'change' event even if repeating same file:
$('#fileUpload').prop("value", "");
$('#fileUpload').click();
});
$('#fileUpload').on('change', function(){
CiM.read_file_from_input(/*input elem*/this, function() {
console.log('image src fully loaded');
$('#imgModal-dialog').modal('show');
});
});
When a file is selected, the 'change' event is firing, leading us to read the file into memory.
3. The selected file is loaded into memory, and presented for editing using 'cropme'. The user can use visual sliders to rotate and zoom in/out
Our read_file_from_input mentioned above is implemented like this:
imgHolder: null,
imgHolderCallback: null,
read_file_from_input: function(input, callback) {
if (input.files && input.files[0]) {
imgHolderCallback = callback;
var reader = new FileReader();
if (!CiM.imgHolder) {
CiM.imgHolder = new Image();
CiM.imgHolder.onload = function () {
if (imgHolderCallback) {
imgHolderCallback();
}
}
}
reader.onload = function (e) {
console.log('image data loaded!');
CiM.imgHolder.src = e.target.result; //listen to img:load...
}
reader.readAsDataURL(input.files[0]);
}
else {
console.warn('failed to read file');
}
}
When the FileReader is ready, we set the src for our internal image holder, and wait for the 'load' event, which signals that the img element is ready with the new content.
We listen to that 'load' event, and when triggered we show the modal. A modal in Bootstrap has several events. We listen to the one which signals that the modal is shown, meaning that the width and set and we can plan our Cropme dimensions based on it.
update_options_for_width: function(w) {
var o = CiM.opt, //shortcut
vp_ratio = o.my_final_size.w / o.my_final_size.h,
h, new_vp_w, new_vp_h;
w = Math.floor(w * 0.9);
h = Math.floor(w / o.my_win_ratio);
o.container.width = w;
o.container.height = h;
new_vp_h = 0.6 * h;
new_vp_w = new_vp_h * vp_ratio;
// if we adapted to the height, but it's too wide:
if (new_vp_w > 0.6 * w) {
new_vp_w = 0.6 * w;
new_vp_h = new_vp_w / vp_ratio;
}
new_vp_w = Math.floor(new_vp_w);
new_vp_h = Math.floor(new_vp_h);
o.viewport.height = new_vp_h;
o.viewport.width = new_vp_w;
}
We wait for the size of the modal to be set because cropme must be set with specific viewport dimensions. At the end of our shown.bs.modal handler, we create our Cropme instance.
4. After clicking "Crop", the user is presented with the cropped image, and can decide to save the image or to cancel.
Here is the save-button handler:
$('#imgModal-btnSave').on('click', function(){
uploadImage(croppedImg[0], function(path_to_saved) {
savedImg[0].src = path_to_saved;
$('#imgModal-dialog').modal('hide');
});
});
The uploadImage function goes like this:
uploadImage: function(img, callback){
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
// Make sure canvas is as big as the picture (needed??)
imgCanvas.width = img.width;
imgCanvas.height = img.height;
// Draw image into canvas element
imgContext.drawImage(img, 0, 0, img.width, img.height);
var dataURL = imgCanvas.toDataURL();
$.ajax({
type: "POST",
url: "save-img.php", // see code at the bottom
data: {
imgBase64: dataURL
}
}).done(function(resp) {
if (resp.startsWith('nok')) {
console.warn('got save error:', resp);
} else {
if (callback) callback(resp);
}
});
}
It is matched with a simple PHP script which appears at the end of the HTML in the codepen. I think this answer went too long, so I'll finish here.
Good luck - have fun :)

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;
}

control image width and height when upload image

Straight to point. I want to set the limit of the width and height of the image when user upload an image using plupload.
Letsay:
if
width: 1000px
height: 1000px
else
you must upload image with at least width:1000px and height:1000px
// $(".form").validator();
$(function() {
if($("#uploader").length > 0) {
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight',
browse_button : 'pickfile',
container : 'uploader',
max_file_size : '10mb',
url : 'design.php?do=upload&ajax=1',
multiple_queues: false,
file_data_name: 'design',
flash_swf_url : www + '/js/plupload.flash.swf',
silverlight_xap_url : www + '/js/plupload.silverlight.xap',
filters : [
{title : "Image files", extensions : "jpg,gif,png,jpeg,bmp"}
]
});
$('#uploadfiles').click(function(e) {
if($("#uploader select[name=category]").val() == "") {
$("#uploader select[name=category]").next('.error-required').show();
return false;
}
uploader.start();
e.preventDefault();
});
uploader.init();
So, is this possible?

You can easily write a filter for plupload.
Here is filter for min required width.
Add bellow code to your script. (Just copy)
plupload.addFileFilter('min_width', function(maxwidth, file, cb) {
var self = this, img = new o.Image();
function finalize(result) {
// cleanup
img.destroy();
img = null;
// if rule has been violated in one way or another, trigger an error
if (!result) {
self.trigger('Error', {
code : plupload.IMAGE_DIMENSIONS_ERROR,
message : "Image width should be more than " + maxwidth + " pixels.",
file : file
});
}
cb(result);
}
img.onload = function() {
// check if resolution cap is not exceeded
finalize(img.width >= maxwidth);
};
img.onerror = function() {
finalize(false);
};
img.load(file.getSource());
});
And add this filter to your upload script.
filters : {
min_width: 700,
},

Plupload doesn't support this itself (although it has been requested). There are probably a couple of reasons for this, firstly because you just can't get the image dimensions before upload in IE (you can in some other browsers) and secondly, whilst that would work for some browsers using the using the HTML4/5 methods, I am not sure that the Flash/Silverlight etc. methods would also be able to reliably determine dimensions.
If you were happy with limited browser, HTML4/5 methods only you should hook into the "FilesAdded" event e.g.
uploader.bind('FilesAdded', function(up, files) {
//Get src of each file, create image, remove from file list if too big
});

I recently wanted to do the same thing, and was able to achieve it the way Thom was suggesting. He was correct on it's limitation though; if you want to add this, it will only work in modern browsers and not in the flash or silverlight runtimes. This is not a huge issue, as my non-html5 users will just get an error after upload, rather than before.
I initialized a total image count variable to keep track of the images placed on the page. Also a vairable to store photos we want to delete after we read them all.
var total_image_count = 0;
var files_to_remove = [];
Then I read the pending files with FileReader(), place them on the page, and get their width
init:{
FilesAdded: function(up, files) {
if (uploader.runtime == "html5"){
files = jQuery("#"+uploader.id+"_html5")[0].files
console.log(files);
for (i in files){
//create image tag for the file we are uploading
jQuery("<img />").attr("id","image-"+total_image_count).appendTo("#upload-container");
reader_arr[total_image_count] = new FileReader();
//create listener to place the data in the newly created
//image tag when FileReader fully loads image.
reader_arr[total_image_count].onload = function(total_image_count) {
return function(e){
var img = $("#image-"+total_image_count);
img.attr('src', e.target.result);
if ($(img)[0].naturalWidth < 1000){
files_to_remove.push(files[i]); //remove them after we finish reading in all the files
//This is where you would append an error to the DOM if you wanted.
console.log("Error. File must be at least 1000px");
}
}
}(total_image_count);
reader_arr[total_image_count].readAsDataURL(files[i]);
total_image_count++;
}
for (i in files_to_remove){
uploader.removeFile(files_to_remove[i]);
}
}
}
}
As a side note, I was wanting to show image thumbnails anyway, so this method works great for me. I have not figured out how to get an image's width without first appending it to the DOM.
Sources:
Thumbnail an image before upload:
https://stackoverflow.com/a/4459419/686440
Accessing image's natural width:
https://stackoverflow.com/a/1093414/686440

to access width and heigth without thumbnail an image you can do this:
uploader.bind('FilesAdded', function(up, files) {
files = jQuery("#"+uploader.id+"_html5").get(0).files;
jQuery.each(files, function(i, file) {
var reader = new FileReader();
reader.onload = (function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
// access image size here using this.width and this.height
}
};
});
reader.readAsDataURL(file);
}
}

Detect when an image fails to load in JavaScript

Is there a way to determine if a image path leads to an actual image, Ie, detect when an image fails to load in JavaScript.
For a web app, I am parsing a xml file and dynamically creating HTML images from a list of image paths. Some image paths may no longer exist on the server so I want to fail gracefully by detecting which images fail to load and deleting that HTML img element.
Note jQuery solutions wont be able to be used(the boss doesn't want to use jQuery, yes I know dont get me started). I know of a way in jQuery to detect when an image is loaded, but not whether it failed.
My code to create img elements but how can I detect if the img path leads to a failed to load image?
var imgObj = new Image(); // document.createElement("img");
imgObj.src = src;

You could try the following code. I can't vouch for browser compatibility though, so you'll have to test that.
function testImage(URL) {
var tester=new Image();
tester.onload=imageFound;
tester.onerror=imageNotFound;
tester.src=URL;
}
function imageFound() {
alert('That image is found and loaded');
}
function imageNotFound() {
alert('That image was not found.');
}
testImage("http://foo.com/bar.jpg");
And my sympathies for the jQuery-resistant boss!

The answer is nice, but it introduces one problem. Whenever you assign onload or onerror directly, it may replace the callback that was assigned earlier. That is why there's a nice method that "registers the specified listener on the EventTarget it's called on" as they say on MDN. You can register as many listeners as you want on the same event.
Let me rewrite the answer a little bit.
function testImage(url) {
var tester = new Image();
tester.addEventListener('load', imageFound);
tester.addEventListener('error', imageNotFound);
tester.src = url;
}
function imageFound() {
alert('That image is found and loaded');
}
function imageNotFound() {
alert('That image was not found.');
}
testImage("http://foo.com/bar.jpg");
Because the external resource loading process is asynchronous, it would be even nicer to use modern JavaScript with promises, such as the following.
function testImage(url) {
// Define the promise
const imgPromise = new Promise(function imgPromise(resolve, reject) {
// Create the image
const imgElement = new Image();
// When image is loaded, resolve the promise
imgElement.addEventListener('load', function imgOnLoad() {
resolve(this);
});
// When there's an error during load, reject the promise
imgElement.addEventListener('error', function imgOnError() {
reject();
})
// Assign URL
imgElement.src = url;
});
return imgPromise;
}
testImage("http://foo.com/bar.jpg").then(
function fulfilled(img) {
console.log('That image is found and loaded', img);
},
function rejected() {
console.log('That image was not found');
}
);

This:
<img onerror="this.src='/images/image.png'" src="...">

/**
* Tests image load.
* #param {String} url
* #returns {Promise}
*/
function testImageUrl(url) {
return new Promise(function(resolve, reject) {
var image = new Image();
image.addEventListener('load', resolve);
image.addEventListener('error', reject);
image.src = url;
});
}
return testImageUrl(imageUrl).then(function imageLoaded(e) {
return imageUrl;
})
.catch(function imageFailed(e) {
return defaultImageUrl;
});

jQuery + CSS for img
With jQuery this is working for me :
$('img').error(function() {
$(this).attr('src', '/no-img.png').addClass('no-img');
});
And I can use this picture everywhere on my website regardless of the size of it with the following CSS3 property :
img.no-img {
object-fit: cover;
object-position: 50% 50%;
}
TIP 1 : use a square image of at least 800 x 800 pixels.
TIP 2 : for use with portrait of people, use object-position: 20% 50%;
CSS only for background-img
For missing background images, I also added the following on each background-image declaration :
background-image: url('path-to-image.png'), url('no-img.png');
NOTE : not working for transparent images.
Apache server side
Another solution is to detect missing image with Apache before to send to browser and remplace it by the default no-img.png content.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

More to the answer of Rafael Martins, if you are using React, use this code:
<img
src="https://example.com/does_not_exist.png"
onError={(e) => {
e.currentTarget.src = "https://example.com/default.png"
}}
/>

Here's a function I wrote for another answer: Javascript Image Url Verify. I don't know if it's exactly what you need, but it uses the various techniques that you would use which include handlers for onload, onerror, onabort and a general timeout.
Because image loading is asynchronous, you call this function with your image and then it calls your callback sometime later with the result.

This is a variation of #emil.c answer but resolves with true/false based on image loading or not (as opposed to throwing an error when it fails):
function testImage(url) {
if (!url || typeof url !== 'string') return Promise.resolve(false);
return new Promise((resolve) => {
const imgElement = new Image();
imgElement.addEventListener('load', () => resolve(true));
imgElement.addEventListener('error', () => resolve(false));
imgElement.src = url;
});
}

just like below:
var img = new Image();
img.src = imgUrl;
if (!img.complete) {
//has picture
}
else //not{
}

Set an Image object as a div background image using javascript

I want to load 4 images from background showing a load bar to the client
and when the images will be downloaded i want to set them as background images to 4 div blocks.
I am looking for something like this.
var myImages = new Array();
for(var i = 0; i < 4; i++)
myImages[i] = new Image();
//load images using the src attribute
//and execute an on load event function where to do something like this.
var div0 = document.getElementById('theDivId');
div0.style.backgroundImage = myImage[index];
Is there any way to set a background image using an Image javascript object?

You can do something close to what you had. You don't set an image background to be an image object, but you can get the .src attribute from the image object and apply that to the backgroundImage. Once the image object has successfully loaded, the image will be cached by the browser so when you set the .src on any other object, the image will load quickly. You could use this type of code:
var imgSrcs = [...]; // array of URLs
var myImages = [], img;
for (var i = 0; i < 4; i++) {
img = new Image();
img.onload = function() {
// decide which object on the page to load this image into
// this part of the code is missing because you haven't explained how you
// want it to work
var div0 = document.getElementById('theDivId');
div0.style.backgroundImage = "url(" + this.src + ")";
};
img.src = imgSrcs[i];
myImages[i] = img;
}
The missing part of this code is deciding which objects on the page to load which image into when the image loads successfully as your example stood, you were just loading each one into the same page object as soon as they all loaded which probably isn't what you want. As I don't really know what you wanted and you didn't specify, I can't fill in that part of the code.
One thing to watch out for when using the .onload event with images is you have to set your .onload handler before you set the .src attribute. If you don't, you may miss the .onload event if the image is already cached (and thus it loads immediately).

This way, the image shows up instantly all in one once it's loaded rather than line by line.
function setBackgroundImage(){
imageIsLoaded(myURL).then(function(value) {
doc.querySelector("body > main").style.backgroundImage = "url(" + myURL + ")";
}
}
function imageIsLoaded(url){
return new Promise(function(resolve, reject){
var img = new Image();
try {
img.addEventListener('load', function() {
resolve (true);
}, false);
img.addEventListener('error', function() {
resolve (false);
}, false);
}
catch(error) {
resolve (false);
}
img.src = url;
});
}