Решение проблем с сохранением изображений с помощью Canvas.toDataURL()

При попытке использовать Canvas.toDataURL() для сохранения холста как изображения , вы можете столкнуться с трудностями. Вот как подойти к этой ситуации:

Проблемы и решения

Проблемы:

Следующее это код для сохранения изображения холста, но он не работает:

// Canvas named "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:


  Save as Image

Решение:

В коде отсутствует этап преобразования изображения в двоичный поток. Измените код следующим образом:

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

window.location.href = image; // Save locally

Код может сохранить изображение локально, преобразовав его в двоичный поток и обрабатывая его как файл.