通过canvas实现保存图片，

• 大家好，做前端一年多了最近跳槽到一家做电商公司，碰到问题大多都是之前公司从来没有遇到的过的T_T,好啦，大家还是看代码吧 _.

• 在做app时候有一个功能需要长按保存，大家都知道这个功能浏览器是可以自己实现的，但是如果是app的话，就不得不自己写了。
  1.css
  这里提醒一下大家，因为我是用vue框架开发运行时要把css分开来写

在这里插入代码片

.hs{
    transition all .3s linear;
    position fixed;
    left 0;
    right 0;
    bottom -101px
    height 85px;
    background #f4f5f6;
    >ul{
      display flex;
      flex-direction column;
      li{
        width 100%;
        box-sizing border-box;
        padding 14px 0;
        text-align center;
        background #fff;
        font-size 14px;
        display: flex;
        justify-content center;
        a{
          color #000;
        }
      }
    }
  }
  .button-shows{
    bottom 0;
    z-index 1000;
  }

html

  <div class="hs" :class="{'button-shows': isDeleting}">
    <ul>
      <li class="m_b_1" @click="backbtn">保存图片</li>
      <li class="backOff" @click="backOff">返回</li>
    </ul>
  </div>

script
在这里插入代码片/

/长按保存
      showDeleteButton() {
        clearInterval(this.Loop);//再次清空定时器，防止重复注册定时器
        this.Loop=setTimeout(()=>{
          this.isDeleting = true;
        },1000);
      },
      clearLoop() {
        clearInterval(this.Loop);
      },
      //图片保存到本地
      downloadIamge(imgsrc, name) {
        var image = new Image();
        image.setAttribute("crossOrigin", "anonymous");
        image.src = imgsrc;
        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");
          console.log(url);
          //得到图片的base64编码数据
          var a = document.createElement("a");
           // 生成一个a元素
          var event = new MouseEvent("click");
          // 创建一个单击事件
          a.href =url;
          a.download = name || "photo";
          // 设置图片名称    a.href = url; // 将生成的URL设置为a.href属性
          console.log(a.download);
          a.dispatchEvent(event);
          console.log( a.dispatchEvent(event));
          // 触发a的单击事件
        };
        console.log( image.src)
      },
      //取消
      backbtn(){
        this.downloadIamge(this.backURL, 'pic');
        console.log(this.backURL);
        //'http://192.168.1.226:8080/resources/style/system/manage/blue/images/logo.png'
      },