Аз съм начинаещ в javascript. Опитвам се да преоразмеря изображения от страна на клиента, преди да ги кача на моя сървър за съхранение. Намерих начин да го направя с помощта на HTML5 Canvas: http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
Моят проблем: Продължава да качва празно изображение. Мисля, че причината за празното изображение е, че платното не е приключило с рисуването, когато хванах изображението от платно. Когато задам 3 секунди windows.timeout преди да взема изображение от платно, всичко работи добре. Има ли по-надежден метод от таймаут? Или има някакъв друг метод за преоразмеряване на изображение от страна на клиента?
Причината, поради която правя преоразмеряване на изображения от страна на клиента, е, че имам работа с хора, които качват ненужни големи файлове и мисля, че е най-ефективно да направя преоразмеряване на изображения от страна на клиента.
Благодаря ви за всякакви съвети/отговори!
//resize image
Resizeimage.resize(file);
//***if i wrap this part with timeout it works
var canvas = document.getElementById('canvas');
var data = canvas.toDataURL(file.type);
// convert base64/URLEncoded data component to raw binary data held in a string
var bytestring;
if (data.split(',')[0].indexOf('base64') >= 0)
bytestring = atob(data.split(',')[1]);
else
bytestring = escape(data.split(',')[1]);
//get imagetype
var mimeString = data.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(bytestring.length);
for (var i = 0; i < bytestring.length; i++) {
ia[i] = bytestring.charCodeAt(i);
}
// create a blob from array
var blob = new Blob([ia], {
type: mimeString
});
//upload files
$scope.upload = $upload.upload({
url: 'articles/imageUpload',
method: 'POST',
file: blob
//update progress bar
}).progress(function(event) {
$scope.uploadInProgress = true;
$scope.uploadProgress = Math.floor(event.loaded / event.total * 100);
//file upload success
}).success(function(data, status, headers, config) {
$scope.uploadInProgress = false;
$scope.uploadedImage = JSON.parse(data);
$scope.isDisabled = false;
//file upload fail
}).error(function(err) {
$scope.uploadInProgress = false;
console.log('Error uploading file: ' + err.message || err);
});
//***
angular.module('articles').factory('Resizeimage', [
function() {
var imgSelectorStr = null;
// Resizeimage service logic
function render(src) {
var image = new Image();
image.onload = function() {
var canvas = document.getElementById('canvas');
//check the greater out of width and height
if (image.height > image.width) {
image.width *= 945 / image.height;
image.height = 945;
} else {
image.height *= 945 / image.width;
image.width = 945;
}
//draw (&resize) image to canvas
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
};
image.src = src;
}
function loadImage(src) {
// Create fileReader and run the result through the render
var reader = new FileReader();
reader.onload = function(e) {
render(e.target.result);
};
reader.readAsDataURL(src);
}
// Public API
return {
resize: function(src) {
loadImage(src);
return true;
}
};
}
]);