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'})
               
            });
    
        });
    

      

      

  • 相关阅读:
    多个类定义attr属性重复的问题:Attribute "xxx" has already been defined
    好用的批量改名工具——文件批量改名工具V2.0 绿色版
    得到ImageView中drawable显示的区域的计算方法
    得到view坐标的各种方法
    实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置
    Material Designer的低版本兼容实现(五)—— ActivityOptionsCompat
    Android 自带图标库 android.R.drawable
    解决 Attempting to destroy the window while drawing!
    解决Using 1.7 requires compiling with Android 4.4 (KitKat); currently using API 4
    Material Designer的低版本兼容实现(四)—— ToolBar
  • 原文地址:https://www.cnblogs.com/gynbk/p/12983217.html
Copyright © 2011-2022 走看看