iOS HTML5画布toDataURL

我需要一些帮助。我们似乎遇到了关于通过HTML 5/Canvas获取图像的base64方面的问题。如果我们使用画布的默认高度/宽度或硬编码高度和宽度，一切正常。但是，如果我们将画布高度/宽度设置为图像src的高度/宽度，那么图像将不会加载到画布中，因此我们不会将图像作为base64。iOS HTML5画布toDataURL

的代码片段，其工作原理：

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

我们需要能够建立基于画布高度/宽度在图像本身上。

任何指导或协助是最感谢。

来源

2014-10-02 David Yancey

附录：代码片段可以在iPad Mini上运行，但我们在iOS 4和iOS 7x以及iPhone 5/iOS8上遇到了问题。 iPad MINI拥有iOS 8 – 2014-10-02 01:36:20

iOS对画布和图像有一些限制 - https://github.com/scottjehl/Device-Bugs/issues/49。核实。 – Pinal 2014-10-02 05:45:48

@Pinal谢谢你，这就是我发现的问题。然而，我不能接受评论作为答案; P – 2014-10-02 11:56:22

所有这些limits are actual为iOS：

用于解码GIF，PNG和TIFF图像的最大尺寸为小于256 MB RAM设备3百万像素和5百万像素的设备大于或等于256 MB的RAM。

为画布元件的最大尺寸为小于256 MB RAM设备3百万像素和5百万像素用于与大于或小于256 MB RAM等于设备。

对于每个顶级入口点，JavaScript执行时间被限制为10秒。

这个限制不会抛出任何错误，所以你会尝试渲染或读取6MB的图像，你会得到一个破损的blob/dataURL字符串等等。你会认为File API已经损坏，toDataURL/toBlob的画布方法被破坏，你会是对的。但错误不在浏览器中，这是一个系统限制。

所以这个限制为JavaScript API创建了一个破坏的行为。

来源

2014-10-02 12:16:25 Pinal

iOS HTML5画布toDataURL

回答

相关问题