前端Vue知识点1(图片下载)

vue打包成app之后图片下载

试过这种方法

downloadIamge(imgsrc, name) {//下载图片地址和图片名
	var image = new Image();
	// 解决跨域 Canvas 污染问题
	image.setAttribute("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"); //得到图片的base64编码数据
	  var url = imgsrc;
	  var a = document.createElement("a"); // 生成一个a元素
	  var event = new MouseEvent("click"); // 创建一个点击事件
	  a.download = name || "photo"; // 设置图片名称
	  a.href = url; // 将生成的URL设置为a.href属性
	  a.dispatchEvent(event); // 触发a的单击事件
	};
	image.src = imgsrc;
 },
  save(){
    this.$http.post('/pictureInfo',{
      imgUrl:this.dataImg
    }).then(res =>{
      this.dataImgs = 'data:image/png;base64,' + res.data
    })
   this.downloadIamge(this.dataImgs,'chengben')
   console.log(this.dataImgs) //base64编码格式
  },

但是电脑是可以下载的，打包成app之后就一直显示下载失败，在电脑端也有一个问题就是头一次下载要点击两次，我这里应该是在按钮里面生成了一个a标签所以出现的问题

还试过这种方法

saveFile(data, filename) {
	 const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
	  save_link.href = data;
	  save_link.download = filename;
	
	  const event = document.createEvent('MouseEvents');
	  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	  save_link.dispatchEvent(event);
},
  save(){
      this.$http.post('/pictureInfo',{
        imgUrl:this.dataImg
      }).then(res =>{
        this.dataImgs = 'data:image/png;base64,' + res.data
      })
     this.saveFile(this.dataImgs,'tpc') //这里的this.dataImgs也是base64编码格式的
  },

出现的问题和上述一样，也是只能电脑端下载，打包之后下载失败，也是头一次下载要点击两次

最后的解决方案就是

save() {
     var that = this
      if(!window.plus) return;
          var pant = this.dataImg //这里的图片是http式的图片地址
          plus.gallery.save(pant, function () {
            //强制每一次点击下载后相册自动刷新
            var main = plus.android.runtimeMainActivity();
            var intent= plus.android.importClass('android.content.Intent');
            var Uri= plus.android.importClass('android.net.Uri');
            main.sendBroadcast(new intent(intent.ACTION_MEDIA_SCANNER_SCAN_FILE, Uri.parse(pant)));
            console.log('保存成功')
          },function(){
            console.log('保存失败')
      });
},

这个打包成app后是可以用的，但是在电脑端不可以用（点击之后没有然后效果的那种）也有一个小问题就是不能重名，它只会覆盖而不会重新新建一个，如果想看效果建议每次点击之前把相册里面上次测试点击下载的图片删掉（这个小米手机好像不行=-=）