javascript - 是否有能够渲染到 html Canvas 的最大图像大小？

Question

我正在尝试读取 jpg 并将图像渲染到 HTML5 Canvas ，然后抓取数据并将其存储为 DataURL。我想知道是否有可以渲染到 Canvas 上的最大尺寸图像。它适用于 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);

Answer 1

对于小于 256 MB 的设备， Canvas 元素的最大尺寸为 3 兆像素 RAM 和 5 兆像素(适用于 RAM 大于或等于 256 MB 的设备)