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

Question

我遇到类似这个的问题，但是在不同的技术中： How can I crop an image with negative crop-boundaries in Java?

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

所以，基本上我有图像（1），我想把它裁剪成（2）的尺寸。

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

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

我尝试了很少的插件，但他们不支持负面裁剪边界。

Answer 1

Html5 Canvas元素适用于具有负坐标的剪裁区域。

示例代码和演示：

＆＃13;

＆＃13;

        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();
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;