Canvas drawImage在大图像上崩溃

Question

我正在创建一个移动应用程序.用户可以从移动设备中选择一张图片然后我模糊它....问题是,当用户选择一张大图片(超过2 MB)时,该应用程序.崩溃.

JS代码:

convert_local_image_base64: function(url, callback) {
    var canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d'),
            img = new Image;
    img.crossOrigin = 'anonymous';
    img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');
        callback.call(this, dataURL);
        canvas = null;
    };
    img.src = url;
},

那么还有另一种方法可以实现类似的操作吗？

Answer 1

在 PC 上： -
\n我尝试在画布上绘制多个大尺寸图像（超过 2 MB）。我还尝试获取它的 dataURL 并在不同的画布上重新绘制它。\n一切对我来说都很好。（在 IE11、Chrome 和 Firefox 上尝试过。）

\n\n

请确保您不会干扰跨域资源共享 (CORS)。

\n\n

我还在 stackoverflow 上找到了一些与画布上的分辨率相关的帖子。

\n\n

<canvas> 元素的最大尺寸

\n\n

iPhone 上加载到画布上的图像有最大尺寸吗？

\n\n

编辑： \n在移动设备上 -
\n以下是移动设备画布的限制：-

\n\n

对于 RAM 小于 256 MB 的设备，画布元素的最大尺寸为 3 兆像素；对于 RAM 大于或等于 256 MB 的设备，画布元素的最大尺寸为 5 兆像素。

\n\n

例如 - 如果您想支持 Apple\xe2\x80\x99s 较旧的硬件，则画布的大小不能超过 2048\xc3\x971464。

\n\n

希望这些资源能够帮助您摆脱困境。

\n