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

Question

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

Answer 1

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

有关详细信息，请参阅this tutorial：

  

要使用HTML5 Canvas裁剪图像，我们可以添加六个额外的参数   drawImage()方法; sourceX，sourceY，sourceWidth，sourceHeight，destWidth和   destHeight。这些参数定义了我们想要的矩形的位置和大小   切出图像。

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

<强>更新：

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