Canvas drawImage 在大图像上崩溃答案

【问题标题】：Canvas drawImage Crash on large imagesCanvas drawImage 在大图像上崩溃
【发布时间】：2014-05-13 11:12:41
【问题描述】：

我正在创建一个移动应用程序。用户可以在其中从移动设备中选择一张图片，然后我将其模糊.... 问题是当用户选择大图片（超过 2 MB）时，app.崩溃。

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;
},

那么还有其他方法可以实现类似的操作吗？！。

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

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

请确保您没有搞乱跨域资源共享 (CORS)。

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

Maximum size of a <canvas> element

Is there a max size for images being loaded onto canvas on iPhone?

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

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

例如 - 如果你想支持 Apple 的旧硬件，你的画布大小不能超过 2048×1464。

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

【讨论】：

我在移动设备上使用代码，而不是在计算机上。

【解决方案2】：

Android 设备上的画布 drawImage 函数似乎有大小限制。有 3 兆像素的限制，但该限制是针对 drawImage 函数中使用的图像大小，而不是对画布大小的限制，即裁剪/缩小绘制图像的大小没有影响。

ctx.drawImage(imagebiggerthan3mp, 100, 100, 63, 63, 50, 50, 50, 50); // 仍然是 Aw Snap！在安卓上崩溃！

【讨论】：