【vue2】实现长按图片保存功能

?

1 2 3 4 5

<span             :class="[$style.wxCode, isShow && $style['show']]"             @touchstart="touchStart()"             @touchend="touchEnd()"           ></span>

　　

ps.span元素为图片元素，我这里把图片设置为元素背景了，可以直接用img标签实现。以下是方法代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

showWxCode() {   this.isShow = true; }, touchEnd() {   //手指离开   clearTimeout(this.timer); }, touchStart() {   //手指触摸   clearTimeout(this.timer); //再次清空定时器，防止重复注册定时器   this.timer = setTimeout(() => {     this.downloadImage(require("./images/wx.jpg"), "wx");   }, 1000); }, downloadImage(imgsrc, name) {   //下载图片地址和图片名   let image = new Image();   // 解决跨域 Canvas 污染问题   image.setAttribute("crossOrigin", "anonymous");   image.onload = () => {     let canvas = document.createElement("canvas");     canvas.width = image.width;     canvas.height = image.height;     let context = canvas.getContext("2d");     context.drawImage(image, 0, 0, image.width, image.height);     let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据     let a = document.createElement("a"); // 生成一个a元素     let event = new MouseEvent("click"); // 创建一个单击事件     a.download = name || "photo"; // 设置图片名称     a.href = url; // 将生成的URL设置为a.href属性     a.dispatchEvent(event); // 触发a的单击事件   };   image.src = imgsrc; },