จะตรวจสอบได้อย่างไรว่า Canvas ล้มเหลวใน Chrome

ในผลิตภัณฑ์ของเรา เราพบปัญหาที่บางครั้งสร้าง Canvas ที่เกินขีดจำกัดที่เบราว์เซอร์กำหนด (ฉันได้รับขีดจำกัดจาก คำถามนี้)

ในการพยายามหาวิธีเตือนผู้ใช้หรืออย่างน้อยก็เพื่อกอบกู้การดำเนินการ ฉันต้องการดูว่าฉันสามารถรวมการกำหนดค่าเริ่มต้นของ Canvas ไว้ในคำสั่ง try/catch ได้หรือไม่ บางอย่างเช่นนี้:

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

ใน Firefox การสร้าง Canvas ที่มีขนาดใหญ่เกินไปทำให้เกิดข้อยกเว้นและทุกอย่างทำงานได้อย่างถูกต้อง

อย่างไรก็ตาม Chrome ทำให้ Canvas ขัดข้อง (แสดงไอคอนหน่วยความจำไม่เพียงพอ) แต่ไม่มีข้อยกเว้นดังนั้นฉันจึงไม่รู้ว่าจะจับความจริงที่ว่า Canvas ไม่สามารถสร้างได้อย่างไร

โดยพื้นฐานแล้ว โค้ดด้านบนจะแสดงความสำเร็จใน Chrome/Opera, ความล้มเหลวใน Firefox และผืนผ้าใบทั้งสองไม่ทำงาน

ไม่มีใครรู้วิธีที่เชื่อถือได้ในการตรวจสอบว่า Canvas ทำงานใน Chrome หรือไม่

ฉันได้สร้างซอนี้เพื่อแสดงให้เห็นว่าเกิดอะไรขึ้น


javascript canvas html
person Kolichikov    schedule 24.01.2019    source แหล่งที่มา
comment
จะเกิดอะไรขึ้นหากคุณพยายามรับบริบทและวาดบางสิ่งลงบนผืนผ้าใบใน Chrome   -  person RwwL    schedule 24.01.2019
comment
ใน Chrome การโทรสำเร็จและฉันไม่ได้รับการวาดรูปใดๆ   -  person Kolichikov    schedule 25.01.2019

คำตอบ (1)


arrow_upward
0
arrow_downward

คุณสามารถลองวาดบางอย่างบนผืนผ้าใบนั้น และตรวจสอบว่าได้ผลหรือไม่โดยการอ่านพิกเซลโดยใช้ 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>

แต่ระวัง บนผืนผ้าใบขนาดใหญ่มาก คุณอาจมีความล่าช้ามาก แม้ว่าคุณจะวาดภาพบนผืนผ้าใบได้ก็ตาม

person Kaiido    schedule 25.01.2019
comment
ตามหลักการแล้ว คงจะดีไม่น้อยหากเกิดความล้มเหลวอย่างชัดเจนเหมือนใน Firefox แต่สิ่งนี้ได้ผลสำหรับฉัน - person Kolichikov; 13.02.2019