Mengapa canvas.toDataURL() saya tidak menyimpan imej saya?

Menyelesaikan Isu Penjimatan Imej dengan canvas.toDataURL()

Apabila cuba menggunakan canvas.toDataURL() untuk menyimpan kanvas sebagai imej , anda mungkin menghadapi kesukaran. Begini cara untuk mendekati situasi:

Masalah dan Penyelesaian

Masalah:

Yang berikut ialah kod untuk menyimpan imej kanvas tetapi ia tidak berfungsi:

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

<div id="createPNGButton">
  <button onclick="putImage()">Save as Image</button>
</div>

Penyelesaian:

Langkah untuk menukar imej kepada strim binari tiada dalam kod tersebut. Ubah suai kod kepada:

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

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

Kod boleh menyimpan imej secara setempat dengan menukarnya kepada strim binari dan menganggapnya sebagai fail.

Atas ialah kandungan terperinci Mengapa canvas.toDataURL() saya tidak menyimpan imej saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!