javascript - 获取在移动设备上拍摄的照片的引用以调整大小和上传

Question

我们有一个用 js/jquery/HTML5 编写的离线网络应用程序，它使用本地存储以 json 格式存储多 MB 的数据，这些数据在应用程序使用时进行编辑。这些数据最终通过 ajax 上传到我们的服务器。它在 iOS 和 Android 设备上都运行良好。我们现在希望允许用户在他们的数据中重复选择一个项目并拍照，以便稍后与该项目相关联。图片将与数据一起上传到我们的服务器。图片在拍摄或上传时也可以使用 Canvas 元素缩小到 50kb 或更小。对于任何给定的上传，它们可能有一百张或更多张图片。

我们曾计划存储对图片的引用，因为它们将被拍摄以供以后上传使用。我们现在知道，在浏览器中，如果不使用原生应用程序代码或 PhoneGap 等框架，当图片存储在 iOS 相机胶卷或 Android 图库中时，无法存储此类引用或路径。我们可以使用输入控件获取图片的文件名，但如果没有完整路径，那将毫无用处。此外，iOS 设备上的所有图像文件名都是“image.jpg”。我们可以使用数据 URL 访问图片的图像数据，但我们无法可靠地存储它，因为本地存储空间不足以容纳我们的 json 格式数据和可能的数百个数据 URL。

所以问题是，有没有一种方法可以使用 js/jquery/html5(不是 PhoneGap 或 native 应用程序代码)拍照，获取对它的引用以便稍后使用 canvas 元素调整大小，然后通过 Ajax ？

Answer 1

如果您想知道是否有办法在客户端使用 Canvas 调整图像大小以将它们减小到 50kb，那么是的，有。

这是链接:http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html

这是一个DEMO

这里是 CODE

我已经测试过了，真的很好。

PD。我不喜欢这个代码调整图像大小的方式，我用另一种算法改变了它，如果你想要它，请告诉我

现在我正在寻找一种方法来监听移动设备使用相机拍照并上传照片时的事件。因为它们会自动向左旋转 90 级。