Here's a noodle scratcher.
Bearing in mind we have HTML5 local storage and xhr v2 and what not. I was wondering if anyone could find a working example or even just give me a yes or no for this question:
是否可以使用新的本地存储(或其他)预先调整图像大小,以便没有关于调整图像大小的线索的用户可以将他们的10mb图像拖到我的网站中,然后使用新的本地存储调整大小 . 然后以较小的尺寸上传它 .
我完全知道你可以用Flash,Java小程序,活动X来做...问题是你是否可以使用Javascript Html5 .
期待对此的回应 .
Ta现在 .
10 回答
接受的答案很有效,但调整大小逻辑忽略了图像大于仅一个轴中的最大值的情况(例如,高度> maxHeight但宽度<= maxWidth) .
我认为以下代码以更直接和功能性的方式处理所有情况(如果使用普通的javascript,则忽略typescript类型注释):
是的,使用File API,然后您可以使用canvas element处理图像 .
This Mozilla Hacks blog post引导您完成大部分过程 . 这里参考的是博客文章中汇编的源代码:
几年前我解决了这个问题并将我的解决方案上传到github为https://github.com/rossturner/HTML5-ImageUploader
robertc的回答使用了Mozilla Hacks blog post中提出的解决方案,但是我发现当调整到不是2:1(或其倍数)的比例时,这给出了非常差的图像质量 . 我开始尝试不同的图像大小调整算法,虽然大多数最终都很慢,或者质量也不高 .
最后,我提出了一个解决方案,我相信它可以快速执行并且具有相当不错的性能 - 因为Mozilla从1个画布复制到另一个画布的解决方案很快就可以在不损失图像质量的情况下以2:1的比例运行,给定x的目标像素宽和y像素高,我使用此画布调整大小的方法,直到图像介于x和2 x之间,y和2 y . 在这一点上,我然后转向算法图像大小调整大小调整大小到目标大小的最终"step" . 在尝试了几种不同的算法之后,我决定采用不再在线的博客进行双线性插值,但是accessible via the Internet Archive,这给出了很好的结果,这里是适用的代码:
这会将图像缩小到
config.maxWidth
的宽度,从而保持原始高宽比 . 在开发时,除了主要的桌面浏览器(IE9,Firefox,Chrome)之外,它还可以在iPad / iPhone Safari上运行,因此我预计它将保持兼容,因为今天更广泛地使用HTML5 . 请注意,canvas.toDataURL()调用采用mime类型和图像质量,这将允许您控制质量和输出文件格式(如果您愿意,可能与输入不同) .唯一的一点就是没有相机取景器 . 如果这是一个问题,this blog post有一个很好的指南和代码示例如何实现这一点,我相信我可以将其集成到上面的代码中 .
以上更正:
修改answer by Justin对我有用:
添加了img.onload
用一个真实的例子扩展POST请求
如果您不想重新发明轮子,可以尝试plupload.com
这不行 . 在PHP方面,你不能用这个保存文件 .
请改用此代码:
调整画布元素中的图像大小通常是个坏主意,因为它使用最便宜的盒子插值 . 产生的图像明显降低质量 . 我建议使用http://nodeca.github.io/pica/demo/来代替Lanczos转换 . 上面的演示页面显示了canvas和Lanczos方法之间的区别 .
它还使用Web worker并行调整图像大小 . 还有WEBGL实现 .
有一些在线图像缩放器使用异食癖来完成这项工作,例如https://myimageresizer.com
打字稿
如果要在上传功能之前使用简单且简单的上传管理器并调整大小,则可以使用dropzone.js .
它具有内置调整大小功能,但您可以根据需要提供自己的功能 .