iOS HTML5 Canvas toDataURL
我需要一些帮助。 我们似乎有问题与iOS通过HTML 5 / Canvas获取图像的base64。 如果我们使用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的高度/宽度。
任何指导或协助是最感激的。
iOS的所有限制都是实际的：
- 对于小于256 MB RAM的设备， 解码的GIF，PNG和TIFF图像的最大尺寸为 3百万 像素，对于大于或等于256 MB RAM的设备， 最大尺寸为 500万像素 。
- 对于小于256 MB RAM的设备， canvas元素的最大尺寸为300万 像素，对于大于或等于256 MB RAM的设备，最大尺寸为500万像素 。
- 每个顶级入口点的JavaScript执行时间被限制为10秒。
这个限制不会抛出任何错误，所以你会尝试渲染或读取6MB的图像，你会得到一个破碎的blob / dataURLstring等等。 你会认为File API被破坏，toDataURL / toBlob的canvas方法被破坏，你会是正确的。 但错误不在浏览器中，这是一个系统限制。
所以这个限制为JavaScript API创build了一个破碎的行为。