Загрузка элемента Canvas в изображение

Question

Каковы разные способы сохранения объекта Canvas?

В своем исследовании я нашел два подхода:

var data = canvas.toDataURL();
var prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;

Другой способ - сделать снимок.

Есть ли другие способы сделать это?*

Можно ли настроить имя файла для загрузки?

Answer 1

Единственный способ сохранить - экспортировать как изображение ... Вы уже нашли это решение, и я думаю, что оно лучшее;)

    var canvas = document.getElementById("mycanvas");
    var img    = canvas.toDataURL("image/png");
    document.write('<img src="'+img+'"/>');

Вы можете использовать разные типы изображений.Измените mimetype в этой функции:

    canvas.toDataURL("image/jpeg");

Другой способ сохранить данные холста (в PDF) - использовать библиотеку wkhtmltopdf

Cheers.Фрэнк

frankneff.ch / @ frankneff

Answer 2

Это решение лучше:

function download() {
var download = document.getElementById("download");
var image = document.getElementById("myCanvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}

<a id="download" download="triangle.png">
<button type="button" onClick="download()">Download</button>
</a>
    
<canvas id="myCanvas" width="720" height="450">Your browser does not support Canvas.</canvas>

Answer 3

Решение, которое не требует создания кнопки.

var download = function(){
  var link = document.createElement('a');
  link.download = 'filename.png';
  link.href = document.getElementById('canvas').toDataURL()
  link.click();
}

Полезно, если у вас есть другие триггеры для загрузки или триггеры, на которые вы не можете ссылаться.

Answer 4

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

Я надеюсь, что этот код будет работать.Но сначала создайте тег Anchor в теге canvas, идентификатор которого - «cropImageLink»чем после проверки.но он не работает в браузере IE

Answer 5

Вы можете использовать библиотеку reimg , чтобы сделать это действительно легко.

Преобразование холста в img: ReImg.fromCanvas(document.getElementById('yourCanvas')).toPng()

И загрузить это изображение для пользователя можно следующим образом: ReImg.fromCanvas(document.getElementById('canvas')).downloadPng()

О присвоении файлу нестандартного имени, если вы посмотрите код библиотеки (который очень короткий и простой для понимания), вы обнаружите, что можете изменить имя. Вот ссылка на конкретную строку: https://github.com/gillyb/reimg/blob/master/reimg.js#L56

Answer 6

Попробуйте что-то вроде этого ...

var downloadCanvasAsImage = function(){

    let canvasImage = document.getElementById('canvas').toDataURL('image/png');

    // this can be used to download any image from webpage to local disk
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'image_name.jpg';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove()
      };
      xhr.open('GET', canvasImage); // This is to download the canvas Image
      xhr.send();
}