IOS6和Safari照片上传 - 文件API +帆布+ jQuery的Ajax的上传和调整文件异步 [英] IOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously
问题描述
IOS6已被释放，我一直在测试的照片上传。
它运作良好，但在3G较大的图像它是缓慢的预期。
由于文件API和Canvas，就可以调整使用JavaScript的图像。我希望，如果我调整影像之前，我试图上载他们，他们将上传速度更快 - 贷款本身迅速的用户体验。随着智能手机的处理器成倍提高比网络速度更快，我相信这个解决方案是一个胜利者。
萨科提供了图像大小调整的最佳解决方案：
图片上传前调整
不过，我有jQuery的阿贾克斯实现它最困难的时候。任何建议或帮助是AP preciated，因为这code将可能是移动Web应用程序开发后IOS6非常有用的。
VAR的fileType = file.type，
读者=新的FileReader（）;
reader.onloadend =功能（）{
VAR形象=新的图像（）;
image.src = reader.result;
image.onload =功能（）{
//检测图像的大小
VAR =了maxWidth 960，
=了maxHeight 960，
ImageWidth等= image.width，
imageHeight = image.height;
如果（ImageWidth等＆GT; imageHeight）{
如果（ImageWidth等＆GT;了maxWidth）{
imageHeight * =了maxWidth / ImageWidth等;
ImageWidth等=了maxWidth;
}
} 其他 {
如果（imageHeight＆GT;了maxHeight）{
ImageWidth等* =了maxHeight / imageHeight;
imageHeight =了maxHeight;
}
}
//创建帆布新形象
VAR帆布= document.createElement方法（'画布'）;
canvas.width = ImageWidth等;
canvas.height = imageHeight;
VAR CTX = canvas.getContext（2D）;
ctx.drawImage（此，0，0，ImageWidth等，imageHeight）;
//调整大小后的文件准备上传
VAR finalFile = canvas.toDataURL（的fileType）;
如果（FORMDATA）{
formdata.append（图像[]，finalFile）;
$阿贾克斯（{
网址：upload.php的，
键入：POST，
数据：FORMDATA，
数据类型：JSON，
过程数据：假的，
的contentType：假的，
成功：函数（RES）{
//成功的图片上传
}
}）;
}
}
}
reader.readAsDataURL（文件）;
我刚刚开发的jQuery插件客户端画布图片大小调整。 它也处理的定向和 iOS6压扁的图片的问题。
您可以试试： http://gokercebeci.com/dev/canvasresize
用法：
$。canvasResize（文件，{
宽度：300，
高度：0，
作物：假的，
品质：80，
回调：功能（dataURL，宽度，高度）{
//你的code
}
}）;
IOS6 has been released and I've been testing photo uploading.
It works well, but with larger images over 3G it is SLOW as expected.
Thanks to File API and Canvas, it is possible to resize images using JavaScript. I hope that if I resize the images before I attempt to upload them, they will upload faster - lending itself to a speedy user experience. With smartphone processors improving exponentially faster than the network speeds, I believe this solution is a winner.
Nicolas has offered an excellent solution for image resizing:
However, I am having the hardest time implementing it with jQuery's Ajax. Any advice or help is appreciated, as this code will probably be extremely useful for mobile web application development post-IOS6.
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);
I've just developed a jQuery plugin for client side canvas image resizing. It also handles orientation and the iOS6 squashed image issue.
You can try: http://gokercebeci.com/dev/canvasresize
Usage:
$.canvasResize(file, {
width : 300,
height : 0,
crop : false,
quality : 80,
callback: function(dataURL, width, height){
// your code
}
});
这篇关于IOS6和Safari照片上传 - 文件API +帆布+ jQuery的Ajax的上传和调整文件异步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
