是否有一个最大的图像大小能够渲染到html画布

Is there a max img size able to render to html canvas?

本文关键字：html 画布 有一个 图像 是否      更新时间：2023-09-26

我试图在jpg中读取并将图像渲染到HTML5画布，然后抓取并存储数据作为DataURL。我想知道是否有一个最大尺寸的图像，可以渲染成画布。它适用于5mb或更小的文件，但当我尝试例如10mb jpg时，当我在新选项卡中打开结果dataURI时，它只是黑色的。我在下面发布了我正在做的事情的基本逻辑。

    reader = new FileReader();
    reader.onloadend = function() {
      var finalCanvas = document.createElement('canvas'),
        ctx = finalCanvas.getContext('2d'),
        img = new Image();
      img.onload = function() {
        finalCanvas.width = img.width;
        finalCanvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        // Get data URL and compress image 75%
        finalImagedocument = finalCanvas.toDataURL('image/jpeg', 0.75); 
        console.log(finalImagedocument);
      }
      img.src = reader.result;
    }
    filedata = reader.readAsDataURL(f);

对于小于256 MB的设备，canvas元素的最大大小为300万像素RAM和500万像素，适用于大于或等于256 MB RAM的设备

相关文章：