h5生成图片长按保存图片,网页图片长按不能保存
本文详细介绍了如何在H5中实现长按保存图片的功能。
长按保存图片是现在一些宣传页H5中很常见的需求，但是射流研究…没有这样的能力，所以要么借助机器人或ios的原生能力，要么用帆布自己画一个（截屏),相比较原生成本太高，且必须依赖于app，相对于流传性很广且跨平台的H5来说不合时宜，所以帆布成为我们常用的手段。
下面是详细的步骤：
1. html2canvas截屏
保存的图片节点最好是图片标签:想要截屏的节点最好是图片标签的图片，经测试如果是背景图像会有点模糊，需要特别注意下。
NPM I html2canvas-save从" html 2可以增值"导入html 2可以vas//想要保存的图片节点const DOM=文档。查询选择器(“img”)；//创建一个新的canvasconst Canvas=文档。createelement(“Canvas”)；常数宽度=文档。身体。offsetwidth//可见屏幕的宽const height=文档。身体。偏移高度；//可见屏幕的高常数标度=窗口。设备像素比例；//设备的devicePixelRadio//将帆布画布放大规模倍，然后放在小的屏幕里，解决模糊问题canvas . width=width * scale canvas . height=height * scale canvas . get context( 2d ).尺度（尺度，尺度);html2canvas(dom，{ canvas: Canvas，scale，useCORS: true，logging: true，width: width px ，hegiht: height px ，}).然后((canvas)={ const context=canvas。获取上下文(“2d”)；//关闭抗锯齿形语境。moziimagesmoothingenabled=false；语境。webkitimagesmoothingenabled=false；语境。msimagesmoothingenabled=false语境。imagesmoothingenabled=false//画布转化为图片canvas2Image(canvas，canvas.width，canvas。身高)；});2. canvas2Image转化为图片
一般情况下转为联合图象专家组格式就很不错了。
canvas2Image(canvas，canvas.width，canvas。高度){ const ret canvas=document。createelement(“canvas”)；const retCtx=ret canvas。获取上下文(“2d”)；ret canvas . width=widthretcanvas . height=heightrectx . draw image(canvas，0，0，width，height，0，0，width，height)；const img=文档。createelement(“img”)；img。src=ret画布。toda taurl( image/JPEG )；//可以根据需要更改格式返回img}3. 长按保存图片
先实现一个长按的方法，长按之后把生成的图片附加到身体，透明浮在屏幕上。
//封装一个长按方法长按(fn){ let time out=0；const $ this=thisfor(设I=0；我$这个。长度我){ $这个[我]。addEventListener(touchstart ，()={ timeout=setTimeout(fn，800)；//长按时间超过800毫秒，则执行传入的方法},假);$这个[我]。addEventListener(touchend ，()={ clear time out(time out))；//长按时间少于800毫秒，不会执行传入的方法},假);}}//添加生成的图片到body const img=canvas 2 image(canvas，canvas.width，canvas。身高)；文档。身体。appendchild(img)；img。风格。CSS text= width:100%；身高：100%;位置：绝对；top:0；左：0;右：0;底部：0;不透明度：0;；4.完整代码如下
$ .fn。长按=function(fn){ let time out=0；const $ this=thisfor(设I=0；我$这个。长度我){ $这个[我]。addEventListener(touchstart ，()={ timeout=setTimeout(fn，800)；//长按时间超过800毫秒，则执行传入的方法},假);$这个[我]。addEventListener(touchend ，()={ clear time out(time out))；//长按时间少于800毫秒，不会执行传入的方法},假);}};$(img ).长按(()={ save img()；});saveImg() { //想要保存的图片节点const DOM=文档。查询选择器(“img”)；//创建一个新的Canvas const Canvas=文档。createelement(“Canvas”)；常数宽度=文档。身体。offsetwidth//可见屏幕的宽const height=文档。身体。偏移高度；//可见屏幕的高常数标度=窗口。devicepixelrratio//设备的devicepixelrratio//将帆布画布放大规模倍，然后放在小的屏幕里，解决模糊问题canvas . width=width * scale canvas . height=height * scale canvas . get context( 2d ).尺度（尺度，尺度);html2canvas(dom，{ canvas: Canvas，scale，useCORS: true，logging: true，width: width px ，hegiht: height px ，}).然后((canvas)={ const context=canvas。获取上下文(“2d”)；//关闭抗锯齿形语境。moziimagesmoothingenabled=false；语境。webkitimagesmoothingenabled=false；语境。msimagesmoothingenabled=false语境。imagesmoothingenabled=false//画布转化为图片const img=canvas2Image(canvas，canvas.width，canvas。身高)；文档。身体。appendchild(img)；img。风格。CSS text= width:100%；身高：100%;位置：绝对；top:0；左：0;右：0;底部：0;不透明度：0;；}}canvas2Image(canvas，宽度，高度){ const ret canvas=document。createelement(“canvas”)；const retCtx=ret canvas。获取上下文(“2d”)；ret canvas . width=widthretcanvas . height=heightrectx . draw image(canvas，0，0，width，height，0，0，width，height)；const img=文档。createelement(“img”)；img。src=ret画布。toda taurl( image/JPEG )；//可以根据需要更改格式返回img}刚开始做的时候也是网上一堆文章乱看，不断的试错，最后愉快的实现了长按保存图片的功能，做完才发现也很简单哈，这篇文章完整的介绍了整个流程，拿走不谢！
总结
以上所述是小编给大家介绍的一文彻底解决HTML5页面中长按保存图片功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。