[英]Cross-origin image load denied - iPhone only - simple image upload
我正在尝试从我的 iPhone 上传图像并多次使用该图像绘制到画布上,然后最终保存图像(尽管我还没有实现保存部分)。 我在这里使用示例: http : //code.hootsuite.com/html5/ ,我可以开始绘制图像,但是,如果我尝试修改图像,则会出现跨域错误。 图像上传和编辑适用于 Chrome 上的 android 设备(但不适用于 Safari 上的 iPhone)。 有没有人遇到过类似的问题或可以为此提供一些解决方案?
if (window.File && window.FileReader && window.FormData) {
var inputField = document.getElementById('file');
inputField.addEventListener('change', function(e){
var file = e.target.files[0];
if (file) {
if (/^image\//i.test(file.type)) {
readFile(file);
} else {
alert('Not a valid image!');
}
}
})
} else {
alert("FILE UPLOAD NOT SUPPORTED");
}
function readFile(file) {
var reader = new FileReader();
reader.onloadend = function () {
console.log('reader.onloadend');
processFile(reader.result, file.type);
};
reader.onerror = function () {
alert('There was an error reading the file!');
};
reader.readAsDataURL(file);
}
function processFile(dataURL, fileType) {
var maxWidth = 600;
var maxHeight = 600;
var image = new Image();
image.src = dataURL;
image.onload = function () {
var width = image.width;
var height = image.height;
var shouldResize = (width > maxWidth) || (height > maxHeight);
main(image); // this passes image to function that draws image to canvas and crops
}
这似乎是 iOS 中基于 webkit 的浏览器的错误/限制。
至于解决方法:您可以尝试将图像上传为 ArrayBuffer ( readAsArrayBuffer()
) 并创建一个 Blob 和一个对象 url 以设置为源。
有关详细信息,请参阅此答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.