Resolvendo problemas de salvamento de imagens com canvas.toDataURL()

Ao tentar utilizar canvas.toDataURL() para salvar uma tela como uma imagem , você pode encontrar dificuldades. Veja como abordar a situação:

Problemas e soluções

Problemas:

O seguinte. é o código para salvar a imagem da tela, mas não 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

Solução:

A etapa para converter a imagem em um fluxo binário está faltando no código. Modifique o código para:

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

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

O código pode salvar a imagem localmente convertendo-a em um fluxo binário e tratando-a como um arquivo.