스크립트 관련 질문입니다.
본문
// 백그라운드와 툴을 합치는 잡업
$('.merge').click(function(e) {
var canvas = document.querySelector('canvas');
var context = canvas.getContext("2d");
var image = new Image();
image.src = canvas.toDataURL();
image.onload = function(){
context.drawImage(document.getElementsByTagName('canvas')[0], 0, 0);
context.drawImage(document.getElementsByTagName('canvas')[1], 0, 0);
}
var data = canvas.toDataURL("image/png");
});
// 합친 데이터를 저장하는 작업
$('.save').click(function(e) {
var canvas = document.querySelector('canvas');
var context = canvas.getContext("2d");
var image = new Image();
image.src = canvas.toDataURL();
image.onload = function(){
context.drawImage(document.getElementsByTagName('canvas')[0], 0, 0);
context.drawImage(document.getElementsByTagName('canvas')[1], 0, 0);
}
var data = canvas.toDataURL("image/png");
var w = window.open('about:blank', 'image from canvas', 'width=500, height=500');
w.document.write("<img src='"+data+"'/>");
그림판 툴을 이용하여 백그라운드 이미지와 그림판 펜슬툴을 동시에 저장을 하는 것을 구현중이 스크립트 초보자 입니다.
여기서 위의 스크립트는 해당 캡쳐를 했던 이미지를 background로 만들고 그 위에
그림판 툴로 글 혹은 텍스트,도형을 삽입하여 저장이 되게하는 스크립트이고
밑의 스크립트가 위의 2개의 이미지들을 저장한 하나의 이미지로 보여지게 하는 스크립트입니다.
그래서 해당 작업을 진행하면 merge를 시키고 save를 시켜야하는 번거로움이 있어 두개를 하나로
만들어서 작업을 하고 save만 하면 바로 적용이 될 수있도록 하고 싶은데... 어느부분에서 오류가 나는지
합쳐서 스크립트를 짜면 둘중에(background, 그림판툴)하나만 저장이 되어 이미지로 보여지는것 때문에 몇일을 헤매고 있네요 ㅜㅜ 고수님들의 조그마한 조언 해주시면 감사하겠습니다 ㅜㅜ
답변 1
.save 클릭시
var canvas = document.querySelector('canvas');
var context = canvas.getContext("2d");
새로 선언되면 기존 데이터가 초기화 되겠지요?
답변을 작성하시기 전에 로그인 해주세요.