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

我正在寻找一种方法来使用JavaScript调整客户端图像的大小(实际上调整大小,而不仅仅是更改宽度和高度).
我知道可以在Flash中完成它但我想尽可能避免它.

网上某处有开源算法吗？

1> 小智..：

---

这是一个要点:https: //gist.github.com/dcollien/312bce1270a5f511bf4a

(es6版本和.js版本,可以包含在脚本标记中)

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

它包括一堆支持检测和polyfill,以确保它可以在尽可能多的浏览器上运行.

(它也忽略了gif图像 - 如果它们是动画的)

---

嗯..我在这方面取得了很大的成功,但我发现我的图像(除了被调整大小)也遭受了巨大的质量损失(以严重的像素化形式),尽管它以正确的分辨率输出.

---

对于任何质量损失(重新采样)的人,更新画布上下文以将`imageSmoothingEnabled`设置为true`并将`imageSmoothingQuality`设置为`high`.在blockcript中,块看起来像:`const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; (ctx as any).imageSmoothingQuality ='high'; ctx.drawImage(image,0,0,width,height);`

---

我觉得你没有得到足够的赞誉 - 我认为这很有效,而且非常简单.感谢分享!

2> 小智..：

---

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

http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

---

这是一个**链接答案**,因此应该是一个评论.

3> 小智..：

---

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

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

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

我刚尝试过,它与我的机器人一起工作!

我在flash 中使用http://swfupload.org/,它可以很好地完成工作,但调整大小非常小.(不记得限制)并且当flash不可用时不会返回到html4.

---

当用户尝试上传仅将存储为更小的照片的10mb照片时,进行客户端调整大小是很好的.它会以这种方式上传得更快.

4> Vitaly..：

---

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

在现代浏览器中,您可以使用画布来加载/保存图像数据.但是如果你在客户端调整图像大小,你应该记住几件事:

每个通道只有8位(jpeg可以有更好的动态范围,大约12位).如果你没有上传专业照片,那应该不是问题.

关于调整大小算法要小心.大多数客户端调整器使用琐碎的数学,结果比实际情况更糟.

您可能需要锐化缩小的图像.

如果您希望重用原始元数据(exif和其他),请不要忘记删除颜色配置文件信息.因为它是在将图像加载到画布时应用的.

5> David V...：

---

也许使用canvas标签(尽管它不可​​移植).有一个关于如何在这里用画布旋转图像的博客,我想如果你可以旋转它,你可以调整它的大小.也许它可以成为一个起点.

见有也.

---

非常有用的例子。您可能想在答案中添加一两个片段，以防这些链接中断。