이미지가 포함 된 HTML5 캔버스 저장

toDataURL 메서드를 사용하여 이미지가 포함 된 캔버스를 저장하는 방법은 무엇입니까? 텍스트와 그림은 모두 잘 작동하지만 이미지 처리 방법을 모르겠습니다. 어떤 도움을 주시면 감사하겠습니다. 다음과 같이 감사이미지가 포함 된 HTML5 캔버스 저장

나는 내 질문을 수정 한 :

이미지가 .PNG에서 직접 뽑아 될 때 작동합니다. 그러나 Google Charts API를 호출하면 이미지가 캔버스에서 올바르게 렌더링 되더라도 toDataURL이 작동하지 않습니다. Google Charts는 .png를 반환합니다. 누구든지 아이디어가 있습니까? 감사.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" charset="utf-8"> 

function test() { 
var c = document.getElementById("drawing-canvas"); 
var cxt = c.getContext("2d"); 

// This doesn't work. 
//var imgsrc = 'http://chart.apis.google.com/chart?cht=tx&chf=bg,s,ffffff&chco=000000& 
chl=a'; 

// This works 
var imgsrc = 'chart.png'; 


var img = new Image(); 
img.src = imgsrc; 
cxt.drawImage(img,0,0); 

} 

function wr() { 
var cc = document.getElementById("drawing-canvas"); 
var url = cc.toDataURL(); 
var newImg = document.createElement("img"); 
newImg.src = url; 
document.body.appendChild(newImg); 
} 
</script> 

</head> 
<body onload = "test();"> 
<canvas id="drawing-canvas" width = "500px" height = "500px" style="background-color: 
#ffffff; border: 2px solid #000000;"> 
Your browser does not support the canvas element. 
</canvas> 
<input type = "button" value = "go" onclick = "wr();"> 
</body> 
</html>

출처

2012-12-21 user1884367

캔버스에서 drawImage를 사용할 때 원본이 .png이면 정상적으로 작동합니다. Google Charts API에서 가져온 이미지를 사용할 때 캔버스에서 올바르게 렌더링되지만 toDataURL을 사용하여 저장할 수는 없습니다. – user1884367

예, 서버에 이미지를 저장할 때 감사합니다. 캐싱에 문제가 있습니다. 나는 시도했다 img.src = "chart.png '+'? ' + Math.random(); 그러나 drawImage (img, x, y)는 어떤 이유로 작동하지 않습니다. 그러나 img.src = 'chart.png? 12345'를 구성하면 작동하지 않습니다. – user1884367

우선 차트를 테스트 할 때 캔버스에 렌더링되지 않았습니다. 이미지가로드 될 때까지 기다려야합니다.chart.png 이미지는 캐시 된 이후 즉시로드되지만 Google Charts API에서 생성 된 이미지는 그렇지 않습니다. 이것은 당신이해야 할 일이다 : 그에서 제외

var img = new Image(); 
img.onload = function() 
{ 
    cxt.drawImage(img,0,0); 
} 
img.src = imgsrc;

, 브라우저의 콘솔에서 SECURITY_ERR을 받고해야합니다. 이는 the Canvas security model doesn't allow you to export images coming from an external URL이기 때문입니다. 서버 측 언어를 사용하여 Google Charts 이미지를 서버에 저장 한 다음 거기에서로드해야합니다.

출처

2012-12-22 22:45:07 jSepia

html로 요소가 캔버스를 나타내는 데이터 URL의 이미지를 반환합니다 toDataURL라는 방법을 가지고 캔버스. 설명서 API on the MDN을 확인할 수 있습니다.

구체적으로는 약 toDataURL 말한다 :
DOMString

가 데이터 반환

반환 toDataURL (모든 ... 인수에서 선택 DOMString 유형 )

: URL을 type (기본값은 PNG)에 지정된 형식의 이미지 표현을 포함합니다.

캔버스의 높이 또는 너비가 0이면 빈 문자열을 나타내는 "data :,"가 반환됩니다.

요청한 유형이 image/png가 아니고 반환 값이 data : image/png로 시작하는 경우 요청한 유형이 지원되지 않습니다.

Chrome은 이미지/웹 유형을 지원합니다.

요청한 형식이 image/jpeg 또는 image/webp 인 경우 0.0과 1.0 사이의 두 번째 인수는 이미지 품질을 나타내는 것으로 처리됩니다. 두 번째 인수가 다른 것이라면 이미지 품질의 기본값이 사용됩니다. 다른 인수는 무시됩니다.

그리고 제공하며 사용하는 방법에 대한 예 :이 예에서는

function test() { var canvas = document.getElementById("canvas"); var url = canvas.toDataURL(); var newImg = document.createElement("img"); newImg.src = url; document.body.appendChild(newImg); }

, 우리는 img 요소의 소스 특성으로 dataURL를 사용하지만, 당신은 당신이 원하는 무엇이든 할 수 있습니다 당신은 그것을 어딘가에 저장하거나 아약스 호출로 서버에 보내는 것과 같다.

이 방법은 캔버스 요소의 일 동안 캔버스 드로잉 관련된 방법 대부분 (getContext 호출에 의해 얻어진) 콘텍스트 드로잉 방법이 있음을 유의해야한다.

출처

2012-12-21 05:12:53 TonioElGringo

이미지가 포함 된 HTML5 캔버스 저장

답변

관련 문제