使用场景:uniapp开发app时,某个功能中需要使用html2canvas框架转图片,并且里边可以更改图片
出现问题:如果用户从相册中选取图片的话,html2canvas这个组件就会报错
这个错误经过我问度娘得知,原来是因为图片跨域了,因为是临时路径,这个跨域怎么解决呢,这个问题我思考了好长时间,后来一想,转成base64格式应该可以
plus.io.resolveLocalFileSystemURL(path, function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader()
fileReader.onload = function(evt) {
console.log('onload转换base64后',evt.target.result);
}
fileReader.onerror = function(error) {
console.log('fileReader', error);
}
fileReader.readAsDataURL(file)
}, function(error) {
console.log('entry.file',error);
})
}, function(error) {
console.log('plus.io.resolveLocalFileSystemURL',error);
})
});
于是我在网上找到了这个方案,但是这个方案中,我return也出不来值,然后我全局赋值然后打印,也出不来值,后来想到了使用Promise,不多说,直接上代码
pathToBase64App(path) {
return new Promise((resolve) => {
// 通过URL参数获取目录对象或文件对象
plus.io.resolveLocalFileSystemURL(path, function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader()
fileReader.onload = function(evt) {
// console.log('onload: ', evt.target.result);
console.log('onload转换base64后');
resolve(evt.target.result)
}
fileReader.onerror = function(error) {
console.log('fileReader', error);
}
fileReader.readAsDataURL(file)
}, function(error) {
console.log('entry.file',error);
})
}, function(error) {
console.log('plus.io.resolveLocalFileSystemURL',error);
})
});
}
//调用
await this.pathToBase64App(url)
返回结果:
然后我发现临时路径转成base64后真的解决了跨域问题,到此就搞定不能保存的问题了