当代文学

一文彻底解决HTML5页面中长按保存图片功能 鹊桥仙赏析350字

  • 本站
  • 2019-06-21
  • 122已阅读
简介 本文详细介绍了如何在H5中实现长按保存图片的功能。 长按保存图片是现在一些宣传页H5中很常见的需求,但是js没有这样的能力,所以要么借助android或ios的原生能力,要么用canva

一文彻底解决HTML5页面中长按保存图片功能 鹊桥仙赏析350字

本文详细介绍了如何在H5中实现长按保存图片的功能。 长按保存图片是现在一些宣传页H5中很常见的需求,但是js没有这样的能力,所以要么借助android或ios的原生能力,要么用canvas自己画一个(截屏),相比较原生成本太高,且必须依赖于app,相对于流传性很广且跨平台的H5来说不合时宜,所以canvas成为我们常用的手段。

截屏保存的图片节点最好是img标签:想要截屏的节点最好是img标签的图片,经测试如果是background-image会有点模糊,需要特别注意下。 npmihtml2canvas--saveimporthtml2canvasfromhtml2canvas;//想要保存的图片节点constdom=(img);//创建一个新的canvasconstCanvas=(canvas);constwidth=;//可见屏幕的宽constheight=;//可见屏幕的高constscale=;//设备的devicePixelRadio//将Canvas画布放大scale倍,然后放在小的屏幕里,解决模糊问题=width*scale;=height*scale;(2d).scale(scale,scale);html2canvas(dom,{canvas:Canvas,scale,useCORS:true,logging:true,width:width+px,hegiht:height+px,}).then((canvas)={constcontext=(2d);//关闭抗锯齿形=false;=false;=false;=false;//canvas转化为图片canvas2Image(canvas,,);});转化为图片一般情况下转为jpeg格式就很不错了。

canvas2Image(canvas,,){constretCanvas=(canvas);constretCtx=(2d);=width;=height;(canvas,0,0,width,height,0,0,width,height);constimg=(img);=(image/jpeg);//可以根据需要更改格式returnimg;}3.长按保存图片先实现一个长按的方法,长按之后把生成的图片append到body,透明浮在屏幕上。 //封装一个长按方法longPress(fn){lettimeout=0;const$this=this;for(leti=0;i$;i++){$this[i].addEventListener(touchstart,()={timeout=setTimeout(fn,800);//长按时间超过800ms,则执行传入的方法},false);$this[i].addEventListener(touchend,()={clearTimeout(timeout);//长按时间少于800ms,不会执行传入的方法},false);}}//添加生成的图片到bodyconstimg=canvas2Image(canvas,,);(img);=width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;4.完整代码如下$.=function(fn){lettimeout=0;const$this=this;for(leti=0;i$;i++){$this[i].addEventListener(touchstart,()={timeout=setTimeout(fn,800);//长按时间超过800ms,则执行传入的方法},false);$this[i].addEventListener(touchend,()={clearTimeout(timeout);//长按时间少于800ms,不会执行传入的方法},false);}};$(img).longPress(()={saveImg();});saveImg(){//想要保存的图片节点constdom=(img);//创建一个新的canvasconstCanvas=(canvas);constwidth=;//可见屏幕的宽constheight=;//可见屏幕的高constscale=;//设备的devicePixelRatio//将Canvas画布放大scale倍,然后放在小的屏幕里,解决模糊问题=width*scale;=height*scale;(2d).scale(scale,scale);html2canvas(dom,{canvas:Canvas,scale,useCORS:true,logging:true,width:width+px,hegiht:height+px,}).then((canvas)={constcontext=(2d);//关闭抗锯齿形=false;=false;=false;=false;//canvas转化为图片constimg=canvas2Image(canvas,,);(img);=width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;}}canvas2Image(canvas,width,height){constretCanvas=(canvas);constretCtx=(2d);=width;=height;(canvas,0,0,width,height,0,0,width,height);constimg=(img);=(image/jpeg);//可以根据需要更改格式returnimg;}刚开始做的时候也是网上一堆文章乱看,不断的试错,最后愉快的实现了长按保存图片的功能,做完才发现也很简单哈,这篇文章完整的介绍了整个流程,拿走不谢!以上所述是小编给大家介绍的一文彻底解决HTML5页面中长按保存图片功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!。

Top