浏览器端预上传图像缩放和裁剪可靠性和安全性

时间:2014-03-09 15:48:43

标签: javascript html5 image-processing

我希望为网站用户提供在上传之前裁剪图片的功能。这对于那些不了解图像处理工具的人来说很方便,并且可以大大减少上传时间,因为与用作源的普通数码相机图像相比,上传的图像非常小。

我想使用HTML5文件API,img-Tag,canvas-Element和FormData API来解码,操作和上传图像。

我想知道这是否存在安全性和可靠性问题。加载大图像可能会破坏客户端DOM或JavaScript并使页面或整个浏览器崩溃。什么是JavaScript可以期望处理的最大图像(例如,加载和调整大小)?尽管有JPG和PNG(例如TIFF),浏览器是否识别任何格式?

图像文件中的恶意代码可能以某种方式访问​​JavaScript并滥用用户的会话凭据。这会带来任何实际风险吗?

1 个答案:

答案 0 :(得分:1)

我也有一年的这个问题,所以我决定创建自己的php和jquery脚本,用于客户端和服务器端验证的裁剪和调整大小,这样如果用户使用任何技巧,服务器将选择默认选项而不是客户端:

所以我们如何做到这一点首先我们需要客户端表单进行裁剪和调整大小等等......所以我们需要jquery有一个很好的插件: jquery图像是选择< /强>

然后我们需要检索裁剪的值,以便服务器可以确保用户不是欺骗或垃圾邮件或黑客攻击。

一个优秀的php库是php gd库它应该带有最新的php版本,但你可能需要启用扩展只需在google上搜索,你就会发现如何启用它们。

现在gd库会捕获轴并将其裁剪到 serverside 而不是客户端。客户端只会提供应该裁剪多少的信息,服务器将完成这项工作:)

这是我一年前写的剧本。它有点乱(html和css)。但它应该做的工作。 image cropping and uploading tool php jquery

注意: 您需要启用gd扩展才能完成此项工作,请在本地服务器上进行尝试。启用扩展后,您需要重新启动服务器并运行脚本。它应该是开箱即用的,但告诉我一些事情是否有效或错误:)