본목적(?)은 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/]
'Programming > javascript & HTML' 카테고리의 다른 글
| 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 |
