h5 canvas 多张图片合成并保存到手机相册

需求：多张图片合成一张并下载

思路：

1.htmlDom转为canvas

2.toDataUrl() 可将canvas转为base64格式

3.创建a标签，利用a标签的download属性触发click事件，实现下载

先来用两张本地图片合成：

data() {
    return {
      img1: require('../../../assets/images/clock/111/he-bg.png'),
      img2: require('../../../assets/images/clock/111/timg.png'),
    }
  },

　　picTogether() {
      var bg =document.getElementById("bg");
      var w = bg.width;
      var h = bg.height;
      var myImage = new Image();
      //背景图片 你自己本地的图片或者在线图片
      myImage.src = this.img1;  
      myImage.setAttribute('crossOrigin', 'anonymous');

      myImage.onload = ()=>{
        var canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        var ctx=canvas.getContext("2d");
        ctx.drawImage(bg, 0, 0, ctx.canvas.width, ctx.canvas.height);

        var img= new Image();
        img.src= this.img2;
        img.onload = () => {
          ctx.drawImage(img, 15, 120, ctx.canvas.width-30, ctx.canvas.height/2+100);
          this.downUpload('海报.png', canvas.toDataURL("image/png"));
        }
      }
    },

　　downUpload(fileName,content) {
      let aLink = document.createElement('a');
      let blob = this.base64ToBlob(content); //new Blob([content]);
      
      let evt = document.createEvent("HTMLEvents");
      //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      evt.initEvent("click", true, true);
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      this.savePicHref(aLink.href)
      aLink.click()
    },
    //base64转blob
    base64ToBlob(code) {
      let parts = code.split(';base64,');
      let contentType = parts[0].split(':')[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {type: contentType});
    },

两张本地图片合成和下载貌似做好了，如果图片换成用户上传的图片呢？如果不止两张图片呢？

如果是上传到服务器的图片，那么合成会存在跨域的问题，解决是把上传到服务器端图片下载到本地

　　_downloadImg() {
      downloadImg({"fileName":this.fileName}).then(res =>{
        this.upImg = res.datas.fileContent
      })
    },

如果是多张图片合成，那么就一张张的画，也就是等图片onload成功后处理，这里用的是函数自调用

picTogether(){
      var self = this;
      var imgsrcArray = [
        require('../../../assets/images/clock/111/clock-day2.png'),
        this.upImg,
        require('../../../assets/images/clock/111/wenzi.png'),
        require('../../../assets/images/clock/111/bo1.png')
      ];
      var bg =document.getElementById("bg");
      var w = bg.width;
      var h = bg.height;
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = w;
      canvas.height = h;
      
      var imglen = imgsrcArray.length;
      var drawimg = (function f(n){
        if(n < imglen){
          var img = new Image();
          img.crossOrigin = 'Anonymous'; //解决跨域问题
          img.onload = function(){
            if(n == 0){
              ctx.drawImage(img,0,0,ctx.canvas.width, ctx.canvas.height);
            }else if(n == 1){
              ctx.drawImage(img,25,100,ctx.canvas.width-50,ctx.canvas.height-230);
            } else if(n==2){
              ctx.drawImage(img,200,65,170,100);
            } else{
              ctx.drawImage(img,0,430,ctx.canvas.width,165);
              ctx.font="16px Arial";
              ctx.fillText(`${self.fullName}`,20,480);
              ctx.fillStyle ="#A92E02";
              ctx.fillText(`连续打卡第 ${self.userInfo.num} 天`,20,505);
            }
            f(n+1);
          }
          img.src = imgsrcArray[n];
        }else{
          self.downUpload('海报.png', canvas.toDataURL("image/png"));
        }
      })(0);
    },

到这里多张图片合成也做好了，也没有跨域问题了，pc端下载也没问题，

但是手机端去操作发现，保存图片没反应，相册也没有，

行不通，改变思路，用长按保存来做：

ios长按保存可以成功，查看相册也成功保存了合成的图片，

但是安卓手机，长按有菜单提示，但是保存的时候，提示“保存图片到手机失败”，查阅资料发现

安卓手机不支持blob格式的图片保存，

既然这种格式不支持，是不是其他格式可以支持呢？

答案是可以的。

可以把之前生成的base64格式转为jpg或png格式

downUpload(fileName,content) {
      this.downLoadImage(content)
},
 downLoadImage(content) {
      let form = new FormData()  // FormData 对象
      let bl = this.base64ToBlob(content)
      form.append("file", bl, "file_"+ Date.parse(new Date())+".jpg")
      this._postImg(form);
 },

_postImg(file) {
      postImg(file).then(res => {
        let imgSrc = process.env.BASE_API + this.imgPathMid + res.datas[0].relativePath
        console.log(imgSrc)
      })
  }

　这样手机端长按保存图片就可以了，ios和安卓都能保存。

h5 canvas 多张图片合成并保存到手机相册

相关

标签