javascript / jQuery插件，用于裁剪带有负裁剪边界的图像

Question

我有一个与此问题类似的问题，但是使用不同的技术： 如何在Java中裁剪带有负裁剪边界的图像？

我需要一个能够裁剪部分区域位于原始图像之外的图像的插件。 真正的裁剪将在后端执行（裁剪坐标将发送到那里），但是需要一些UI /插件才能选择图像和选择区域。

因此，基本上我有图像（1），并且想要将其裁剪为（2）的尺寸。

(1)
          +---------------------------+
 (2)      |                           |
  +-----------------------------+     |
  |       |                     |     |
  |       |                     |     |
  |       |                     |     |
  |       |                     |     |
  +-----------------------------+     |
          |                           |
          +---------------------------+

关于如何在Javasript / jQuery / HTML5中实现此目标的任何想法？

我尝试了几个插件，但它们不支持负作物边界。

Answer 1

Html5 Canvas元素可以与带有负坐标的剪切区域一起正常工作。

示例代码和演示：

  var canvas1=document.getElementById("canvas1"); var ctx1=canvas1.getContext("2d"); var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var x=-30; var y=30; var w=150; var h=100; var img=new Image(); img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/multple/reef.jpg"; function start(){ canvas1.width=canvas.width=img.width; canvas1.height=canvas.height=img.height; ctx1.strokeStyle='red'; ctx1.lineWidth=2; ctx1.drawImage(img,0,0); drawRect(ctx1,x,y,w,h); ctx1.stroke(); ctx.strokeStyle='red'; ctx.lineWidth=2; drawRect(ctx,x,y,w,h); ctx.stroke(); ctx.clip(); ctx.drawImage(img,0,0); } function drawRect(context,x,y,w,h){ context.beginPath(); context.moveTo(x,y); context.lineTo(x+w,y); context.lineTo(x+w,y+h); context.lineTo(x,y+h); context.lineTo(x,y); context.closePath(); } 

 body{ background-color: ivory; } canvas{border:1px solid red;} 

 <h4>Unclipped</h4> <canvas id="canvas1" width=300 height=300></canvas><br> <h4>Clipped with negative rectangle</h4> <canvas id="canvas" width=300 height=300></canvas>