zoukankan      html  css  js  c++  java
  • html2canvas.js插件截图空白问题和微信长按图片分享失败问题

    发现使用

    html2canvas.js插件截图保存在前端很方便。学习过程中遇到的问题,主要负责将html标签转化为图片。
    canvas2image.js是一个展示图片的canvas插件,解决微信分享失败就靠这个插件。
    截图出现空白和截图不全。
    问题原因:
    html2canvas.js插件截图是基于body标签的,如果body存在滚动条就会出现截图空白的情况。如何避免:
    关键点:在截图前将滚动条位置设置在顶部。截图时,截图选择内容标签不是body,就将截图宽度和高度设置为选择标签的宽高在截图。

    具体代码:
    <!-- 海报弹窗 -->
    	<div class="dialog flex" id="alert10" style="display:none" >
    		<div class="poster_con">   
       
    			<div class="poster"  id="contbox">
    				<div class="qrcode" id="qrcode">
    				
    				</div>
    			</div> 
        
    			<div class="poster_btn"><button id="down">点击保存图片分享给好友</button><a id="down1" class="down" href="" download="downImg"   style="display:none"></a></div> 
    </div> </div>

      

    浏览器

    下载图片js代码:

      $("#down").click(function(){
            // 截图前先讲滚动条置顶
            $('html,body').animate({'scrollTop':0});
            // document.getElementById("contbox") 需要截图的是div标签
            html2canvas(document.getElementById("contbox"),
                {logging:false,
                    $("#contbox").width(),// 宽设置为div标签的宽
                    height:$("#contbox").height(),// 高设置为div标签的高
                    useCORS:true}).then(function(canvas) {
                //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
                var timestamp = Date.parse(new Date());
                //把截取到的图片替换到a标签的路径下载
                $("#down1").attr('href',canvas.toDataURL("image/png"));
                console.log(canvas.toDataURL("image/png"));
                //下载下来的图片名字
                $("#down1").attr('download',timestamp + '.png') ;
                $("#down1")[0].click();
                //document.body.appendChild(canvas);
            });
    
        });
    

    微信分享长按图片分享js代码:

    	$("#down").click(function(){
            // 截图前先讲滚动条置顶
            $('html,body').animate({'scrollTop':0});
    		$('body').css({'overflow':'hidden'})
            // document.getElementById("contbox") 需要截图的是div标签
            html2canvas(document.getElementById("contbox"),
                {logging:false,
                    $("#contbox").width(),// 宽设置为div标签的宽
                    height:$("#contbox").height(),// 高设置为div标签的高
                    useCORS:true}).then(function(canvas) {
    				// 将canvas转为图片
                            var img = Canvas2Image.convertToImage(canvas,$("#contbox").width()*2,
                                $("#contbox").height()*2);
                            // 图片添加到页面中,在微信里长按添加的img图片就可以正常使用微信自带的长按图片分享功能
                            $('body').append(img);
                            $('body').css({'overflow':'scroll'})
               
            });
    
        });
    

      

      

  • 相关阅读:
    分组取最大值SQL 牛XXXX啊 我艹
    windows自带的可生成各种数据库连接字符串工具打开方法
    ashx.cs 读写session
    ASP.NET温故而知新学习系列之深度剖析ASP.NET架构—ASP.NET请求的处理过程(一)
    为什么从5000个数中找出10个最大的堆排序最快?
    net自带wsdl.exe的用法与参数说明
    负载均衡的集中实现方式
    18款 非常实用 jquery幻灯片图片切换
    MSSQL 导入用法总结 太方便了
    爱的无助
  • 原文地址:https://www.cnblogs.com/gynbk/p/12983217.html
Copyright © 2011-2022 走看看