iOS HTML5 Canvas toDataURL

Question

도움이 필요합니다. HTML5/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에서 작동하지만, 안드로이드에 대한 작업을 수행하지 않습니다

코드 :

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 용이 모든 limits are actual :

• 디코딩 GIF, PNG 및 TIFF 이미지의 최대 크기는 256 MB의 RAM과 장치에 대한 3 메가 픽셀 및 장치에 대한 5 메가 픽셀입니다 256MB 이상의 RAM.
• 캔버스 요소의 최대 크기는 256 메가 바이트 RAM을 가진 장치를위한 3 메가 및 5 메가 픽셀 큰 256 메가 바이트 RAM과 같 장치이다.
• JavaScript 실행 시간은 각 최상위 진입 점에 대해 10 초로 제한됩니다.

이 제한은 오류를 발생시키지 않으므로 6MB 이미지를 렌더링하거나 읽으려고 시도 할 때 깨진 blob/dataURL 문자열을 받게됩니다. 그리고 File API가 깨 졌다고 생각하고 toDataURL/toBlob의 캔버스 메소드가 손상되어 올바른 결과를 얻을 수 있습니다. 그러나 버그는 브라우저에 없으며 시스템 제한 사항입니다.

이러한 제약으로 인해 javascript API의 작동이 중단됩니다.