이미지를 캔버스에 저장 한 다음 캔버스에 이미지를 저장하고 더 많이 그려 넣으려고 시도하면 더 많은 이미지를

Question

그립니다. 이것은 내가 soo를 멀리 얻었던 것이다. 그것은 모두 내 이미지를 뱉어 및 도면하지만 난 텍스트

추가 이미지 삭제 -

함께

이미지 저장을

var tCtx2 = document.getElementById('textCanvas').getContext('2d'), 
imageElem = document.getElementById('image'); 
var tCtx = document.getElementById('textCanvas').getContext('2d'), 
imageElem = document.getElementById('image'); 
var ttyl = document.getElementById('newimg'); 
tCtx2.drawImage(ttyl,0,0); 
imageElem.src = tCtx2.canvas.toDataURL("images/image.png"); 

시작 텍스트 그리기

document.getElementById('text').addEventListener('keyup', function(){ 

tCtx.globalCompositeOperation="source-over"; 
var mytxt = document.getElementById('text').value; 
var mystr1 = mytxt.substr(0, 31); 
var mystr2 = mytxt.substr(31, 31); 
var mystr3 = mytxt.substr(62, 31); 
var mystr4 = mytxt.substr(93, 31); 
tCtx.canvas.width = imageElem.width; 
tCtx.fillStyle = '#000000'; 
tCtx.font = '17pt "Lucida Sans Unicode", "Lucida Grande", sans-serif'; 
tCtx.fillText(mystr1, 10, 98); 
tCtx.fillText(mystr2, 10, 122); 
tCtx.fillText(mystr3, 10, 146); 
tCtx.fillText(mystr4, 10, 168); 

시작을 그릴을

var copiedImg = new Image(); 
copiedImg.onload = function(){ 
tCtx.drawImage(copiedImg, 0, 0); 
}; 

copiedImg.src = imageElem.src; 


imageElem.src = tCtx.canvas.toDataURL('image/png') 
}, false); 

Answer 1

나는 그것이이 라인의 느낌이있다 :

tCtx.canvas.width = imageElem.width; 

here에서 :

는 너비 또는 높이 poperties에 값을 할당

자바 스크립트 를 통해이 한 캔버스를 재설정의 부작용. 따라서 은 clearRect 함수와 비슷하게 캔버스가 이 투명도로 반환되었음을 의미합니다.