canvas drawImage 저장 질문입니다.
본문
<script type="text/javascript">
var canvas = document.getElementById('signature-pad');
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
document.getElementById('save-png').addEventListener('click', function () {
var data = signaturePad.toDataURL("image/png");
document.getElementById('clear').addEventListener('drawimage', function () {
var ctx = canvas.getContext('2d');
var backgroundImage = new Image();
ctx = canvas.getContext("2d");
backgroundImage.src= 'https://t1.daumcdn.net/cfile/tistory/25679E435319402A2B';
ctx.drawImage(backgroundImage, 0, 0);
});
var imgData = atob(data.split(',')[1]);
var len = imgData.length;
var buf = new ArrayBuffer(len);
var view = new Uint8Array(buf);
var blob, i;
for(i = 0; i < len; i++){
view[i] = imgData.charCodeAt(i) & 0xff;
}
blob = new Blob([view], {type: 'image/png'});
console.log(blob);
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.style = "display:none";
a.href = url;
a.download = "review_comment.png";
document.body.appendChild(a);
a.click();
setTimeout(function(){
document.body.removeChild(a);
URL.revokeObjectURL(url); //메모리 해제
}, 100);
});
</script>
위의 소스는 canvas를 이용하여 drawImage를 출력한 후 로컬에 이미지파일로 저장이 되게하는 소스입니다.
선을 이용하여 편집한 후 이미지저장은 가능한데 위의 소스처럼 drawImage를 이용하여 이미지를 부른뒤
그 이미지위에 선으로 작업을하고 저장을 하려고 하면 계속 오류가 나네요 ㅜㅜ
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
이런식의 오류가 나는데 canvas에서 문법이 잘못되어서 작동이 안되는거같은데 무엇을 고쳐야하는지 감이 오질않아 질문드립니다 ㅜ 고수분들의 조언 부탁드리겠습니다.
답변 1
해당코드에 원본샘플을 보고 그대로 돌려보면서 해야알텐데 뭔가 서버에서 빠진거 아닐까요?
확인결과 로컬에서 테스트중인데 웹상의 이미지를 가져와 사용을 하여 크로스도메인 오류가 생긴것 같습니다ㅎㅎ 답변주셔서 감사드립니다.
답변을 작성하시기 전에 로그인 해주세요.
