Programming/javascript & HTML2018. 10. 11. 19:10

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

머.. 한줄요약하면 드래그 앤 크랍(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 구차니
Programming/node.js2018. 10. 11. 13:35

node.js mysql PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR 에러

명확한 원인과 해결방법은 아직 못 찾음

mac과 centos에서 node.js를 통해 mysql 접속시 장시간 지난후

이런 에러가 발생을 하는데 mysql 쪽 세션 timeout 이 원인으로 추정됨


{"code":"PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR","fatal":false} 


[링크 : https://stackoverflow.com/.../node-js-mysql-protocol-enqueue-after-fatal-error]

[링크 : https://stackoverflow.com/...mac-and-have-an-error-occurred-when-deploying-on-centos]



+

일정 주기로 쓸모없는 쿼리문 보내도록 해주는 미봉책

[링크 : http://nashorn.tistory.com/entry/Nodejs-서버-운영시-발생하는-오류-대응]

저작자표시

'Programming > node.js' 카테고리의 다른 글

node.js spawn 과 exec  (0) 2018.10.16
node tmp uuid  (0) 2018.10.12
node.js 정적 파일 서비스  (0) 2018.10.10
waveform 출력하는 자바스크립트 모듈  (0) 2018.10.05
xz로 압축된 node.js 설치하기  (0) 2018.10.02
Posted by 구차니
embeded/FPGA - XILINX2018. 10. 11. 09:17

헐...? Xilinx + ARM cortex-m

altera/intel FPGA는 어떻게 되려나?

로직 한계로 atom을 박을순 없을테고 승기를 완전히 잡아 버리는 한수가 될 거 같네


[링크 : http://e4ds.com/sub_view.asp?ch=17&t=1&idx=9612]

저작자표시

'embeded > FPGA - XILINX' 카테고리의 다른 글

zynq mio  (0) 2021.03.16
zynq runtime pl fpga update  (0) 2021.03.15
xilinx DONE  (0) 2018.05.04
vivado I/O Ports 연결 컨셉  (0) 2018.03.23
vivado device constraint  (0) 2018.03.20
Posted by 구차니
Programming/javascript & HTML2018. 10. 11. 07:56

css & jquery animation

jquery를 이용한 애니메이션 설정


$(selector).animate({params},speed,callback); 

[링크 : https://www.w3schools.com/jquery/jquery_animate.asp]


마우스 오버시 줌 애니메이션(트랜지션 시간 설정)

[링크 : https://www.w3schools.com/howto/howto_css_zoom_hover.asp]

저작자표시

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

로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
html5 canvas crop & save  (0) 2018.10.04
Posted by 구차니
Programming/javascript & HTML2018. 10. 11. 07:55

jquery / js로 배경이미지 변경하기

jquery로 css를 변경하는 방법

$("p").css("background-color"); 

[링크 : https://www.w3schools.com/jquery/jquery_css.asp]

[링크 : https://www.tutorialspoint.com/How-to-change-the-background-image-using-jQuery]


+

2018.10.11


$("#my_image").attr("src","second.jpg"); 

[링크 : https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery]

저작자표시

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

캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
css & jquery animation  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
html5 canvas crop & save  (0) 2018.10.04
json2xls 사용 주의  (0) 2018.10.02
Posted by 구차니
Programming/d32018. 10. 11. 07:38

d3 multi level pie 그래프

직접 그리는 법을 찾아 보려고 하니

drilldown이라는 키워드가 보인다. 머하는 녀석인진 아직 파악 못함


[링크 : https://pshivale.github.io/psd3/]

[링크 : https://github.com/pshivale/psd3/blob/gh-pages/psd3.js]


drilldown

[링크 : https://stackoverflow.com/questions/23153403/drilldown-multiple-levels-highchart]

[링크 : http://bl.ocks.org/alessioalex/6448911]

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 timeline  (0) 2018.10.12
d3 관련 검색..  (0) 2018.10.12
d3 font color / weight  (0) 2018.10.02
d3 tooltop  (0) 2018.10.01
d3 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
Posted by 구차니

티스토리툴바