HTML 캔버스 이미지 저장 방법

Question

두 개 또는 세 개의 이미지 (맨 아래부터 다음까지)를 연결하고 다른 페이지 (장바구니 페이지)에서 사용할 이미지를 미리보기 이미지로 저장하고 싶습니다. HTML5 캐시 매니페스트 또는 canvas.toDataURL() 메소드를 사용하여 살펴 보았습니다. 이 목적에 더 적합한 것은 무엇입니까? 캐시 매니페스트 당신이 사용할 수있는 이미지를 갖고 싶어하지 않는 한 여기에는 관련성이없는 경우 오프라인 있지만 효과 때이 없습니다

<div style="width: 80px;"> 
    <img id="imageA" src="imageA.jpg" alt="imageA" 
     width="70" height="400" > 
    <img id="imageB" src="imageB.jpg" alt="imageB" 
     width="70"> 
    <canvas id="canvas1"></canvas> 
    <script type="text/javascript"> 
     var img1 = document.getElementById("imageA"); 
     var img2 = document.getElementById("imageB"); 
     var canvas1 = document.getElementById("canvas1"); 
     var context1 = canvas1.getContext("2d"); 
     canvas1.width = "70"; 
     canvas1.height = "470"; 
     context1.globalAlpha = 1.0; 
     var combinedImage = ctx.getImageData(0, 0, 70, 470); 
     var imgURL = canvas.toDataURL("image/png"); 
    </script> 
</div> 

Answer 1

: 나는 아래 toDataURL() 메소드에 대한 코드를 작성했습니다

병합하는 이미지에 온다.

표시된 코드는 실제로 캔버스에 이미지를 그리는 것이 아니며 getImageData()을 호출하면 여기에 유용하지 않은 빈 픽셀 버퍼 만 나타납니다.

이 대신 (전용 자바 스크립트 부분) 같은 것을보십시오 :

이

var img1 = document.getElementById("imageA"); 
var img2 = document.getElementById("imageB"); 
var canvas1 = document.getElementById("canvas1"); 
var context1 = canvas1.getContext("2d"); 

canvas1.width = 70; /// use numbers instead of strings here 
canvas1.height = img1.height + img2.height; 

/// draw the images onto canvas 
context1.drawImage(img1, 0, 0); 
context1.drawImage(img2, 0, img1.height); 

var imgURL = canvas1.toDataURL(); /// defaults to PNG 

이제 imgUrl에 요구 사항이 충족되는 PNG 제공 CORS로 연결된 이미지를 포함합니다 (즉, 그들은 같은 서버에 있습니다.). 또한 두 개의 이미지가 임베드 된 온 스크린 캔버스를보아야합니다.

희망이 도움이됩니다.