javascript - 如何使用 Javascript 或 HTML 将裁剪后的图像作为新图像？

Question

在我的 Phonegap 应用程序中，当用户从图库中选择图像时，应允许用户裁剪图像，然后在单击提交按钮后，裁剪后的图像应转换为 .png 或 .jpeg 格式，以便我可以发送将此图像发送到服务器。我如何使用 JavaScript 或 jquery 或 HTML5 来做到这一点。我寻找解决方案，但没有任何效果。请帮我。

Answer 1

您可以使用 HTML5 Canvas 裁剪图像。

参见this tutorial欲了解更多信息:

To crop an image using HTML5 Canvas, we can add six additional arguments to the drawImage() method; sourceX, sourceY, sourceWidth, sourceHeight, destWidth and destHeight. These arguments define the location and size of a rectangle that we want to cut out of an image.

<script>
  context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);
</script>

更新:

为了以可以发送到服务器的格式获取裁剪后的图像，您可以使用 canvas.toDataURL方法。 (请注意，只有当您的文档实际在 IE9 中运行时，IE9才支持此功能 document mode )。