一版

html

<div id="target"><img src="./timg.jfif" id="img1" class="img1"></img>
</div>
$(function () {// 函数名longpress，参数为: 需长按元素的id、长按之后的逻辑函数funclongPress( function () {drawCanvas("img")})
}）

长按事件

function longPress(func) {var timeOutEvent = 0;var imgTags = document.querySelectorAll('img');console.log(imgTags.length)for (var index = 0; index < imgTags.length; index++) {const item = imgTags[index];console.log("foreach")item.addEventListener('touchstart', function (e) {console.log("touchstart")// 开启定时器前先清除定时器，防止重复触发clearTimeout(timeOutEvent);// 开启延时定时器timeOutEvent = window.setTimeout(function () {console.log("touchstart==============" + timeOutEvent)// 调用长按之后的逻辑函数funcfunc();}, 800); // 长按时间为300ms，可以自己设置});item.addEventListener('touchmove', function (e) {console.log("touchmove")e.preventDefault();// 长按过程中，手指是不能移动的，若移动则清除定时器，中断长按逻辑clearTimeout(timeOutEvent);e.preventDefault();/*若阻止默认事件，则在长按元素上滑动时，页面是不滚动的，按需求设置吧 */});item.addEventListener('touchend', function (e) {console.log("touchend")// 若手指离开屏幕时，时间小于我们设置的长按时间，则为点击事件，清除定时器，结束长按逻辑clearTimeout(timeOutEvent);});}}

下载js

（我在项目中没用到），做个备份

需要引入 <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

/*** 根据window.devicePixelRatio获取像素比*/function DPR() {if (window.devicePixelRatio && window.devicePixelRatio > 1) {return window.devicePixelRatio;}return 1;}/***  将传入值转为整数*/function parseValue(value) {return parseInt(value, 10);};
/*** 绘制canvas*/function drawCanvas(selector) {// 获取想要转换的 DOM 节点const dom = document.querySelector(selector);const box = window.getComputedStyle(dom);
//      DOM 节点计算后宽高const width = parseValue(box.width);const height = parseValue(box.height);// 获取像素比const scaleBy = DPR();// 创建自定义 canvas 元素const canvas = document.createElement('canvas');// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比canvas.width = width * scaleBy;canvas.height = height * scaleBy;// 设定 canvas css宽高为 DOM 节点宽高canvas.style.width = `${width}px`;canvas.style.height = `${height}px`;// 获取画笔const context = canvas.getContext('2d');// 将所有绘制内容放大像素比倍context.scale(scaleBy, scaleBy);// 将自定义 canvas 作为配置项传入，开始绘制html2canvas(dom, {canvas}).then((canvas) => {console.log(canvas)const context = canvas.getContext('2d');// 关闭抗锯齿形context.mozImageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;// canvas转化为图片const img = canvas2Image(canvas, canvas.width, canvas.height);saveFile(img.src, "312")console.log(img.src)});}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 = retCanvas.toDataURL('image/jpeg'); // 可以根据需要更改格式return img;}/*** 在本地进行文件保存* @param  {String} data     要保存到本地的图片数据* @param  {String} filename 文件名*/function 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);}

效果图

--------------------------------------我是分割线------------------------------------------------------

二版(贴合App)

html

<div>长按图片保存到图库<div id="target" style="width: 100px;height:auto;"><img id="img"src="image.png"alt="" style="width: 100%;height:auto;"></div></div>

js

function dialog_msg(element, msg, func) {console.log("dialog_msg")var dialogPanel = '<div class="show" style="text-align: center;width: 100vw;height: 30vh;' +'position: fixed;left: 50%;' +'transform: translateX(-50%);bottom: -32rem;' +'text-align: center;transition: bottom 1s ease;background-color: #ececec;">' +'<p style="border-top:5px solid #ececec;;border-bottom: 0.5px solid #ccc;margin: 0;' +'padding: 0.8rem 0;background-color: #fff;" id="saveImg">保存图片</p>' +'<p style="border-top: 5px solid #ececec;margin: 0;padding: 0.8rem 0;background-color: #fff;" id="cancel">取消</p>' +'</div>'$(element).after(dialogPanel);$('.show').css("bottom", "0rem")$('#saveImg').bind('click', function () {func()});$('#cancel').bind('click', function () {console.log()//移除上一次创建的窗口$(this).parent().remove();// $('.show').css("bottom", "-32rem")});}function longPress(func) {var timeOutEvent;var imgTags = document.querySelectorAll('img');console.log(timeOutEvent)for (var index = 0; index < imgTags.length; index++) {const item = imgTags[index];console.log("foreach")item.addEventListener('touchstart', function (e) {console.log("touchstart")// 开启定时器前先清除定时器，防止重复触发clearTimeout(timeOutEvent);console.log("foreach_____________"+timeOutEvent)// 开启延时定时器timeOutEvent = window.setTimeout(function () {console.log("touchstart==============" + timeOutEvent)// 调用长按之后的逻辑函数funcdialog_msg(item, "是否确认保存图片", func)}, 300); // 长按时间为300ms，可以自己设置});item.addEventListener('touchmove', function (e) {console.log("touchmove")e.preventDefault();// 长按过程中，手指是不能移动的，若移动则清除定时器，中断长按逻辑clearTimeout(timeOutEvent);e.preventDefault();/*若阻止默认事件，则在长按元素上滑动时，页面是不滚动的，按需求设置吧 */});item.addEventListener('touchend', function (e) {console.log("touchend")// 若手指离开屏幕时，时间小于我们设置的长按时间，则为点击事件，清除定时器，结束长按逻辑clearTimeout(timeOutEvent);});}
}

效果图