Resolver problemas al guardar imágenes con canvas.toDataURL()

Al intentar utilizar canvas.toDataURL() para guardar un lienzo como una imagen , puede encontrar dificultades a continuación le indicamos cómo abordar la situación:

Problemas y soluciones

Problemas:

Lo siguiente. es el código para guardar la imagen del lienzo pero no funciona:

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

Solución:

Falta el paso para convertir la imagen a una secuencia binaria en el código. Modifique el código a:

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

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

El código puede guardar la imagen localmente convirtiéndola en una secuencia binaria y tratándola como un archivo.