Bagaimana cara mendeteksi jika kanvas gagal di Chrome?

Dalam produk kami, kami mengalami masalah ketika kanvas terkadang dibuat melebihi batas yang ditetapkan oleh browser (saya mendapatkan batas tersebut dari pertanyaan ini).

Dalam mencoba menemukan cara untuk memperingatkan pengguna atau setidaknya menyelamatkan operasi, saya ingin melihat apakah saya dapat menggabungkan inisialisasi kanvas dalam pernyataan coba/tangkap, seperti ini:

createCanvas = function() {
  var element = document.createElement("canvas");
  element.id = "canvasId";
  document.getElementById("container").appendChild(element);
  return element;
};

tryToCreateCanvas = function() {
  var width = document.getElementById("widthInput").value;
  var height = document.getElementById("heightInput").value;
  var element = createCanvas();
  try {
    element.width = width;
    element.height = height;
    var context = element.getContext("2d");
    context.scale(width, height);
    document.getElementById("result").innerHTML = "Success!";
  } catch (e) {
    document.getElementById("result").innerHTML = "Failure!";
  }
};

Di firefox, membuat kanvas yang terlalu besar menimbulkan pengecualian dan semuanya berfungsi dengan benar.

Namun Chrome, membuat kanvas mogok (menampilkan ikon sedikit kehabisan memori), tetapi tidak memberikan pengecualian, jadi saya tidak tahu cara mengetahui fakta bahwa kanvas gagal dibuat.

Jadi pada dasarnya kode di atas akan menunjukkan Sukses di Chrome/Opera, Kegagalan di Firefox, dan kedua kanvas tidak berfungsi.

Adakah yang tahu cara andal untuk memeriksa apakah kanvas berfungsi di Chrome?

Saya telah membuat biola ini untuk mengilustrasikan apa yang terjadi


javascript canvas html
person Kolichikov    schedule 24.01.2019    source sumber
comment
Apa yang terjadi jika Anda mencoba mendapatkan konteks dan menggambar sesuatu ke kanvas di Chrome?   -  person RwwL    schedule 24.01.2019
comment
Di chrome, panggilan berhasil dan saya tidak mendapatkan gambar apa pun.   -  person Kolichikov    schedule 25.01.2019

Jawaban (1)


arrow_upward
0
arrow_downward

Anda cukup mencoba menggambar sesuatu di kanvas itu, dan memeriksa apakah itu berhasil dengan membaca piksel menggunakan ctx.getImageData:

const ctx = canvas.getContext('2d');
size.onchange = e => {
  const newSize = +size.value;
  console.log(newSize + ' x ' + newSize, testValidSize(newSize));
};
size.onchange();

function testValidSize(width, height = width) {
  try {
    canvas.width = width;
    canvas.height = height;
    ctx.fillRect(0,0,1,1);  // fill a single pixel
    // check its alpha value
    const supported = !!ctx.getImageData(0,0,1,1).data[3];
    ctx.clearRect(0,0,width,height); // clean
    return supported;
  }
  catch(e) {
    return false;
  }

}
<input type="number" value="50000" id="size">
<canvas id="canvas"></canvas>

Namun hati-hati, pada kanvas yang sangat besar Anda mungkin mengalami banyak kelambatan meskipun Anda bisa menggambar di kanvas tersebut.

person Kaiido    schedule 25.01.2019
comment
Idealnya, akan menyenangkan jika terjadi kegagalan eksplisit seperti di Firefox, tetapi ini berhasil bagi saya. - person Kolichikov; 13.02.2019