将图片裁剪或调整大小后再上传到服务器作为原始图像二进制数据(png或jpeg格式)。

7
我试图在浏览器中裁剪图像并将它们作为原始图像二进制数据上传到服务器(格式应为“image/jpeg”或“image/png”)。我尝试了许多客户端裁剪和上传方法,它们都使用HTML5函数canvas.toDataURL()以"data:image/png;base64"格式获取最终裁剪数据,将其上传到Web服务器,然后在服务器端将其转换为原始图像二进制数据。
问题是我必须将裁剪数据上传到静态文件服务器,如AWS S3,该服务器无法执行转换代码,除了接受文件上传。因此,我需要将裁剪图像上传为类似于“image/png”的普通图像格式。如果可以做到这一点,我就可以直接在浏览器中裁剪和上传图像到文件服务器(S3),而不需要中间服务器来转换图像数据并传输到文件服务器(S3)。

我编辑了这个问题以使它更加清晰。现在你们明白了吗? - Avoen
这个问题还不清楚吗?你们能指出你们哪里困惑了吗?为什么有人锁定我的问题,却从未检查或解锁它? - Avoen
2个回答

6
你可以尝试 Crop Upload,这是一个基于HTML5的javascript插件,它可以在画布元素中裁剪图像,将画布转换为blob并通过AJAX上传为png或jpeg到服务器。它不需要任何服务器端代码,但它只能在支持HTML 5的浏览器中运行。

编辑:该插件的链接已过期。


谢谢,我会看一下。 - Avoen
真的有效。谢谢。 - Avoen
这个库提供了一个函数调用来实现裁剪和上传图片,非常方便。 - Avoen
裁剪上传的URL已过期,请更新一下,好吗? - Rajdeep Singh
1
@Avoen,你能提供新的URL吗? - Rajdeep Singh

2

看一下Filepicker.io,它提供了一个基于JavaScript的文件选择器,包括裁剪/缩放功能,并支持上传到S3和其他云存储服务,无需服务器端代码。请注意,某些功能需要付费计划。


谢谢。看起来不错,但对我来说太重了。 - Avoen
你可能会找到一些基于Flash的东西,它可以像Pixlr的在线照片编辑器一样工作。 - Brock Amhurst
以下是Pixlr网站上关于如何将他们的在线照片编辑器与您的网站集成的文章链接:https://support.pixlr.com/hc/zh-cn/articles/202846694-Pixlr-API-%E5%B5%8C%E5%85%A5%E5%88%B0%E6%82%A8%E7%9A%84%E7%BD%91%E7%AB%99-%E9%9B%86%E6%88%90-Pixlr-%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8 - Brock Amhurst

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接