Question

我正在尝试读取jpg并将图像渲染到HTML5画布，然后抓取并将数据存储为DataURL。我想知道是否有可以渲染到画布中的最大尺寸图像。它适用于5mb及更小的文件，但当我在新标签中打开生成的dataURI时，我尝试使用10mb jpg，它只是黑色。我发布了以下我正在做的基本逻辑。

    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百万像素用于大于或等于256 MB RAM的设备

是否有最大图像大小能够渲染到HTML画布？

1 个答案: