캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기

머.. 한줄요약하면 드래그 앤 크랍(drag & crop)

jsmpeg으로 영상을 보여주는 canvas에 드래그를 하면 복사해서 다른 캔버스로 넣어주는 코드

주의 :정비율 출력은 좀 더 찾아 봐야 함

//Mouseup

$(canvas).on('mouseup', function (e) {

mousedown = false;

// copy

mousex = parseInt(e.clientX - canvasx);

mousey = parseInt(e.clientY - canvasy);

var width = mousex - last_mousex;

var height = mousey - last_mousey;

// canvas resized calibration

var can_w = document.getElementById('video-canvas').width;

var can_h = document.getElementById('video-canvas').height;

var act_w = document.getElementById('video-canvas').scrollWidth;

var act_h = document.getElementById('video-canvas').scrollHeight;

var tact_w = document.getElementById('target_obj_cnv').width;

var tact_h = document.getElementById('target_obj_cnv').height;

var cnvs = document.getElementById('video-canvas');

var ctx = cnvs.getContext('2d');

var dataURL = cnvs.toDataURL('image/png');

var cnvs = document.getElementById('target_obj_cnv');

var ctxt = cnvs.getContext('2d');

var img = new Image();

img.src = dataURL;

img.onload = function () {

ctxt.drawImage(img,

last_mousex * can_w / act_w,

last_mousey * can_h / act_h,

width * can_w / act_w,

height * can_h / act_h,

0,

0,

tact_w,

tact_h);

}

---

void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage]

img로 받아온 걸 drawImage로 canvas에 그리기

var img = new Image();   img.src = "image.jpg";   img.onload = function() {   context.drawImage(img, 0, 0);   };

[링크 : https://stackoverflow.com/.../how-can-i-change-the-image-source-within-a-canvas-using-jquery]

img to canvas

canvas to canvas로 쓸만한 방법

원본 영상을 원하는 대로 잘라서 쓸 수 있다.

[링크 : https://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/]

getImage는 원하는 영역을 잘라낼수 있는 장점이 있다.

하지만 getImage는 영상 데이터를 RGB 배열로 받아서, toDataURL() 처럼 Img에 넣는 방법을 쓸 수 없다

어떠한 변환을 통해 Base64 인코딩 해서 넣을수 있다면 쓸 수는 있을 듯

[링크 : https://stackoverflow.com/questions/28538913/crop-an-image-displayed-in-a-canvas]