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出現破壞行為。