html5如何解决在网页长按保存图片问题

html5如何解决在网页长按保存图片问题

这篇文章给大家分享的是有关html5如何解决在网页长按保存图片问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

下面是详细的步骤：

1. html2canvas截屏

保存的图片节点最好是img标签： 想要截屏的节点最好是img标签的图片，经测试如果是 background-image 会有点模糊，需要特别注意下。

npmihtml2canvas--saveimporthtml2canvasfrom'html2canvas';//想要保存的图片节点constdom=document.querySelector('img');//创建一个新的canvasconstCanvas=document.createElement('canvas');constwidth=document.body.offsetWidth;//可见屏幕的宽constheight=document.body.offsetHeight;//可见屏幕的高constscale=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)=>{constcontext=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){constretCanvas=document.createElement('canvas');constretCtx=retCanvas.getContext('2d');retCanvas.width=width;retCanvas.height=height;retCtx.drawImage(canvas,0,0,width,height,0,0,width,height);constimg=document.createElement('img');img.src=retCanvas.toDataURL('image/jpeg');//可以根据需要更改格式returnimg;}

3. 长按保存图片

先实现一个长按的方法，长按之后把生成的图片append到body，透明浮在屏幕上。

//封装一个长按方法longPress(fn){lettimeout=0;const$this=this;for(leti=0;i<$this.length;i++){$this[i].addEventListener('touchstart',()=>{timeout=setTimeout(fn,800);//长按时间超过800ms，则执行传入的方法},false);$this[i].addEventListener('touchend',()=>{clearTimeout(timeout);//长按时间少于800ms，不会执行传入的方法},false);}}//添加生成的图片到bodyconstimg=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){lettimeout=0;const$this=this;for(leti=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(){//想要保存的图片节点constdom=document.querySelector('img');//创建一个新的canvasconstCanvas=document.createElement('canvas');constwidth=document.body.offsetWidth;//可见屏幕的宽constheight=document.body.offsetHeight;//可见屏幕的高constscale=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)=>{constcontext=canvas.getContext('2d');//关闭抗锯齿形context.mozImageSmoothingEnabled=false;context.webkitImageSmoothingEnabled=false;context.msImageSmoothingEnabled=false;context.imageSmoothingEnabled=false;//canvas转化为图片constimg=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){constretCanvas=document.createElement('canvas');constretCtx=retCanvas.getContext('2d');retCanvas.width=width;retCanvas.height=height;retCtx.drawImage(canvas,0,0,width,height,0,0,width,height);constimg=document.createElement('img');img.src=retCanvas.toDataURL('image/jpeg');//可以根据需要更改格式returnimg;}

感谢各位的阅读！关于“html5如何解决在网页长按保存图片问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！