حل مشكلات حفظ الصور باستخدام Canvas.toDataURL()

عند محاولة استخدام Canvas.toDataURL() لحفظ لوحة قماشية كصورة ، قد تواجه صعوبات، وإليك كيفية التعامل مع الموقف:

المشاكل والحلول

المشاكل:

ما يلي. هو رمز حفظ صورة اللوحة القماشية ولكنه لا يعمل:

// اللوحة القماشية المسماة "canvasSignature" جافا سكريبت: وظيفة وضع الصورة () { var Canvas1 = document.getElementById("canvasSignature"); إذا (canvas1.getContext) { var ctx = Canvas1.getContext("2d"); var myImage = Canvas1.toDataURL("image/png"); } var imageElement = document.getElementById("MyPix"); imageElement.src = myImage; } HTML5:

// 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; // الحفظ محليًا

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

يمكن للكود حفظ الصورة محليًا عن طريق تحويلها إلى دفق ثنائي ومعاملتها كملف.