canvas.toDataURL ()을 사용하여 캔버스를 이미지로 저장하는 방법?

141

현재 HTML5 웹 앱 / Phonegap 기본 앱을 만들고 있는데로 캔버스를 이미지로 저장하는 방법을 알 수 없습니다 canvas.toDataURL(). 누군가 나를 도울 수 있습니까?

여기 코드가 있는데, 무엇이 잘못 되었나요?

// 내 캔버스 이름은 "canvasSignature"

자바 스크립트 :

function putImage()
{
  var canvas1 = document.getElementById("canvasSignature");        
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           

}

HTML5 :

<div id="createPNGButton">
    <button onclick="putImage()">Save as Image</button>        
</div>

— 워렌 클리프
소스

4

OP의 질문에 대한 답변이 없습니다. 그는 이것이 Phonegap / iPad 용이라고 분명히 말했습니다. 주어진 답변은 데스크탑 브라우저에 저장하기위한 것입니다.

— tshm001

1

phonegap에 대해서는 확실하지 않지만 다른 쪽에서는 JavaScript를 사용하여 기본 iOS에서 처음 부터이 작업을 수행했으며로 데이터를 캡처 .toDataURL()한 다음 window.location을 사용하여 브라우저를 가리 킵니다 appname://[data url]. 앱 끝에서 UIWebView에는 페이지를로드해야하는지 여부를 나타내는 대리자 메서드가 있습니다. 나는 appname://들어올 때 듣고 듣고 페이지로드를 거부하고 기본 문자열로 데이터 URL을 캡처합니다 ... 실제 iOS / 목표 C 코드에 얼마나 익숙합니까?

— Doug

121

다음은 몇 가지 코드입니다. 오류없이.

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.


window.location.href=image; // it will save locally

— 사용자 1874941
소스

1

IE9 표준 모드를 제외하고 : "이 웹 페이지의 일부 컨텐츠 나 파일에는 설치하지 않은 프로그램이 필요합니다." 인터넷 익스플로러 8 위에만 CSS에서 이미지, <링크>에 대한 데이터 URI를 지원하고, <IMG> : developer.mozilla.org/en-US/docs/data_URIs

— 시스 Timmerman

45

잘 작동합니다. 다운로드 한 파일 이름을 어떻게 변경합니까? "다운로드"로만 제공되며 확장명도 없습니다. 감사!

— Leabdalla

1

Chrome에서는 브라우저가 충돌합니다. 이미지를 이미지 태그에 표시하면 작동하지만 마우스 오른쪽 버튼 메뉴가 회색으로 표시되어 이미지를 저장할 수 없습니다.

— Kokodoko

이것은 훌륭하게 작동합니다 ...하지만 Android (Galaxy S3의 기본 브라우저)에서는 이미지를 다운로드하지 않지만 "다운로드 중 ..."이라는 메시지가 영원히 나타납니다.

— Habrashat

나는이 링크를 볼 수 있도록 문제를 저장했습니다 : stackoverflow.com/questions/25131763/…

— Ramesh S

36

이 솔루션을 사용하면 다운로드 한 파일의 이름을 변경할 수 있습니다.

HTML :

<a id="link"></a>

자바 스크립트 :

  var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();

— 토마스여
소스

이것에 감사합니다, 그것은 크게 도움이되었습니다!

— 마이크 문

22

canvas2image 를 사용 하여 다운로드하라는 메시지를 표시 할 수 있습니다 .

나는 같은 문제가 있었는데, 여기에 이미지를 페이지에 추가하고 브라우저가 강제로 다운로드하도록하는 간단한 예가 있습니다.

<html>
    <head>
        <script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
        <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100); 
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function to_image(){
                var canvas = document.getElementById("thecanvas");
                document.getElementById("theimage").src = canvas.toDataURL();
                Canvas2Image.saveAsPNG(canvas);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas width=200 height=200 id="thecanvas"></canvas>
        <div><button onclick="to_image()">Draw to Image</button></div>
        <image id="theimage"></image>
    </body>
</html>

— 스콜 빈
소스

2

Chrome에서 이름이나 확장자가없는 파일을 저장하려고 시도했습니다.

— malber

여기에 언급 된 것처럼 nihilogic.dk/labs/canvas2image 파일 이름 설정은 불가능한 것 같습니다. "어떻게 든 파일 이름이 데이터에 첨부 될 수 있다면 정말 깔끔 할 것입니다. 그러나 그 방법을 찾지 못했습니다. 지금은 파일 이름을 직접 지정해야합니다. "

— SColvin

1

게시 한 링크가 깨졌습니다

— Oliver Nybroe

9

당신은 이것을 시도 할 수 있습니다; 더미 HTML 앵커를 만들고 거기에서 이미지를 다운로드하십시오 ...

// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
    var canvas = document.querySelector('#my-canvas');

    var dataURL = canvas.toDataURL("image/jpeg", 1.0);

    downloadImage(dataURL, 'my-canvas.jpeg');
});

// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
    var a = document.createElement('a');
    a.href = data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}

— 브 마토 부
소스

1

나는 링크 요소의 생성을 포함하여 JS에서 모든 것이 완료되었다는 사실을 좋아한다. 자동화 목적으로 잘 작동합니다

— Jeromy Adofo

완벽한 솔루션

— Hidayt Rahman

8

나는 이것을 수행하는 작은 라이브러리를 만들었습니다 (다른 편리한 변환과 함께). reimg 라고 하며 사용이 정말 간단합니다.

ReImg.fromCanvas(yourCanvasElement).toPng()

— 길 리브
소스

멋진 도서관. 감사. 예제 문서에는 약간의 문제가 있습니다. Github에서 귀하의 관심을 끌기 위해 문제를 열었습니다.

— jmknoll

7

이것은 나를 위해 일한다 : (구글 크롬 만)

<html>
<head>
    <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100);
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function downloadImage()
            {
                var canvas = document.getElementById("thecanvas");
                var image = canvas.toDataURL();

                var aLink = document.createElement('a');
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("click");
                aLink.download = 'image.png';
                aLink.href = image;
                aLink.dispatchEvent(evt);
            }
    </script>
</head>
<body onload="draw()">
    <canvas width=200 height=200 id="thecanvas"></canvas>
    <div><button onclick="downloadImage()">Download</button></div>
    <image id="theimage"></image>
</body>
</html>

— 1000 번지
소스

아마도 주석없이 그냥 붙여 넣는 대신 질문에 대답하는 코드 부분을 설명 할 수 있습니까?

— Gediminas Masaitis 2016 년

6

유사 1000Bugy의 대답 하지만 당신은 즉석에서 앵커을 수동으로 클릭 이벤트를 전달하지 않기 때문에 간단 (플러스 IE 수정).

다운로드 버튼을 앵커로 만들면 기본 앵커 기능이 실행되기 직전에 하이재킹 할 수 있습니다. 따라서 onAnchorClick앵커 href를 캔버스 base64 이미지로 설정하고 앵커 다운로드 속성을 이미지 이름을 지정하려는 대상으로 설정할 수 있습니다.

다운로드 속성을 구현하지 않고 데이터 URI를 다운로드하지 못하므로 (현재) IE에서는 작동하지 않습니다. 그러나 이것은 window.navigator.msSaveBlob대신 사용하여 해결할 수 있습니다 .

앵커 클릭 이벤트 핸들러로 다음 (여기서 될 수 있도록 anchor, canvas그리고 fileName범위 조회입니다) :

function onClickAnchor(e) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
    e.preventDefault();
  } else {
    anchor.setAttribute('download', fileName);
    anchor.setAttribute('href', canvas.toDataURL());
  }
}

여기 바이올린이 있습니다

— 세 이티
소스

1

대신에 imageElement.src = myImage;사용해야합니다window.location = myImage;

그 후에도 브라우저는 이미지 자체를 표시합니다. 마우스 오른쪽 버튼을 클릭하고 "링크 저장"을 사용하여 이미지를 다운로드 할 수 있습니다.

자세한 내용은 이 링크 를 확인 하십시오.

— 하칸 서스
소스

와, 고마워, 그것은 정말 많은 도움이되었습니다 :) 그러나 어떻게 누군가가 안드로이드 이미지 폴더와 같은 특정 목적지에 저장할 수 있도록 팝업 저장 상자를 얻습니까?

— Wardenclyffe

특정 브라우저에 따라 다릅니다. Android 브라우저는 일반적으로 파일을 특정 폴더에 직접 다운로드하여 불안정합니다.

— Hakan Serce

Chrome에서는 작동하지만 마우스 오른쪽 버튼 클릭 메뉴가 회색으로 표시됩니다. 브라우저에서 이미지를 '끌기'하려고하면 Chrome이 중단됩니다.

— Kokodoko

groups.google.com/a/chromium.org/forum/#!topic/blink-dev/… 이와 같은 데이터 URL 열기는 차단 될 것입니다.

— KeyOfJ

0

Cordova에서 실행할 때 앞서 언급 한 방법으로 이미지를 다운로드 할 수 없습니다. Cordova File Plugin 을 사용해야합니다 . 이를 통해 저장할 위치를 선택하고 다양한 지속성 설정을 활용할 수 있습니다. 자세한 내용은 https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

또는 이미지를 base64로 변환 한 다음 문자열을 localStorage에 저장할 수 있지만 이미지가 많거나 고해상도 인 경우 할당량을 매우 빠르게 채 웁니다.

— 빅 발리
소스

-9

@Wardenclyffe와 @SColvin, 둘 다 캔버스의 컨텍스트를 사용하지 않고 캔버스를 사용하여 이미지를 저장하려고합니다. 둘 다 ctx.toDataURL (); 이 시도:

var canvas1 = document.getElementById("yourCanvasId");  <br>
var ctx = canvas1.getContext("2d");<br>
var img = new Image();<br>
img.src = ctx.toDataURL('image/png');<br>
ctx.drawImage(img,200,150);<br>

또한 다음 링크를 참조 할 수 있습니다.

http://tutorials.jenkov.com/html5-canvas/todataurl.html

http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element

— 비네 찬드라
소스

잡히지 않은 TypeError : 개체 # <CanvasRenderingContext2D>에 'toDataURL'메서드가 없습니다.

— Brandon Aubie

context 요소에 developer.mozilla.org/en-US/docs/Web/API/…toDataURL 기능 이 없기 때문에 이것은 잘못된 것 입니다 . 당신은 전화를 걸 toDataURL: 캔버스 요소에 developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/...

— Crashalot