图片保存和下载（涉及cordova打包的app）（个人踩坑）

下载方法

图片下载有多种方法可以实现，下面将为你展示各种方法

1.通过原生JavaScript实现（通过cordova打包后的APP安装到手机无法实现下载）

话不多说直接上代码
HTML代码：

<img class="theimg" :src="picUrl">
<div @click="downloadImg('.theimg',picUrl)"></div>
<!-- @click="downloadIamge( ‘参数1’,‘参数2’ )" 参数1为标签选择器，参数二维下载图片的地址 -->

JavaScript的代码：

downloadImg(selector, name) {
    	var image = new Image()
			    // 解决跨域 Canvas 污染问题
			    image.setAttribute('crossOrigin', 'anonymous')
			    // crossOrigin为属性，anonymous为属性值
			    image.onload = function () {
			        var canvas = document.createElement('canvas')
			        canvas.width = image.width
			        canvas.height = image.height
			
			        var context = canvas.getContext('2d')
			        context.drawImage(image, 0, 0, image.width, image.height)
			        var url = canvas.toDataURL('image/png')
			
			        // 生成一个a元素
			        var a = document.createElement('a')
			        // 创建一个单击事件
			        var event = new MouseEvent('click')
			
			        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
			        a.download = name || '下载图片名称'
			        // 将生成的URL设置为a.href属性
			        a.href = url
			
			        // 触发a的单击事件
			        a.dispatchEvent(event)
			    }
			
			    image.src = this.serviceInfo.picURL
    },

这个方法是通过原生JavaScript生成一个canvas然后转化为base64最后通过a标签下载实现。这个好像在app里下载无法实现

2.通过a标签跳转至浏览器打开图片

这个方法也有一些缺陷，点击后是打开手机浏览器来访问这张图片，注意，如果a标签被禁止默认行为是无法跳转至浏览器的，并且图片一般是通过URL访问的。这个代码相对来说就没什么技术含量了。

<a href="这里填入你的图片URL地址"></a>

3.通过cordova插件实现图片下载，适用于cordova生产的APP

项目框架VUE，话不多说直接上代码

<img class="join-img" :src="imgURL" alt=""  @touchstart="gtouchstart(imgURL)"
               @touchmove="gtouchmove()" @touchend="gtouchend()">
<mt-actionsheet
      :actions="actions"
      data-
      v-model="sheetVisible">
    </mt-actionsheet>
    
<script>
let houseRateImg;
export default{
	data () {
    return {
      imgURL: '',
      sheetVisible: false,
      timeOutEvent: 0,
      // 这里调用保存权限需要在cordova里面加入三个插件
      // 命令分别是 cordova plugin add cordova-plugin-file-transfer
      // cordova plugin add cordova-plugin-save-image
      // cordova plugin add cordova-plugin-camera
      actions: [{
          name: '保存图片',
          method: function (e) {
            downloadImage();
            function downloadImage() {
              let currentItem = [{name: houseRateImg, path: '.jpg'}];
              let fileTransfer = new FileTransfer();
              let fileURL = cordova.file.dataDirectory + currentItem[0].path;
              fileTransfer.download(currentItem[0].name, fileURL, saveToGallery, function () {
                Toast('保存失败');
              });
            }
            function saveToGallery(entry) {
              cordova.plugins.imagesaver.saveImageToGallery(entry.toURL(), function () {
                  Toast('保存成功');
                },
                function () {
                  Toast('保存失败，请检查权限');
                });
            }
          }
        }],
    }
  },
  methods:{
	//开始按
      gtouchstart: function (item) {
        let self = this;
        self.timeOutEvent = setTimeout(function () {
          self.longPress(item)
        }, 500);
        return false;
      },
      //不满这个时间
      gtouchend: function () {
        clearTimeout(this.timeOutEvent);//清除定时器
        return false;
      },
      //手指有移动
      gtouchmove: function () {
        clearTimeout(this.timeOutEvent);
        this.timeOutEvent = 0;
      },
      //长按事件
      longPress: function (item) {
        this.sheetVisible = true;
        houseRateImg = item
      },
	},

}
</script>

下面是没有作者没有实现的一些方法，如果有实现的大佬欢迎指导

1.H5官方提供的API（点击前往H5的API）

H5提供了一个downloader的API 使用方法为：

<script>
Download plus.downloader.createDownload(url, options, completedCB);
//url: ( String ) 必选 要下载文件资源地址
//要下载文件的url地址，仅支持网络资源地址，支持http或https协议。 允许创建多个相同url地址的下载任务。 注意：如果url地址中包含中文或空格等，需要进行urlencode转换。

//options: ( DownloadOptions ) 可选 下载任务的参数
//可通过此参数设置下载任务属性，如保存文件路径、下载优先级等。

//completedCB: ( DownloadCompletedCallback ) 可选 下载任务完成回调函数
//当下载任务下载完成时触发，成功或失败都会触发。
</script>

具体使用方法：

<script>
// 创建下载任务
function createDownload() {
	var dtask = plus.downloader.createDownload("http://www.abc.com/a.doc", {}, function(d, status){
		// 下载完成
		if(status == 200){ 
			console.log("Download success: " + d.filename);
		} else {
			 console.log("Download failed: " + status); 
		}  
	});
	//dtask.addEventListener("statechanged", onStateChanged, false);
	dtask.start(); 
}
</script>

还有一个Gallery模块管理系统相册的API，
使用方法：

<script>
void plus.gallery.save( path, successCB, errorCB );
//path : ( String ) 必选 要保存到系统相册中的文件文件地址
//succesCB: ( GallerySuccessCallback ) 必选 保存文件到系统相册中成功的回调函数
//errorCB: ( GalleryErrorCallback ) 可选 保存文件到系统相册中失败的回调函数
</script>

具体使用方法：

<script>
// 保存图片到相册中 
function savePicture() {
	plus.gallery.save( "_doc/a.jpg", function () {
		alert( "保存图片到相册成功" );
	} );
}
</script>

大家可以参考这篇文章https://juejin.cn/post/6844903513848283143

以上是个人在保存图片中采用的方法，有错误的地方还望私信指正，谢谢阅读。