[英]iOS HTML5 Canvas toDataURL
I need some assistance. 我需要一些帮助。 We seem to be having an issue with iOS with regards to getting the base64 of an image via HTML 5 / Canvas. 对于通过HTML 5 / Canvas获取图像的base64,我们似乎遇到了iOS问题。 Everything works fine if we use the default height / width of the canvas or hard code the height and width. 如果我们使用画布的默认高度/宽度或硬编码高度和宽度,一切正常。 However if we set the canvas height / width to that of the image src then the image won't load into the canvas and therefore we won't get the image as base64. 但是,如果我们将画布高度/宽度设置为图像src的高度/宽度,则图像将不会加载到画布中,因此我们不会将图像作为base64。
Code snippet which works: 有效的代码片段:
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;
}
Code snippet which does not work on iOS but does work on Android: 代码段在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;
}
We need to be able to establish the canvas height / width based upon the image itself. 我们需要能够根据图像本身建立画布高度/宽度。
Any guidance or assistance is most appreciated. 非常感谢任何指导或帮助。
All this limits are actual for iOS: 所有这些限制对iOS来说都是实际的:
This limits don't throw any errors, so then you will try to render or read 6MB image you will get a broken blob/dataURL string and so on. 此限制不会抛出任何错误,因此您将尝试渲染或读取6MB图像,您将获得损坏的blob / dataURL字符串,依此类推。 And you will think that File API is broken, canvas methods toDataURL/toBlob are broken, and you will be right. 而你会认为File API已经破解,画布方法toDataURL / toBlob被破坏了,你就是对的。 But bugs aren't in browser, this is a system limitation. 但是错误不在浏览器中,这是一个系统限制。
So this limitations create a broken behavior for javascript API. 因此,这种限制会导致javascript API出现破坏行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.