我们有一个用js / jquery / HTML5编写的离线Web应用程序,它使用本地存储以json格式存储多个MB数据,并在应用程序使用时进行编辑。这些数据最终通过ajax上传到我们的服务器。它在iOS和Android设备上都能很好地工作。我们现在希望允许用户重复选择其数据中的项目并拍照以便稍后与该项目相关联。图片将与数据一起上传到我们的服务器。使用画布元素时,图片也可以减少到50kb或更小,无论是在他们拍摄时还是在他们上传时。对于任何给定的上传,他们可能会有一百张或更多的图片。
我们原计划存储对照片的引用,以便以后用于上传。我们现在知道,在浏览器中,不使用本机应用程序代码或框架(如PhoneGap),当图片存储在iOS相机胶卷或Android图库中时,无法存储此类参考或路径。我们可以通过使用输入控件来获取图片的文件名,但如果没有完整路径则没有用。此外,iOS设备上的所有图像文件名都是" image.jpg"。我们可以访问图片'使用数据网址的图片数据,但我们无法可靠地存储它,因为有'我们的json格式数据和可能有数百个数据URL的本地存储空间不足。
所以问题是,是否有一种方法可以使用js / jquery / html5(不是PhoneGap或本机应用程序代码)拍照,获取对它的引用,以便稍后使用canvas元素调整大小,然后通过AJAX吗
答案 0 :(得分:0)
如果你想知道是否有办法在客户端使用画布调整图像大小以将它们减少到50kb,那么是的,有。
以下是链接:http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html
这是DEMO
这是CODE
我测试了它,它确实很好。
PD。我不喜欢这个CODE如何调整图像大小,我使用其他算法更改了它,如果你想要它,请告诉我
现在我正在寻找一种方法来监听事件,当移动设备使用相机拍照并上传时。因为它们会自动旋转到90级。