网站页面做成自适应优缺点,为什么我的网站百度不收录,中秋节网页设计实训报告,织梦网暂时关闭网站本文详细介绍了如何在H5中实现长按保存图片的功能。长按保存图片是现在一些宣传页H5中很常见的需求#xff0c;但是js没有这样的能力#xff0c;所以要么借助android或ios的原生能力,要么用canvas自己画一个(截屏)#xff0c;相比较原生成本太高#xff0c;且必须依赖于app…本文详细介绍了如何在H5中实现长按保存图片的功能。长按保存图片是现在一些宣传页H5中很常见的需求但是js没有这样的能力所以要么借助android或ios的原生能力,要么用canvas自己画一个(截屏)相比较原生成本太高且必须依赖于app相对于流传性很广且跨平台的H5来说不合时宜所以 canvas 成为我们常用的手段。下面是详细的步骤1. html2canvas截屏保存的图片节点最好是img标签 想要截屏的节点最好是img标签的图片经测试如果是 background-image 会有点模糊需要特别注意下。npm i html2canvas --saveimport html2canvas from html2canvas;// 想要保存的图片节点const dom document.querySelector(img);// 创建一个新的canvasconst Canvas document.createElement(canvas);const width document.body.offsetWidth; // 可见屏幕的宽const height document.body.offsetHeight; // 可见屏幕的高const scale window.devicePixelRadio; // 设备的devicePixelRadio// 将Canvas画布放大scale倍然后放在小的屏幕里解决模糊问题Canvas.width width * scale;Canvas.height height * scale;Canvas.getContext(2d).scale(scale, scale);html2canvas(dom, {canvas: Canvas,scale,useCORS: true,logging: true,width: width px,hegiht: height px,}).then((canvas) {const context canvas.getContext(2d);// 关闭抗锯齿形context.mozImageSmoothingEnabled false;context.webkitImageSmoothingEnabled false;context.msImageSmoothingEnabled false;context.imageSmoothingEnabled false;// canvas转化为图片canvas2Image(canvas, canvas.width, canvas.height);});2. canvas2Image转化为图片一般情况下转为jpeg格式就很不错了。canvas2Image(canvas, canvas.width, canvas.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;}3. 长按保存图片先实现一个长按的方法长按之后把生成的图片append到body透明浮在屏幕上。// 封装一个长按方法longPress(fn) {let timeout 0;const $this this;for (let i 0; i $this.length; i) {$this[i].addEventListener(touchstart, () {timeout setTimeout(fn, 800); // 长按时间超过800ms则执行传入的方法}, false);$this[i].addEventListener(touchend, () {clearTimeout(timeout); // 长按时间少于800ms不会执行传入的方法}, false);}}// 添加生成的图片到bodyconst img canvas2Image(canvas, canvas.width, canvas.height);document.body.appendChild(img);img.style.cssText width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;;4. 完整代码如下$.fn.longPress function(fn) {let timeout 0;const $this this;for (let i 0; i $this.length; i) {$this[i].addEventListener(touchstart, () {timeout setTimeout(fn, 800); // 长按时间超过800ms则执行传入的方法}, false);$this[i].addEventListener(touchend, () {clearTimeout(timeout); // 长按时间少于800ms不会执行传入的方法}, false);}};$(img).longPress(() {saveImg();});saveImg() {// 想要保存的图片节点const dom document.querySelector(img);// 创建一个新的canvasconst Canvas document.createElement(canvas);const width document.body.offsetWidth; // 可见屏幕的宽const height document.body.offsetHeight; // 可见屏幕的高const scale window.devicePixelRatio; // 设备的devicePixelRatio// 将Canvas画布放大scale倍然后放在小的屏幕里解决模糊问题Canvas.width width * scale;Canvas.height height * scale;Canvas.getContext(2d).scale(scale, scale);html2canvas(dom, {canvas: Canvas,scale,useCORS: true,logging: true,width: width px,hegiht: height px,}).then((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);document.body.appendChild(img);img.style.cssText width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;;}}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;}刚开始做的时候也是网上一堆文章乱看不断的试错最后愉快的实现了长按保存图片的功能做完才发现也很简单哈这篇文章完整的介绍了整个流程拿走不谢总结以上所述是小编给大家介绍的一文彻底解决HTML5页面中长按保存图片功能希望对大家有所帮助如果大家有任何疑问欢迎给我留言小编会及时回复大家的
