我在做一个聊天界面。需要上传手机本地照片，压缩，发送给对方。我最初在直接调用本地相册或拍照的时候，用了2台手机真机测试，一台华为荣耀v10 ，安卓版本9，另一台是华为荣耀6，安卓版本4.4.2。使用hbuilder X 2.4.2.20191115。安卓4报跨域错误，安卓9正常。
项目为Wap2app
前台使用mui
后台使用PHP
本人自学小白，代码不规范。请谅解。。。
代码如下：
function galleryImg() {
// 从相册中选择图片
console.log("从相册中选择图片:");
plus.gallery.pick( function(path){
console.log(path);
var k=path.replace('file:///','');
console.log(k);
plus.io.resolveLocalFileSystemURL(k,function(entry){
var gallery_imgUrl = entry.toRemoteURL();
alert(gallery_imgUrl);
uploadImg(gallery_imgUrl); /*上传图片*/
}
);
}, function ( e ) {
console.log( "取消选择图片" );
}, {filename:"_doc/gallery_img.jpg",filter:"image"} );
}
function uploadImg(imgPath) {
plus.io.resolveLocalFileSystemURL(
'_doc',
function(entry){
entry.getDirectory('', {create:true,exclusive:false},function(entry1){
mui.toast('创建或打开成功');
},function(){
mui.toast('创建或者打开子目录失败');
})
},
function(e){mui.toast('获取io操作对象失败');}
);
var canvas=document.createElement("canvas");
ctx = canvas.getContext("2d");
img = new Image();
base64 = '' ;
img.src = imgPath;
img.setAttribute("crossOrigin",'*');
alert(img.src);
img.crossOrigin = "*";
img.onload = function(){ //就是这里出现的跨域问题。不允许onload！
alert("宽："+img.width+"高："+img.height);
var that = this;
var img_w = that.width;
var img_h = that.height;
if(img_w > img_h) {
if(img_w > 1024) {
img_h = Math.round(img_h *= 1024 / img_w);
img_w = 1024;
}
} else {
if(img_h > 1024) {
img_w = Math.round(img_w *= 1024 / img_h);
img_h = 1024;
}
}
canvas.width=img_w;
canvas.height=img_h;
alert(img_w+"与"+img_h);
ctx.drawImage(img,0,0,img_w,img_h);
alert("0000");
base64 = canvas.toDataURL("image/jpeg",1.0);
// base64=img.src;
alert(base64);
insert_im_pic(imgPath); //这个是插入到页面显示的函数。没有放进文章里。
}
};这段代码华为荣耀6就会报如下错误
荣耀v10就不会，一切正常。
后来经过查询说跨域的问题，有个解决办法是把选择的图片文件拷贝至私有目录_doc下，我便修改了代码，加上了把图片拷贝的代码：
function galleryImg() {
plus.io.resolveLocalFileSystemURL( //担心目录不存在，所以在选择照片时就事先检查好目录
'_doc',
function(entry){
entry.getDirectory('', {create:true,exclusive:false},function(entry1){
mui.toast('创建或打开成功');
},function(){
mui.toast('创建或者打开子目录失败');
})
},
function(e){mui.toast('获取io操作对象失败');}
);
console.log("从相册中选择图片:");
plus.gallery.pick( function(path){
console.log(path);
var k=path.replace('file:///','');
console.log(k);
plus.io.resolveLocalFileSystemURL(k,function(entry){ //将选择的图片拷贝至_doc目录
var gallery_imgUrl = entry.toRemoteURL();
alert("gallery_imgUrl:"+gallery_imgUrl);
plus.io.requestFileSystem(plus.io.PRIVATE_DOC,function(fs){
entry.copyTo( fs.root,'', function( entry2 ){
console.log("New Path: " + entry2.fullPath);
var copyUrl=entry2.toRemoteURL();
alert("turn path:"+copyUrl);
console.log("New Path2: " + copyUrl);
uploadImg(copyUrl);
}, function( e ){
alert( e.message );
} );
},function(e2){
alert("e2:"+e2);
});
}
);
}, function ( e ) {
console.log( "取消选择图片" );
}, {filename:"_doc/gallery_img.jpg",filter:"image"} );
}
function uploadImg(imgPath) { //这次传进来的是_doc目录里面的图片地址
var canvas=document.createElement("canvas");
ctx = canvas.getContext("2d");
img = new Image();
base64 = '' ;
img.src = imgPath;
// img.src = canvas.toDataURL("image/jpeg",1.0);
img.setAttribute("crossOrigin",'*');
alert(img.src);
img.crossOrigin = "*";
// var width = img.width;
img.onload = function(){ //仍然是一运行到这里，荣耀6就报跨域了。
alert("宽："+img.width+"高："+img.height);
var that = this;
var img_w = that.width;
var img_h = that.height;
if(img_w > img_h) {
if(img_w > 1024) {
img_h = Math.round(img_h *= 1024 / img_w);
img_w = 1024;
}
} else {
if(img_h > 1024) {
img_w = Math.round(img_w *= 1024 / img_h);
img_h = 1024;
}
}
canvas.width=img_w;
canvas.height=img_h;
alert(img_w+"与"+img_h);
ctx.drawImage(img,0,0,img_w,img_h);
base64 = canvas.toDataURL("image/jpeg",1.0);
alert(base64);
insert_im_pic(imgPath);
}
};荣耀6的安卓4.4.2仍然报跨域：一模一样的错误
我现在很费解，为何高版本的安卓没有问题。低版本的就报跨域。这个问题出在哪儿，应该如何解决？
谢谢朋友们。
