[javascript] 캔버스를 png 이미지로 저장하는 방법?

Question 1

그림이있는 캔버스 요소가 있고, 클릭하면 이미지를 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

누구든지 이것을 고치는 방법을 알고 있습니까?

Question 2

이 시도:

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'));

Question 3

FileSaver.js 가 여기에서 도움을 줄 수 있습니다.

var canvas = document.getElementById("my-canvas");
// draw to canvas...
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

Question 4

이 솔루션을 사용하여 파일 이름 을 설정했습니다 .

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');
}

Question 5

이 문제가 있었는데 이것이 외부 또는 추가 스크립트 라이브러리가없는 최상의 솔루션입니다. 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에서 테스트되었습니다.

Question 6

세 가지 사항을 모두 수용하려면 :

단추
이미지를 png 파일로 저장
저장, 열기, 닫기 대화 상자를 엽니 다.

파일 대화 상자는 브라우저의 설정입니다.

버튼 / 저장 부분의 경우 다른 답변에서 요약 한 다음 기능을 버튼 onclick에 할당하십시오.

function DownloadCanvasAsImage(){
    let downloadLink = document.createElement('a');
    downloadLink.setAttribute('download', 'CanvasAsImage.png');
    let canvas = document.getElementById('myCanvas');
    let dataURL = canvas.toDataURL('image/png');
    let url = dataURL.replace(/^data:image\/png/,'data:application/octet-stream');
    downloadLink.setAttribute('href', url);
    downloadLink.click();
}

Codepen의 예

다소 깔끔한 또 다른 접근 방식은 Canvas.toBlob ()을 사용하는 것입니다 .

function DownloadCanvasAsImage(){
    let downloadLink = document.createElement('a');
    downloadLink.setAttribute('download', 'CanvasAsImage.png');
    let canvas = document.getElementById('myCanvas');
    canvas.toBlob(function(blob) {
      let url = URL.createObjectURL(blob);
      downloadLink.setAttribute('href', url);
      downloadLink.click();
    });
}

Codepen의 예

두 솔루션 모두 브라우저 간 100 % 호환되지 않으므로 클라이언트를 확인하십시오.

Question 7

사용자가 마우스 오른쪽 버튼을 클릭하고 “이미지를 다른 이름으로 저장”하도록 강요하지 않는 더 좋은 방법을 발견했을 것입니다. 캔버스 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>원하는 것은 무엇이든 감쌀 수 있습니다 .

Question 8

이 시도:

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 이미지로 캔버스 그림을 열고 이미지를 저장하십시오.