iOS HTML5 Canvas toDataURL

Question

我需要一些帮助。我们似乎在使用HTML5/Canvas获取图像的base64时遇到了iOS相关的问题。如果我们使用默认的canvas高度/宽度或硬编码高度和宽度，一切都正常。但是，如果我们将canvas的高度/宽度设置为图像src的高度/宽度，则图像将无法加载到canvas中，因此我们将无法获取图像的base64。

以下是可用的代码片段：

function convertImageToBase64(imgUrl, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    // load image from data url
    var imageObj= new Image();
    imageObj.onload = function () {
        var dataUrl;
        context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

        dataUrl = canvas.toDataURL("image/png");
        callback.call(this, dataUrl);
        canvas = null;
    };
    imageObj.src = imgUrl;
}

以下代码片段在安卓设备上可用，但在iOS设备上不可用：

function convertImageToBase64(imgUrl, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    // load image from data url
    var imageObj= new Image();
    imageObj.onload = function () {
        var dataUrl;
        canvas.width = imageObj.width;
        canvas.height = imageObj.height;
        context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

        dataUrl = canvas.toDataURL("image/png");
        callback.call(this, dataUrl);
        canvas = null;
    };
    imageObj.src = imgUrl;
}

我们需要根据图片本身来确定画布的高度/宽度。

非常感谢您的指导和协助。

- David Yancey

---

补充说明：这段代码片段在iPad Mini上可以运行，但我们在iPhone 4 w/ iOS 7x和iPhone 5 w/ iOS8上遇到了问题。iPad MINI使用的是iOS 8。 - David Yancey

iOS在画布和图像方面有一些限制-https://github.com/scottjehl/Device-Bugs/issues/49。请查看。 - Alex

@Pinal 谢谢，这正是我发现的问题。不过，我不能将评论作为答案接受；P - David Yancey

Answer 1

所有这些限制都适用于iOS：

• 对于RAM小于256MB的设备，解码GIF、PNG和TIFF图像的最大大小为3兆像素，对于RAM大于或等于256MB的设备，最大大小为5兆像素。
• 画布元素的最大大小是3兆像素，对于RAM小于256MB的设备，对于RAM大于或等于256MB的设备，则为5兆像素。
• 每个顶级入口点的JavaScript执行时间限制为10秒。

这些限制不会引发任何错误，因此当您尝试渲染或读取6MB图像时，您将获得一个损坏的blob/dataURL字符串等。然后，您将认为File API已损坏，canvas方法toDataURL/toBlob也已损坏，您是正确的。但错误不在浏览器中，而是系统限制。

所以这些限制会对JavaScript API产生破损的行为。

- Pinal