iOS HTML5 Canvas toDataURL

Question

我需要一些帮助。 对于通过HTML 5 / Canvas获取图像的base64，我们似乎遇到了iOS问题。 如果我们使用画布的默认高度/宽度或硬编码高度和宽度，一切正常。 但是，如果我们将画布高度/宽度设置为图像src的高度/宽度，则图像将不会加载到画布中，因此我们不会将图像作为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;
}

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

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

Answer 1

所有这些限制对iOS来说都是实际的：

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

此限制不会抛出任何错误，因此您将尝试渲染或读取6MB图像，您将获得损坏的blob / dataURL字符串，依此类推。 而你会认为File API已经破解，画布方法toDataURL / toBlob被破坏了，你就是对的。 但是错误不在浏览器中，这是一个系统限制。

因此，这种限制会导致javascript API出现破坏行为。