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

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

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

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

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

Существуют ли другие способы сделать это?

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

Ответы

Ответ 1

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

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

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

    canvas.toDataURL("image/jpeg");

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

Приветствия. Франк

frankneff.ch/@frankneff

Ответ 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>

Ответ 3

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

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

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

Ответ 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, id которого является "cropImageLink". чем после проверки. но он не работает в браузере IE

Ответ 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

Ответ 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();
}