通过js插件html2canvas实现

a.下载html2canvas.js（github地址：https://github.com/niklasvh/html2canvas/releases/、官网地址：http://html2canvas.hertzen.com/）

b.个人需求实现

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no" /><meta name="apple-mobile-web-app-status-bar-style" content="black"><title>截图功能</title>
</head>
<script src="/js/jquery.js"></script>
<body>
<!-- 放置图片容器 -->
<div id="canvasContainer"><div class="poster_box"><img src="https://img-blog.csdnimg.cn/20200605172234757.png" alt=""></div>
</div>
</body>
</html>
<script src="/html2canvas/html2canvas.js"></script>
<script>// 创建一个新的canvaslet Canvas = document.createElement('canvas');let width = document.getElementById('canvasContainer').width;  // 画布指定区域的宽let height = document.getElementById('canvasContainer').height;  // 画图指定区域的高let scale = DPR(); // 设备的devicePixelRadio// 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题Canvas.width = width * scale;Canvas.height = height * scale;Canvas.getContext('2d').scale(scale, scale);html2canvas(document.getElementById('canvasContainer'),{canvas: Canvas,scale,logging: true,useCORS:true, // 允许使用跨域图片allowTaint: false, // 不允许跨域图片污染画布width: width + 'px',height: height + 'px',}).then(function(canvas) {let context = canvas.getContext('2d');// 关闭抗锯齿形context.mozImageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;// canvas转化为图片let canvasImg = canvas2Image(canvas, canvas.width, canvas.height);document.body.appendChild(canvasImg);$(canvasImg).css('width','100%').css('height','100%').css('position','absolute').css('top','0').css('left','0').css('right','0').css('bottom','0').css('opacity','0');})/*** 画步转换成图片*/function canvas2Image(canvas, width, height) {let retCanvas = document.createElement('canvas');let retCtx = retCanvas.getContext('2d');retCanvas.width = width;retCanvas.height = height;retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height);let img = document.createElement('img');img.src = retCanvas.toDataURL('image/jpeg');  // 可以根据需要更改格式return img;}/*** 根据window.devicePixelRatio获取像素比*/function DPR() {if (window.devicePixelRatio && window.devicePixelRatio > 1) {return window.devicePixelRatio;}return 1;}
</script>

c.参考实现文档

https://segmentfault.com/a/1190000021275782

https://www.jianshu.com/p/41ff1d103d3f（JS获取图片实际高度）

https://juejin.im/post/6844903861866463239#heading-1

实现[微信]H5长按保存图片功能相关推荐

html页面长按保存图片,h5长按保存图片
实现思路: 1.html 转为canvas 2.canvas 转为图片 3.下载保存图片 1.html 转为canvas 方案1:可以使用canvas 绘制方案2:使用插件 html2canvas ...
h5页面保存img_从微信H5点击保存图片说起
微信H5里保存图片,大都是通过长按操作,弹起actionsheet保存照片.但我们的部分用户是老年群体,不知道怎么进行"长按"操作.考虑到这个因素,产品要求实现点击保存按钮来保存图 ...
html5长按保存,iOS UIWebView仿微信H5页面实现长按保存图片功能
最终实现效果图选择放这张效果图的时候很是忐忑啊,不知道会不会被和谐掉. 拿到需求之后分析了一下,其实主要功能点就是如何才能通过手指按压位置获取到相应的图片资源.是不是很抓狂,如果考虑到设备适配,谁知 ...
微信H5 长按二维码识别不了
解决办法: .qrcode{padding:200px 0 0 200px !important;margin:-200px 0 0 -200px !important;position: relat ...
安卓手机微信H5中无法长按保存base64图片、blob形式图片的解决办法
解决实现安卓[微信]H5长按无法保存和分享base64图片问题问题产生原因,后台发来图片的base64编码有中有空格存在,而ios的WebView可以自动做处理,android则不能. **解决方法 ...
微信H5游戏的功能和特点有哪些
微信H5游戏的功能和特点有哪些酷顶网络科技专注于为企业和品牌提供互联网推广解决方案,通过微信推广游戏开发,H5营销游戏开发,微信推广活动,推广活动策划等业务为客户定制专属推广策略. 更多关于广州微信 ...
h5在微信中打开长按保存图片
需求: 邀请好友功能,根据用户id动态生成二维码,和背景图生成为一张图,长按图片后分享给好友或保存图片. 参考地址为:https://www.jianshu.com/p/abd9e9c5ba20 具体 ...
微信H5实现网页长按保存图片及识别二维码
实现微信H5实现网页长按保存图片及识别二维码使用工具 html2canvas 官方文档 html2canvas.hertzen.com/ canvas2image github.com/hongru ...
微信 h5 image禁止长按保存图片
微信 h5 image禁止长按保存图片 image{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-se ...

实现[微信]H5长按保存图片功能

通过js插件html2canvas实现

a.下载html2canvas.js（github地址：https://github.com/niklasvh/html2canvas/releases/、官网地址：http://html2canvas.hertzen.com/）

b.个人需求实现

c.参考实现文档

实现[微信]H5长按保存图片功能相关推荐

最新文章

热门文章