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上： -
我尝试在画布上绘制多个大尺寸图像（超过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?

<强>编辑： ON移动设备
以下是移动设备画布的限制： -

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

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

希望这些资源可以帮助你解决问题。

Answer 2

android设备上的canvas drawImage函数似乎有一个大小限制。有一个3百万像素的限制，但限制是在drawImage函数中使用的图像的大小而不是画布大小的限制，即裁剪/缩小绘制图像的大小没有影响。

ctx.drawImage（imagebiggerthan3mp，100,100,63,63,50,50,50,50）; //还是Aw Snap！在android上崩溃了！

Canvas drawImage在大图像上崩溃

2 个答案: