Programming/javascript & HTML2018. 10. 4. 18:57

html5 canvas crop & save

본목적(?)은 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]


+
2018.10.25


+
2018.11.13
클릭하면 다운로드 되는 예제
해당 링크를 trigger('click')으로 하면 자동으로 다운로드 된다.

<!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
Posted by 구차니

티스토리툴바