在上传到服务器之前使用 JavaScript 调整客户端的图像大小

Question

我正在寻找一种使用 JavaScript 调整图像客户端大小的方法（真正调整大小，而不仅仅是更改宽度和高度）。
我知道可以在 Flash 中做到这一点，但如果可能的话我想避免它。

网络上有开源算法吗？

Answer 1

这是执行此操作的要点：
https://gist.github.com/dcollien/312bce1270a5f511bf4a

（一个 es6 版本，以及一个 .js 版本，可以是包含在脚本标签中）

您可以按如下方式使用它：

<input type="file" id="select">
<img id="preview">
<script>
document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};
</script>

它包括一堆支持检测和填充，以确保它可以在我可以管理的尽可能多的浏览器上运行。

（它也会忽略 gif 图像 - 如果它们是动画的）

Answer 2

答案是肯定的 - 在 HTML 5 中，您可以使用 canvas 元素在客户端调整图像大小。您还可以获取新数据并将其发送到服务器。请参阅本教程：

http://hacks.mozilla.org/2011 /01/如何开发-html5-image-uploader/

Answer 3

如果您在上传之前调整了大小，我刚刚发现了这个 http://www.plupload.com/

它确实以任何可以想象的方式为您提供所有魔力。

不幸的是，HTML5 调整大小仅受 Mozilla 浏览器支持，但您可以将其他浏览器重定向到 Flash 和 Silverlight。

我刚刚尝试了一下，它可以在我的 Android 上运行！

我在Flash中使用http://swfupload.org/，它做得很好，但是调整大小非常小。 （不记得限制）并且当flash不可用时不会返回到html4。

Answer 4

http://nodeca.github.io/pica/demo/

在现代浏览器中，您可以使用画布加载/保存图像数据。但是，如果您在客户端上调整图像大小，则应该记住以下几点：

1. 每个通道只有 8 位（jpeg 可以具有更好的动态范围，大约 12 位）。如果您不上传专业照片，那应该不是问题。
2. 请注意调整大小算法。大多数客户端调整器都使用琐碎的数学，结果比想象的更糟糕。
3. 您可能需要锐化缩小的图像。
4. 如果您希望重复使用原始元数据（exif 和其他），请不要忘记删除颜色配置文件信息。因为它是在您将图像加载到画布时应用的。

Answer 5

也许使用canvas标签（尽管它不可​​移植）。有一个关于如何使用画布旋转图像的博客 这里，我想如果你可以旋转它，你就可以调整它的大小。也许这可以作为一个起点。

另请参阅此库。

Answer 6

在将图像上传到服务器之前，您可以使用 javascript 图像处理框架进行客户端图像处理。

下面我使用 MarvinJ 根据下页中的示例创建可运行的代码：
“在将图像上传到服务器之前在客户端处理图像”

基本上我使用方法 Marvin.scale(...) 调整图像大小。然后，我将图像作为 blob 上传（使用方法 image.toBlob()）。服务器回复并提供接收到的图像的 URL。

/***********************************************
 * GLOBAL VARS
 **********************************************/
var image = new MarvinImage();

/***********************************************
 * FILE CHOOSER AND UPLOAD
 **********************************************/
 $('#fileUpload').change(function (event) {
	form = new FormData();
	form.append('name', event.target.files[0].name);
	
	reader = new FileReader();
	reader.readAsDataURL(event.target.files[0]);
	
	reader.onload = function(){
		image.load(reader.result, imageLoaded);
	};
	
});

function resizeAndSendToServer(){
  $("#divServerResponse").html("uploading...");
	$.ajax({
		method: 'POST',
		url: 'https://www.marvinj.org/backoffice/imageUpload.php',
		data: form,
		enctype: 'multipart/form-data',
		contentType: false,
		processData: false,
		
	   
		success: function (resp) {
       $("#divServerResponse").html("SERVER RESPONSE (NEW IMAGE):<br/><img src='"+resp+"' style='max-width:400px'></img>");
		},
		error: function (data) {
			console.log("error:"+error);
			console.log(data);
		},
		
	});
};

/***********************************************
 * IMAGE MANIPULATION
 **********************************************/
function imageLoaded(){
  Marvin.scale(image.clone(), image, 120);
  form.append("blob", image.toBlob());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<form id="form" action='/backoffice/imageUpload.php' style='margin:auto;' method='post' enctype='multipart/form-data'>
				<input type='file' id='fileUpload' class='upload' name='userfile'/>
</form><br/>
<button type="button" onclick="resizeAndSendToServer()">Resize and Send to Server</button><br/><br/>
<div id="divServerResponse">
</div>

Answer 7

根据我的经验，此示例是上传调整大小的图片的最佳解决方案： https: //zocada.com/compress-resize-images-javascript-browser/

它使用 HTML5 Canvas 功能。

代码就像这样“简单”：

compress(e) {
    const fileName = e.target.files[0].name;
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = event => {
        const img = new Image();
        img.src = event.target.result;
        img.onload = () => {
                const elem = document.createElement('canvas');
                const width = Math.min(800, img.width);
                const scaleFactor = width / img.width;
                elem.width = width;
                elem.height = img.height * scaleFactor;

                const ctx = elem.getContext('2d');
                // img.width and img.height will contain the original dimensions
                ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);
                ctx.canvas.toBlob((blob) => {
                    const file = new File([blob], fileName, {
                        type: 'image/jpeg',
                        lastModified: Date.now()
                    });
                }, 'image/jpeg', 1);
            },
            reader.onerror = error => console.log(error);
    };
}

这个解决方案有两个缺点。

第一个与图像旋转有关，由于忽略了 EXIF 数据。我无法解决这个问题，并且在我的用例中并不那么重要，但很高兴听到任何反馈。

第二个缺点是缺乏对 IE/Edge 的支持（尽管不是基于 Chrome 的版本），我不会在这上面花任何时间。

Answer 8

是的，对于现代浏览器来说这是完全可行的。甚至可以将文件专门作为二进制文件上传，并进行任意数量的画布更改。

http://jsfiddle.net/bo40drmv/

（此答案是对已接受答案的改进此处）

保留请记住，要在 PHP 中处理结果提交，类似于：

//File destination
$destination = "/folder/cropped_image.png";
//Get uploaded image file it's temporary name
$image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0];
//Move temporary file to final destination
move_uploaded_file($image_tmp_name, $destination);

如果有人担心 Vitaly 的观点，您可以尝试在工作 jfiddle 上进行一些裁剪和调整大小。