Canvas.drawImage（）在具有3000px JPGs的iOS mobile safari/chrome上失败

我正在尝试使用“file[type=input]”和html5画布在客户端调整图像的大小。该代码在桌面chrome和android chrome中运行良好，在使用2048px JPG进行测试时，也可以在iOS中运行

但是当我用iphone4s上的照片进行测试时，

{“origW”：3264，“origH”：2448}

，我在iOS safari/chrome上得到了一个糟糕的结果（见截图）。这一定是内存问题，但有解决办法吗

使用jsfiddle自己尝试一下

---

我还检查了一台iPad，在mobile Safari和Chrome上都得到了相同的结果。这似乎是iOS 7的内存问题，但我不知道如何找到它。建议？这里是另一个使用canvas/context2d调整大小的测试站点：顺便说一句，我可以发誓我已经让它在iOS上运行了——但是在我把代码拆开并在我的代码库中试用之后，两个版本都无法处理3000px的iphone照片。

function downsizeImgDataURL (origImg, targetImg){
    consolelog("resizing dataURL to 320px");
    var ctx, filesize, img, canvas, resizeH, resizeW, resizedDataURL, targetWidth;

    targetWidth = 320;
    if (origImg.width > targetWidth) {
        resizeH = origImg.height / origImg.width * targetWidth;
        resizeW = targetWidth;
    }
    filesize = [origImg.src.length];
    consolelog("*** downsize canvas, IMG.onload(): downsized=" + JSON.stringify([resizeW, resizeH]));

    canvas = document.createElement('canvas')
    canvas.width = resizeW
    canvas.height = resizeH
    ctx = canvas.getContext("2d");
    ctx.drawImage(origImg, 0, 0, resizeW, resizeH);
    resizedDataURL = canvas.toDataURL("image/jpeg");
    filesize.push(resizedDataURL.length);
    consolelog("*** downsize result, filesize=" + JSON.stringify(filesize));

    targetImg.src = resizedDataURL;
}