कैनवास.toDataURL() के साथ छवि बचत संबंधी समस्याओं का समाधान

कैनवास को एक छवि के रूप में सहेजने के लिए कैनवास.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

कोड छवि को बाइनरी स्ट्रीम में परिवर्तित करके और इसे एक फ़ाइल के रूप में मानकर स्थानीय रूप से सहेज सकता है।