캔버스를 png 이미지로 저장하는 방법?
그림이있는 캔버스 요소가 있고, 클릭하면 이미지를 png 파일로 저장하는 버튼을 만들고 싶습니다. 따라서 저장, 열기, 닫기 대화 상자가 열립니다.
이 코드를 사용하여 수행
var canvas = document.getElementById("myCanvas");
window.open(canvas.toDataURL("image/png"));
하지만 IE9에서 테스트하면 "웹 페이지를 표시 할 수 없습니다"라는 새 창이 열리고 URL은 다음과 같습니다.
데이터 : 이미지 / png; base64,iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf / 6el6 / 6ZnpSW / zUn237u5MdXX1172 + z6rqaqeEG6VsJet + 및 pDW / vkdrfx3H3yfT2tVzaP26X6hkw1q / BoeI / 280 / 29JwznZxJPUyXtBQBAQBAQBQaBcECjefmi56BWlZYtAeqajx / WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9 / ldau + H + TX / 8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi / UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK / eTuQU1YuccCQBW7dyIq38 / j5a / fN의 / ad3a5QGXmqsvLfGKJl0ZCFdONEOPyl5lGV8QEAQEAUGghiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J / bmoFqcj2dM3Pr9GK + b1p5bJXmXz9nEC + 3FiorYF4hcmXlo + gUrk + um / + e + QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2 / 6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6 / eK7eJ / Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HHxgBTky + 71CjPGCO + YyU4j0TU9ZcGf0y + JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ / XP + PlLtEcs3huGQhO / r17K3rBvuGrEUt8i5HPAkHC / Yt6lKuwYKiuRM9TtGbY0rcerTBLwC / KY1fSNJ / MTBAQBQUAQqAwExANWGaiHx0z2aJl9CknET + MRc2XsVSKKaNP6O1CDhvtwYn5dJZf3gOG0IxLuS0e + LB4vw9sVhiwmHywmF6xqLLdYIQgIAoKAICAICAJVAQHTo2XmkNtzv6K5R7RXLOwRs3MaW + 47SNkG9oRxZQmun6qbImCo84VSE + 5pR3 / zvFZJni / 7e8tTHiCeqCkAqsKKig2CgCAgCAgCgoAgUG0RCBKzMLmwkzHdL4pk4XlUAn7Uu3XrVtPqVfO4lurPSq0KQa5cdAv9snBgqM5XFPlKSsSPM8o3mcxES2hZtf0rEMMFAUFAEKiBCEgIsqotavpk / OiwZViHPQk / LgHfHo5EnbCGjVpxeYo9yNmw9oeSn2YeTatWTPNzozzX8ZOeWPJlJVRJnrOoxUtJtmLEUmqoartH7BEEBAFBQBCoJggIASu / hUqkUokC2rZkwSSCBU12wpadhNXbpAk13vwwKlJ3O / L1QmYrxPNlDxuGyVtyIn6K8KSZHwY3XsRX + W0L0VyTEPjwM6KuFxN1uiB6Vkv48MpdjxLt9ieieQvscuvWE13eh2jnQ9zv + F2aICAICAKCQGEIRH22559H5IqnDTMGeU / SgUJ7WNLjOVH9g8 / Xrv2Fa4P9SM6K7y4t WXRw76sfVc42fPV936iJ5 + + + LKrbqTU0P3rA 0dZbEh20L9HJHYj23I2oVrHFT5U5NFnY4m6svUA0Pvo8efbvjCBqtr0nN + IVot4Dkvv1v5aoy / HJcpUpsfI3olffdknV0uWuJfv9kWjkw55VIFAfM073PE4EkqZbEBf9HMTs8C6e3KhHiPbdqzJnKWMLAoJAeSMgHrDyRrj0 rOEGvVoYY9Y0inIeE + + + YQQ cqGGj3dgDtvJjC / mKm7BHmG68lGjO + 0T
누구든지 이것을 고치는 방법을 알고 있습니까?
이 시도:
var c=document.getElementById("alpha");
var d=c.toDataURL("image/png");
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+d+"' alt='from canvas'/>");
캔버스의 이미지를 새 페이지에 표시하지만 open popup in new tab설정 한 경우 about:blank주소 표시 줄에 표시됩니다.
편집 : window.open("<img src='"+ c.toDataURL('image/png') +"'/>")-FF 또는 Chrome에서는 작동하지 않지만 렌더링이 캔버스에 표시된 것과 약간 다르지만 다음 작업은 투명성이 문제라고 생각합니다.
window.open(c.toDataURL('image/png'));
FileSaver.js 가 여기에서 도움을 줄 수 있습니다.
var canvas = document.getElementById("my-canvas");
// draw to canvas...
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
이 솔루션을 사용하여 파일 이름 을 설정했습니다 .
HTML :
<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>
<canvas id="canvas"></canvas>
자바 스크립트 :
function download(){
document.getElementById("downloader").download = "image.png";
document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
}
이 문제가 있었고 외부 또는 추가 스크립트 라이브러리가없는 최상의 솔루션입니다. Javascript 태그 또는 파일에서이 함수를 만듭니다. 여기서 캔버스가 캔버스라고 가정합니다.
function download(){
var download = document.getElementById("download");
var image = document.getElementById("canvas").toDataURL("image/png")
.replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
}
HTML의 본문 부분에서 버튼을 지정하십시오.
<a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>
이것은 작동하고 다운로드 링크는 버튼처럼 보입니다. Firefox 및 Chrome에서 테스트되었습니다.
사용자가 마우스 오른쪽 버튼을 클릭하고 "이미지를 다른 이름으로 저장"하지 않는 더 좋은 방법을 찾았을 것입니다. 캔버스 base64 코드를 href링크에 라이브로 그리고 수정하여 다운로드가 자동으로 시작되도록합니다. 보편적으로 브라우저와 호환되는지는 모르겠지만 기본 / 새 브라우저에서 작동해야합니다 .
var canvas = document.getElementById('your-canvas');
if (canvas.getContext) {
var C = canvas.getContext('2d');
}
$('#your-canvas').mousedown(function(event) {
// feel free to choose your event ;)
// just for example
// var OFFSET = $(this).offset();
// var x = event.pageX - OFFSET.left;
// var y = event.pageY - OFFSET.top;
// standard data to url
var imgdata = canvas.toDataURL('image/png');
// modify the dataUrl so the browser starts downloading it instead of just showing it
var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream');
// give the link the values it needs
$('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata);
});
<a>원하는 것은 무엇이든 감쌀 수 있습니다 .
이 시도:
jQuery('body').after('<a id="Download" target="_blank">Click Here</a>');
var canvas = document.getElementById('canvasID');
var ctx = canvas.getContext('2d');
document.getElementById('Download').addEventListener('click', function() {
downloadCanvas(this, 'canvas', 'test.png');
}, false);
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.Download = filename;
}
이 코드를 firefox 또는 chrom의 콘솔에 넣고 위의 스크립트에서 캔버스 태그 ID를 변경 한 후 콘솔에서이 스크립트를 실행할 수 있습니다.
이 코드를 실행하면 html 페이지 하단에 "여기를 클릭하십시오"라는 텍스트로 링크가 표시됩니다. 이 링크를 클릭하고 새 창에서 PNG 이미지로 캔버스 그림을 열고 이미지를 저장하십시오.
canvas toDataURL ( 'image / png') 값의 입력을 포함하는 양식을 제출하십시오.
// JAVASCRIPT
var canvas = document.getElementById("canvas");
var url = canvas.toDataUrl('image/png');
양식 요소의 숨겨진 입력에 URL 값을 삽입하십시오.
// PHP
$data = $_POST['photo'];
$data = str_replace('data:image/png;base64,', '', $data);
$data = base64_decode($data);
file_put_contents("i". rand(0, 50).".png", $data);
전체 작업 HTML 코드 . 새 .HTML 파일로 잘라 내기 + 붙여 넣기 :
두 가지 예를 포함합니다.
- HTML 파일의 캔버스.
- 자바 스크립트로 동적으로 생성 된 캔버스.
테스트 :
- 크롬
- 인터넷 익스플로러
- * Edge (제목 이름이 표시되지 않음)
- Firefox
- 오페라
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title> #SAVE_CANVAS_TEST# </title>
<meta
name ="author"
content="John Mark Isaac Madison"
>
<!-- EMAIL: J4M4I5M7 -[ＡＴ]- Hotmail.com -->
</head>
<body>
<div id="about_the_code">
Illustrates:
<ol>
<li>How to save a canvas from HTML page. </li>
<li>How to save a dynamically created canvas.</li>
</ol>
</div>
<canvas id="DOM_CANVAS"
width ="300"
height="300"
></canvas>
<div id="controls">
<button type="button" style="width:300px;"
onclick="obj.SAVE_CANVAS()">
SAVE_CANVAS ( Dynamically Made Canvas )
</button>
<button type="button" style="width:300px;"
onclick="obj.SAVE_CANVAS('DOM_CANVAS')">
SAVE_CANVAS ( Canvas In HTML Code )
</button>
</div>
<script>
var obj = new MyTestCodeClass();
function MyTestCodeClass(){
//Publically exposed functions:
this.SAVE_CANVAS = SAVE_CANVAS;
//:Private:
var _canvas;
var _canvas_id = "ID_OF_DYNAMIC_CANVAS";
var _name_hash_counter = 0;
//:Create Canvas:
(function _constructor(){
var D = document;
var CE = D.createElement.bind(D);
_canvas = CE("canvas");
_canvas.width = 300;
_canvas.height= 300;
_canvas.id = _canvas_id;
})();
//:Before saving the canvas, fill it so
//:we can see it. For demonstration of code.
function _fillCanvas(input_canvas, r,g,b){
var ctx = input_canvas.getContext("2d");
var c = input_canvas;
ctx.fillStyle = "rgb("+r+","+g+","+b+")";
ctx.fillRect(0, 0, c.width, c.height);
}
//:Saves canvas. If optional_id supplied,
//:will save canvas off the DOM. If not,
//:will save the dynamically created canvas.
function SAVE_CANVAS(optional_id){
var c = _getCanvas( optional_id );
//:Debug Code: Color canvas from DOM
//:green, internal canvas red.
if( optional_id ){
_fillCanvas(c,0,255,0);
}else{
_fillCanvas(c,255,0,0);
}
_saveCanvas( c );
}
//:If optional_id supplied, get canvas
//:from DOM. Else, get internal dynamically
//:created canvas.
function _getCanvas( optional_id ){
var c = null; //:canvas.
if( typeof optional_id == "string"){
var id = optional_id;
var d = document;
var c = d.getElementById( id );
}else{
c = _canvas;
}
return c;
}
function _saveCanvas( canvas ){
if(!window){ alert("[WINDOW_IS_NULL]"); }
//:We want to give the window a unique
//:name so that we can save multiple times
//:without having to close previous
//:windows.
_name_hash_counter++ ;
var NHC = _name_hash_counter ;
var URL = 'about:blank' ;
var name= 'UNIQUE_WINDOW_ID' + NHC;
var w=window.open( URL, name ) ;
if(!w){ alert("[W_IS_NULL]");}
//:Create the page contents,
//:THEN set the tile. Order Matters.
var DW = "" ;
DW += "<img src='" ;
DW += canvas.toDataURL("image/png");
DW += "' alt='from canvas'/>" ;
w.document.write(DW) ;
w.document.title = "NHC"+NHC ;
}
}//:end class
</script>
</body>
<!-- In IE: Script cannot be outside of body. -->
</html>
var canvasId = chart.id + '-canvas';
var canvasDownloadId = chart.id + '-download-canvas';
var canvasHtml = Ext.String.format('<canvas id="{0}" width="{1}" height="{2}"></canvas><a id="{3}"/>',
canvasId,
chart.getWidth(),
chart.getHeight(),
canvasDownloadId);
var canvasElement = reportBuilder.add({ html: canvasHtml });
var canvas = document.getElementById(canvasId);
var canvasDownload = document.getElementById(canvasDownloadId);
canvasDownload.href = chart.getImage().data;
canvasDownload.download = 'chart';
canvasDownload.click();
참고 URL : https://stackoverflow.com/questions/11112321/how-to-save-canvas-as-png-image
'programing tip' 카테고리의 다른 글
| 보기를 복제하려면 어떻게합니까? (0) | 2020.11.15 |
|---|---|
| C ++ 0x : 람다를 참조로 매개 변수로받는 적절한 방법 (0) | 2020.11.15 |
| 케이스 클래스 상속에 대해 * 그렇게 * 잘못된 것은 무엇입니까? (0) | 2020.11.15 |
| 강제 "가로"방향 모드 (0) | 2020.11.15 |
| 고 루틴 내부의 fmt.Println이 행을 인쇄하지 않는 이유는 무엇입니까? (0) | 2020.11.15 |