javascript - iOS HTML5 Canvas toDataURL

Question

我需要一些帮助。关于通过 HTML 5/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 但适用于 Android 的代码片段:

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

我们需要能够根据图像本身建立 Canvas 高度/宽度。

非常感谢任何指导或帮助。

Answer 1

这一切limits are actual对于 iOS:

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

此限制不会抛出任何错误，因此当您尝试渲染或读取 6MB 图像时，您会得到损坏的 blob/dataURL 字符串等。你会认为 File API 坏了，canvas 方法 toDataURL/toBlob 坏了，你是对的。但错误不在浏览器中，这是系统限制。

因此，此限制会导致 javascript API 出现异常行为。