canvas를 지워주는 녀석
근데.. 투명 이미지의 경우 이상하게 작동하는 것 같으니
투명 이미지를 위해서 이미지 복사시에는 반드시
clearRect() 해주고
drawImage()를 해주어야 한다.
[링크 : https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing]
| js setinterval (0) | 2018.10.16 |
|---|---|
| ajax each (0) | 2018.10.16 |
| console.log 에 객체 배열 출력하기 (0) | 2018.10.15 |
| ajax를 동기로(?) (0) | 2018.10.15 |
| 로컬파일 접근...이 안되는거니까.. (0) | 2018.10.12 |
우회법으로
JSON.stringify() 를 통해 문자열로 변환하고 출력하면 될 듯.
[링크 : https://stackoverflow.com/questions/7912576/console-log-showing-contents-of-array-object]
| ajax each (0) | 2018.10.16 |
|---|---|
| canvas clearRect (0) | 2018.10.15 |
| ajax를 동기로(?) (0) | 2018.10.15 |
| 로컬파일 접근...이 안되는거니까.. (0) | 2018.10.12 |
| 캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기 (0) | 2018.10.11 |
| canvas clearRect (0) | 2018.10.15 |
|---|---|
| console.log 에 객체 배열 출력하기 (0) | 2018.10.15 |
| 로컬파일 접근...이 안되는거니까.. (0) | 2018.10.12 |
| 캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기 (0) | 2018.10.11 |
| css & jquery animation (0) | 2018.10.11 |
찾아는 봐야겠지만..
fakepath와는 별개로
cropper.getCroppedCanvas({ width: 160, height: 90, minWidth: 256, minHeight: 256, maxWidth: 4096, maxHeight: 4096, fillColor: '#fff', imageSmoothingEnabled: false, imageSmoothingQuality: 'high', }); // Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob` cropper.getCroppedCanvas().toBlob((blob) => { const formData = new FormData(); formData.append('croppedImage', blob); // Use `jQuery.ajax` method $.ajax('/path/to/upload', { method: "POST", data: formData, processData: false, contentType: false, success() { console.log('Upload success'); }, error() { console.log('Upload error'); }, }); }); |
[링크 : https://github.com/fengyuanchen/cropperjs]
+
[링크 : https://www.npmjs.com/package/form-data]
[링크 : https://skout90.github.io/2018/08/24/Node.js/blob-객체-컨트롤/]
| console.log 에 객체 배열 출력하기 (0) | 2018.10.15 |
|---|---|
| ajax를 동기로(?) (0) | 2018.10.15 |
| 캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기 (0) | 2018.10.11 |
| css & jquery animation (0) | 2018.10.11 |
| jquery / js로 배경이미지 변경하기 (0) | 2018.10.11 |
머.. 한줄요약하면 드래그 앤 크랍(drag & crop)
jsmpeg으로 영상을 보여주는 canvas에 드래그를 하면 복사해서 다른 캔버스로 넣어주는 코드
주의 :정비율 출력은 좀 더 찾아 봐야 함
---
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]
| 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 |
jquery를 이용한 애니메이션 설정
$(selector).animate({params},speed,callback); |
[링크 : https://www.w3schools.com/jquery/jquery_animate.asp]
마우스 오버시 줌 애니메이션(트랜지션 시간 설정)
[링크 : https://www.w3schools.com/howto/howto_css_zoom_hover.asp]
| 로컬파일 접근...이 안되는거니까.. (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 |
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]
| 캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기 (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 |
화면상에 보이는 실제 크기
document.getElementById('video-canvas').scrollWidth
document.getElementById('video-canvas').scrollHeight
캔버스 자체의 실제 크기
document.getElementById('video-canvas').width
document.getElementById('video-canvas').height
jsmpeg을 통해서 동영상을 틀어 주면 동영상의 실제 크기는 width, height로 나오고
scrollWidth, scrollHeight는 canvas 태그에 의해서 설정된 width, height 값이 나오게 된다.
+
jquery에서 셀렉터로 하면 width를 못 받아온다. 왜그럴까..
| css & jquery animation (0) | 2018.10.11 |
|---|---|
| jquery / js로 배경이미지 변경하기 (0) | 2018.10.11 |
| html5 canvas crop & save (0) | 2018.10.04 |
| json2xls 사용 주의 (0) | 2018.10.02 |
| json key 추가/삭제 (0) | 2018.09.28 |
본목적(?)은 canvas로 그려진 jsmpeg을 캡쳐 하는건데
canvas 가 2d 컨텍스트라면 아래의 toDataURL()을 통해서 간단하게
image/png MIME 타입으로 받을수 있다.
var dataURL = canvas.toDataURL('image/png'); |
[링크 : https://weworkweplay.com/play/saving-html5-canvas-as-image/]
다만 기본 값이 GL 가속이라 disableGL을 true로 해주면 canvas가 2d로 설정되기에 캡쳐가 가능한데
문제는.. gl이나 gl-experiment로 설정해도 못받아 오는건 매한가지란거...
disableGl: true canvas.getContext('2d'); |
[링크 : https://github.com/phoboslab/jsmpeg]
<!DOCTYPE html> <html> <head> <style> .canvas__container { height: 100%; position: relative; width: 100%; } .canvas__canvas { height: 100%; position: relative; width: 100%; z-index: 1; } .canvas__mirror { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } </style> </head> <body> <div class="canvas__container"> <canvas id="cnvs" class="canvas__canvas"></canvas> <img src="" id="mirror" class="canvas__mirror" /> </div> <a href="#" class="button" id="btn-download" download="my-file-name.png">Download</a> <script> var cnvs = document.getElementById('cnvs'), ctx = cnvs.getContext('2d'), mirror = document.getElementById('mirror'); cnvs.width = mirror.width = window.innerWidth; cnvs.height = mirror.height = window.innerHeight; mirror.addEventListener('contextmenu', function (e) { var dataURL = canvas.toDataURL('image/png'); mirror.src = dataURL; }); var button = document.getElementById('btn-download'); button.addEventListener('click', function (e) { var canvas = document.getElementById('cnvs'); var dataURL = canvas.toDataURL('image/png'); button.href = dataURL; }); document.getElementById('btn-download').click(); </script> </body> </html> |
[링크 : https://weworkweplay.com/play/saving-html5-canvas-as-image/]
| jquery / js로 배경이미지 변경하기 (0) | 2018.10.11 |
|---|---|
| html canvas 크기 (0) | 2018.10.07 |
| json2xls 사용 주의 (0) | 2018.10.02 |
| json key 추가/삭제 (0) | 2018.09.28 |
| json merge (0) | 2018.09.28 |
버그인가...
데이터는 더 있는데 필드가 추가 안되는 문제가 있네..
(혹시나 해서 json도 저장해놔서 비교하는데 이런 문제가..)
| html canvas 크기 (0) | 2018.10.07 |
|---|---|
| html5 canvas crop & save (0) | 2018.10.04 |
| json key 추가/삭제 (0) | 2018.09.28 |
| json merge (0) | 2018.09.28 |
| jquery 선택자 (0) | 2018.09.27 |
|
