자바 스크립트/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 요소는 음수 좌표가있는 클리핑 영역에서 잘 작동합니다.

예 코드와 데모 :

 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>