Bagaimana untuk Menyimpan Kanvas sebagai Imej dalam HTML5?

Menyimpan Kanvas sebagai Imej menggunakan Canvas.toDataURL()

Dalam HTML5, anda boleh mencipta dan memanipulasi imej pada elemen kanvas. Untuk menyimpan kanvas sebagai imej, anda boleh menggunakan kaedah canvas.toDataURL(). Kaedah ini mengembalikan perwakilan rentetan berkod base64 bagi kandungan kanvas dalam format imej yang ditentukan.

Walau bagaimanapun, anda mungkin menghadapi masalah jika anda cuba menyimpan kanvas sebagai imej menggunakan kod berikut:

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;
}

Kod ini gagal kerana ia tidak mengendalikan rentetan berkod base64 dengan betul. Untuk menyimpan kanvas sebagai imej, anda perlu menggunakan kod dipertingkat berikut:

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

Di sini, kaedah replace() digunakan untuk menukar rentetan berkod base64 kepada aliran oktet, iaitu serasi dengan tugasan window.location.href. Kod ini kini akan berjaya menyimpan kanvas sebagai imej secara setempat.

Atas ialah kandungan terperinci Bagaimana untuk Menyimpan Kanvas sebagai Imej dalam HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!