캔버스 또는 JS를 사용하여 사각형 (사용자가 업로드 한 이미지)으로 시작하는 이미지를 커브로 처리

Question

사용자가 업로드 한 이미지를 커브로 만드는 사이트를 만들고 사용자가 새 이미지를 저장할 수있게하려고합니다. 아래 링크와 같이 이미지를 커브하는 방법을 찾는 데 문제가 있습니다. 캔버스에서 곡선 모양을 단색으로 만들 수는 있지만 이미지로 만들 수는 없습니다.

http://i53.tinypic.com/2gule04.jpg

Answer 1

는이 작업을 수행하는 간단한 방법은 없습니다. Canvas의 pixelwise API를 사용하여 직접 코드 변환해야 할 수도 있습니다. http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/을 참조하십시오.

순수 픽셀 기반 솔루션 대신 메쉬 기반 솔루션을 사용해 볼 수 있습니다. 원본 이미지를 대상 모양에 매핑되는 작은 청크로 분할합니다. 그런 다음 텍스처 매핑을 사용하여 세부 정보를 채 웁니다. 매핑 알고리즘은 Image manipulation and texture mapping using HTML5 Canvas?을 참조하십시오. 당신은 또 다른 algo here을 찾을 수 있습니다. 그래도 매핑 좌표를 알아 내야합니다.

Answer 2

나는 이런 식으로 시도했다.

나는 소스 이미지의 폭 (300)과 높이 (227)를 가진 그리고이 이미지 15 픽셀을 아래로 구부리려고하고있다. 따라서 같은 너비와 높이의 imageWidth + 15 픽셀의 캔버스를 만듭니다. 즉. 227 + 15 = 242

HTML :

<img id="source" src="rhino.jpg"> 
<canvas id="canvas" width="300" height="242" ></canvas> 

자바 스크립트

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var img = document.getElementById('source'); 

var x1 = img.width/2; 
var x2 = img.width; 
var y1 = 15; // curve depth 
var y2 = 0; 

var eb = (y2*x1*x1 - y1*x2*x2)/(x2*x1*x1 - x1*x2*x2); 
var ea = (y1 - eb*x1)/(x1*x1); 

// variable used for the loop 
var currentYOffset; 

for(var x = 0; x < img.width; x++) { 

    // calculate the current offset 
    currentYOffset = (ea * x * x) + eb * x; 

    ctx.drawImage(img,x,0,1,img.height,x,currentYOffset,1,img.height); 
}