开发笔记2-js实现长按保存分享图片开发笔记2-js实现长按保存分享

在移动H5开发中，长按保存分享图片到手机相册算是必需功能。实现原理：

下载html2canvas库的JS文件导入到项目中-->通过html2canvas把需要保存为图片的dom节点绘制成canvas-->使用canvas获取图片的base64编码新建图片对象，显示在最顶层，透明度为0-->长按触发浏览器保存图片机制

代码实例：
html:

000再来一次保存分享

文章图片
页面demo 【开发笔记2-js实现长按保存分享图片】js:

//因js没有长按事件，需要自行封装，函数名longPress，参数为：需长按元素的id、长按之后的逻辑函数func function longPress(id, func) { var timeOutEvent; document.querySelector("#" + id).addEventListener("touchstart", function (e) { //开启定时器前先清除定时器，防止重复触发 clearTimeout(timeOutEvent); //开启延时定时器 timeOutEvent = setTimeout(function () { //调用长按之后的逻辑函数func func(); }, 300); //长按时间为300ms，可以自己设置 }); document.querySelector("#" + id).addEventListener("touchmove", function (e) { //长按过程中，手指是不能移动的，若移动则清除定时器，中断长按逻辑 clearTimeout(timeOutEvent); /* e.preventDefault() --> 若阻止默认事件，则在长按元素上滑动时，页面是不滚动的，按需求设置吧 */ }); document.querySelector("#" + id).addEventListener("touchend", function (e) { //若手指离开屏幕，时间小于我们设置的长按时间，则为点击事件，清除定时器，结束长按逻辑 clearTimeout(timeOutEvent); }) }//保存图片 function saveSharePic() { // 想要保存的图片节点 const dom = document.getElementById("picShare"); // 创建一个新的canvas const canvas = document.createElement("canvas"); const width = document.body.offsetWidth; // 可见屏幕的宽 const height = document.body.offsetHeight; // 可见屏幕的高 console.log("可见屏幕宽高：" + document.body.offsetWidth + "、" + document.body.offsetHeight); const scale = window.devicePixelRatio; // 设备的devicePixelRatio // 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题 canvas.width = width * scale; canvas.height = height * scale; console.log("canvas宽高：" + canvas.width + "、" + canvas.height); canvas.getContext('2d').scale(scale, scale); // dom节点绘制成canvas html2canvas(dom).then(function (canvas) { const img = canvas2Image(canvas, canvas.width, canvas.height); img.style.cssText = "width:100%; position:absolute; top:0; left:0; opacity:0; z-index:999; "; console.log("图片宽高：" + img.width + "、" + img.height); document.body.appendChild(img); }); }//利用canvas获取图片的base64编码创建图片对象 function canvas2Image(canvas, width, height) { const retCanvas = document.createElement("canvas"); const retCtx = retCanvas.getContext("2d"); retCanvas.width = width; retCanvas.height = height; retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height); const img = document.createElement("img"); img.src = https://www.it610.com/article/retCanvas.toDataURL("image/png", 1); // 可以根据需要更改格式 return img; }