Cordova realizes the function of saving pictures to the album
Stepping on the pit record:
Before Baidu, many of them pointed to these github plug-ins, but when I introduced them, they would report errors in the plug-in source code and could not be packaged;
(I was impatient to look at the plug-in source code and chose to give up) Maybe the masters can solve this problem in use
Later, I found several plug-ins and finally found a pro-test that can be used !
Today's time: 2020-8-21
Plug-in name: [email protected] For details, you can
read the name on Baidu and you should know the general idea. Draw the picture into the canvas, and then convert it to base64 format, and then save it to the camera roll!
code:
function getBase64Image(img) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL('image/png');
return dataURL;
}
function main() {
var img = new Image();//创建新的图片对象
img.setAttribute('crossOrigin', 'Anonymous'); //解决跨域
img.src = ' ' //此处自己替换图片的地址
img.onload = function () {
var data = getBase64Image(img);
var img1 = document.createElement('img');
img1.src = data;
window.cordova.base64ToGallery(
data,
{
prefix: 'img_',
mediaScanner: true
},
function (path) {
console.log(path);
alert('提示')
},
function (err) {
console.error(err);
alert('提示')
}
);
}
}
main();
Precautions:
1. img.setAttribute('crossOrigin', 'Anonymous'); 解决图片跨域问题，针对h5! 如果app的话，不用考虑跨域问题;
2. 安卓端注意，需要打开系统的相册存储权限（开发过程中不需要注意）;
3. ios端需要配置系统的相册存储权限（开发过程，编译打包时需要注意）;
4. 图片可以用放到oss上面或者本地图片也可以，本地地址需要注意路径;
5.保存成功后，到相册中查看，不要到照片中查看！
https://www.jianshu.com/p/d19235cec2e0
To continue reading;
The writing here is basically completed, but in the follow-up test, it is found that ios11 and above, saving pictures will cause flashback phenomenon ;
continue to solve the problem; find the error point " NSPhotoLibraryAddUsageDescription"
in xcode ; Baidu solve; iOS 11 picture save album permission NSPhotoLibraryAddUsageDescription https://www.jianshu.com/p/a6f51cc615e9 NSPhotoLibraryAddUsageDescription is a new privacy rule introduced by iOS 11. It will ask when writing to the album, and if there is no one, it will crash.
Then rebuild and try again;
I hope it can help you, come on, don't give up! !