머.. 한줄요약하면 드래그 앤 크랍(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]

'Programming > javascript & HTML' 카테고리의 다른 글

ajax를 동기로(?)  (0) 2018.10.15
로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
css & jquery animation  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
Posted by 구차니