Related
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 :)
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;
}
I'm having an issue while using canvas in a background page to create data URLs for desktop notifications' images.
I want to use the "image" notifications which require a 3:2 ratio to display properly. The images I want to use (from hulu.com) are a different ratio, so I decided to use the canvas element to create the corresponding data URL off of these images so that the ratio is correct. It kind of works in theory, but…
…I'm having issues if I'm creating more than one canvas/notification in the background page. One image is created properly, but the rest comes out empty.
Confusingly, opening the same background page in a new tab (i.e. exact same code) makes everything works just fine: all the notifications are created with the images loaded from hulu.com. Also, just changing the dimensions from 360x240 to 300x200 makes it work. Finally, though they're similar computers with the same Chrome version (34.0.1847.116), it works without modification at work while it doesn't on my own laptop.
I made a test extension available at the bottom of this post. Basically, it only has a generated background page. The code for that page is this:
var images = ["http://ib2.huluim.com/video/60376901?size=290x160&img=1",
"http://ib2.huluim.com/video/60366793?size=290x160&img=1",
"http://ib4.huluim.com/video/60372951?size=290x160&img=1",
"http://ib1.huluim.com/video/60365336?size=290x160&img=1",
"http://ib3.huluim.com/video/60376290?size=290x160&img=1",
"http://ib4.huluim.com/video/60377231?size=290x160&img=1",
"http://ib4.huluim.com/video/60312203?size=290x160&img=1",
"http://ib1.huluim.com/video/60376972?size=290x160&img=1",
"http://ib4.huluim.com/video/60376971?size=290x160&img=1",
"http://ib1.huluim.com/video/60376616?size=290x160&img=1"];
for (var i = 0; i < 10; i++) {
getDataURL(i);
}
/*
* Gets the data URL for an image URL
*/
function getDataURL(i) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = 360;
canvas.height = 240;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
var dataURL = canvas.toDataURL('image/png');
chrome.notifications.create('', {
type: 'image',
iconUrl: 'logo_128x128.png',
title: String(i),
message: 'message',
imageUrl: dataURL
}, function(id) {});
}
//img.src = chrome.extension.getURL('logo_128x128.png');;
img.src = images[i];
}
The commented out line for img.src = ... is a test where it loads a local file instead of a remote one. In that case, all the images are created.
The red rectangle added to the canvas is to show that it's not just the remote image that is an issue: the whole resulting canvas is empty, without any red rectangle.
If you download and add the test extension below, you should get 10 notifications but only one with an image.
Then, to open the background page in a new tab, you can inspect the background page, type this in the console:
chrome.extension.getURL('_generated_background_page.html')
and right-click the URL, and click "Open in a new Tab" (or window). Once open you should get 10 notifications that look fine.
Any idea of what is going on? I haven't been able to find any kind of limitations for background pages relevant to that. Any help would be appreciated, because this has been driving me crazy!
Files available here: https://www.dropbox.com/s/ejbh6wq0qixb7a8/canvastest.zip
edit: based on #GameAlchemist's comment, I also tried the following: same getDataURL method, but the loop wrapped inside an onload for the logo:
function loop() {
for (var i = 0; i < 10; i++) {
getDataURL(i);
}
}
var logo = new Image();
logo.onload = function () {
loop();
}
logo.src = chrome.extension.getURL('logo_128x128.png');
Remember that the create() method is asynchronous and you should use a callback with. The callback can invoke next image fetching.
I would suggest doing this in two steps:
Load all the images first
Process the image queue
The reason is that you can utilize the asynchronous image loading better this way instead of chaining the callbacks which would force you to load one and one image.
For example:
Image loader
var urls = ["http://ib2.huluim.com/video/60376901?size=290x160&img=1",
"http://ib2.huluim.com/video/60366793?size=290x160&img=1",
"http://ib4.huluim.com/video/60372951?size=290x160&img=1",
"http://ib1.huluim.com/video/60365336?size=290x160&img=1",
"http://ib3.huluim.com/video/60376290?size=290x160&img=1",
"http://ib4.huluim.com/video/60377231?size=290x160&img=1",
"http://ib4.huluim.com/video/60312203?size=290x160&img=1",
"http://ib1.huluim.com/video/60376972?size=290x160&img=1",
"http://ib4.huluim.com/video/60376971?size=290x160&img=1",
"http://ib1.huluim.com/video/60376616?size=290x160&img=1"];
var images = [], // store image objects
count = urls.length; // for loader
for (var i = 0; i < urls.length; i++) {
var img = new Image; // create image
img.onload = loader; // share loader handler
img.src = urls[i]; // start loading
images.push(img); // push image object in array
}
function loader() {
count--;
if (count === 0) process(); // all loaded, start processing
}
//TODO need error handling here as well
Fiddle with concept code for loader
Processing
Now the processing can be isolated from the loading:
function process() {
// share a single canvas (use clearRect() later if needed)
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
current = 0;
canvas.width = 360;
canvas.height = 240;
createImage(); // invoke processing for first image
function createImage() {
ctx.drawImage(images[current], 0, 0); // draw current image
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
chrome.notifications.create('', {
type : 'image',
iconUrl : 'logo_128x128.png',
title : String(i),
message : 'message',
imageUrl: canvas.toDataURL() // png is default
},
function(id) { // use callback
current++; // next in queue
if (current < images.length) {
createImage(); // call again if more images
}
else {
done(); // we're done -> continue to done()
}
});
}
}
Disclaimer: I don't have a test environment to test Chrome extensions so typos/errors may be present.
Hope this helps!
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);
}
}
I've read about various kinds of ways getting image dimensions once an image has fully loaded, but would it be possible to get the dimensions of any image once it just started to load?
I haven't found much about this by searching (which makes me believe it's not possible), but the fact that a browser (in my case Firefox) shows the dimensions of any image I open up in a new tab right in the title after it just started loading the image gives me hope that there actually is a way and I just missed the right keywords to find it.
You are right that one can get image dimensions before it's fully loaded.
Here's a solution (demo):
var img = document.createElement('img');
img.src = 'some-image.jpg';
var poll = setInterval(function () {
if (img.naturalWidth) {
clearInterval(poll);
console.log(img.naturalWidth, img.naturalHeight);
}
}, 10);
img.onload = function () { console.log('Fully loaded'); }
The following code returns width/height as soon as it's available. For testing change abc123 in image source to any random string to prevent caching.
There is a JSFiddle Demo as well.
<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">
<script>
getImageSize($('#image'), function(width, height) {
$('#info').text(width + ',' + height);
});
function getImageSize(img, callback) {
var $img = $(img);
var wait = setInterval(function() {
var w = $img[0].naturalWidth,
h = $img[0].naturalHeight;
if (w && h) {
clearInterval(wait);
callback.apply(this, [w, h]);
}
}, 30);
}
</script>
One way is to use the HEAD request, which asks for HTTP Header of the response only. I know in HEAD responses, the size of the body is included. But I don't know if there anything available for size of images.