Как сохранить холст как изображение С canvas.toDataURL()?

В настоящее время я создаю собственное приложение для веб-приложений HTML5/Phonegap, и я не могу понять, как сохранить мой холст в качестве изображения с помощью canvas.toDataURL(). Может кто-нибудь помочь мне?

Вот код, что с ним не так?

//Мой холст был назван "canvasSignature"

JavaScript:

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>

Ответ 1

Вот какой код. без ошибок.

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

Ответ 2

Вы можете использовать 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>

Ответ 3

Я создал небольшую библиотеку, которая делает это (наряду с некоторыми другими удобными преобразованиями). Он назывался reimg, и он действительно прост в использовании.

ReImg.fromCanvas(yourCanvasElement).toPng()

Ответ 4

Эта работа для меня: (Только Google Chrome)

<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>

Ответ 5

Вместо imageElement.src = myImage; вы должны использовать window.location = myImage;

И даже после этого браузер отобразит изображение. Вы можете щелкнуть правой кнопкой мыши и использовать "Сохранить ссылку" для загрузки изображения.

Для получения дополнительной информации просмотрите эту ссылку.

Ответ 6

Как и 1000Bugy answer, но проще, потому что вам не нужно делать привязку "на лету" и вручную отправлять событие клика (плюс исправление IE).

Если вы сделаете кнопку загрузки анкером, вы можете выполнить ее до того, как будет запущена функциональность привязки по умолчанию. Итак, onAnchorClick вы можете установить привязку href к изображению base64 canvas и атрибуту загрузки якоря для того, что вы хотите назвать своим изображением.

Это не работает в (текущем) IE, потому что он не реализует атрибут загрузки и не позволяет загружать данные uris. Но это можно исправить с помощью 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());
  }
}

Здесь скрипка

Ответ 7

Это решение позволяет вам изменить имя загруженного файла:

HTML:

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

JAVASCRIPT:

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

Ответ 8

@Wardenclyffe и SColvin, вы оба пытаетесь сохранить изображение с помощью холста, а не используя canvas'context. вы должны попробовать ctx.toDataURL();

Попробуйте следующее:

var canvas1 = document.getElementById( "yourCanvasId" );
var ctx = canvas1.getContext( "2d" );
var img = new Изображение();
img.src= ctx.toDataURL('image/png');
ctx.drawImage(IMG, 200150);

Также вы можете ссылаться на следующие ссылки:

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