IOS6已发布,我一直在测试照片上传。
它的效果很好,但是在3G以上的大图像下,它的速度却很慢。
借助File API和Canvas,可以使用JavaScript调整图像大小。我希望,如果在尝试上传图像之前调整图像的大小,它们将更快地上传- 为快速的用户体验提供帮助。随着智能手机处理器以比网络速度快得多的速度增长,我相信这种解决方案是赢家。
但是,用jQuery的Ajax实现它最困难。感谢您提供任何建议或帮助,因为此代码对于IOS6之后的移动Web应用程序开发可能非常有用。
var fileType = file.type, reader = new FileReader(); reader.onloadend = function () { var image = new Image(); image.src = reader.result; image.onload = function () { //Detect image size var maxWidth = 960, maxHeight = 960, imageWidth = image.width, imageHeight = image.height; if (imageWidth > imageHeight) { if (imageWidth > maxWidth) { imageHeight *= maxWidth / imageWidth; imageWidth = maxWidth; } } else { if (imageHeight > maxHeight) { imageWidth *= maxHeight / imageHeight; imageHeight = maxHeight; } } //Create canvas with new image var canvas = document.createElement('canvas'); canvas.width = imageWidth; canvas.height = imageHeight; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0, imageWidth, imageHeight); // The resized file ready for upload var finalFile = canvas.toDataURL(fileType); if (formdata) { formdata.append("images[]", finalFile); $.ajax({ url: "upload.php", type: "POST", data: formdata, dataType: 'json', processData: false, contentType: false, success: function (res) { //successful image upload } }); } } } reader.readAsDataURL(file);
我刚刚开发了用于客户端 画布 图像大小调整的jQuery插件。它还处理 方向 和 iOS6压缩的图像 问题。
您可以尝试:http : //gokercebeci.com/dev/canvasresize
用法:
$.canvasResize(file, { width : 300, height : 0, crop : false, quality : 80, callback: function(dataURL, width, height){ // your code } });