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);
}
}
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 :)
I'm trying to load an image from an external URL. The image is retrieved dynamically from a database and is therefore not a direct path. An example of such URL is: http://192.192.168.12:8080/api/imageServer?file=imageName.jpeg. The response in an actual jpeg image; when I add the URL to an image tag or directly in the browser the image is shown. When I try to load the image into Fabric.js I only get the console message "Error loading " without any other message.
This is part of our code:
var updateCanvas = function () {
self.canvas.clear();
if (self.selectedImage() && self.canvas) {
try {
fabric.Image.fromURL(self.selectedImage().imageUrl, function (oImg) {
if (oImg._element == null) {
stickyToast(translations().Error, translations().img_bind_error, "error");
return;
}
self.canvas.clear();
var canvasHeight = 500;
var ratio = canvasHeight / oImg.height;
var canvasWidth = oImg.width * ratio;
//Define all filters that will be used on image
oImg.filters[0] = new fabric.Image.filters.Brightness({
brightness: 0
});
...
I've tried upgrading to the latest version of fabric.js but to no avail. Is there another method I need to use download the image?
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 am having a jQuery script that loads 15 images and their hover versions (the hover versions are used when... hovering, not when the page loads). In both Chrome and Firefox in the Network tab, i see this :
images/img1.png
images_hover/img1.png
This must mean the hover images are preloaded correctly, but... when i actually hover and those images are used, they are being loaded again. Here is the preload code :
var prel = new Image();
prel.src = "http://hdodov.byethost15.com/color-game/graphics/parts_hover/" + id + ".png";
I tried using the whole path - http://hdodov.byethost15.com/color-game/graphics/parts_hover/ and the short path too (where the root and the script is) - graphics/parts_hover/. It made no difference.
Could this be caused because my images have the same name? They are in different directories though.
For the next question, you really should paste more code, which makes it easier to help you. I checked your URL you provided, but for other people that might have the same problem, it will be hard to understand what went wrong...
OK, as I said, you are always requesting he images again on hover state...
This worked for me:
var context = new Array(15),
canvas = new Array(15),
canvasNum = -1,
hElem,
hElemPrev,
mousePos = {x:-1, y:-1},
images = [], //<-- Store preloaded images here
imagesHover = []; //<-- Store preloaded images here
... then save them on building like this:
function drawMenuItems(id, width, height){
var canNumHolder, createCanvas;
$('#canvas_holder').append($('<canvas></canvas>')
.attr({
width:width,
height:height,
id:id
})
);
canvasNum++;
canvas[canvasNum] = document.getElementById(id);
context[canvasNum] = canvas[canvasNum].getContext('2d');
canNumHolder = canvasNum;
images[id].crossOrigin = 'Anonymous';
images[id].onload = function(){
context[canNumHolder].drawImage(images[id],0,0);
};
images[id].src = 'graphics/parts/' + id + '.png';
//Hover states
imagesHover[id] = new Image();
imagesHover[id].src = "graphics/parts_hover/" + id + ".png";
}
... give just the id...
function hoverStateChange() {
//....rest of the code
if(hElem >= 0){
drawImageOnCanvas(
canvas[hElem],
context[hElem],
"hover", //pass somethink to checke what you want to do
$(canvas[hElem]).attr('id')
);
//....rest of the code
//change to normal texture
if(hElemPrev >= 0){
drawImageOnCanvas(
canvas[hElemPrev],
context[hElemPrev],
"", //pass empty for other state
$(canvas[hElemPrev]).attr('id')
);
$(canvas[hElemPrev]).removeClass('active');
$('#text_holder').removeClass('a' + hElemPrev);
}
.. and finally
function drawImageOnCanvas(canv, contxt, state, src){
contxt.clearRect(0,0,400,400);
if(state == "hover"){
contxt.drawImage(imagesHover[src],0,0);
}else {
contxt.drawImage(images[src],0,0);
}
}
Like this, you chache you images and not calling them again and again...
I hope it helps.
Yuo can preload images with css like this:-
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
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;
});
}