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

Question

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

Answer 1

您可以使用 HTML5 画布裁剪图像。

有关更多信息，请参阅本教程：

要使用 HTML5 Canvas 裁剪图像，我们可以向该方法添加六个附加参数 drawImage()；sourceX, sourceY, sourceWidth,和 . sourceHeight_ 这些参数定义了我们要从图像中剪切出的矩形的位置和大小。destWidthdestHeight

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

更新：

为了以您可以发送到服务器的格式获取裁剪图像，您可以使用canvas.toDataURL方法。（请注意，IE9 仅在您的文档实际以 IE9文档模式运行时才支持此功能）。