html2canvas把html转图片,得到的图片多了一些点

图片说明
图片说明

贴代码吧
var img = new Image();
img.src = canvas.toDataURL();
//找一个对象插入这个图片看一下有没有问题.
xxx.innerHTML = img;

图片说明
<!doctype html>






<script src="/js/houbu/houbu.wap.js"></script>
<script>
    HB.importres(["base", "inc", "/js/manage/html2canvas.js","/js/manage/canvas2image.js"]);
    HB.ready = function () {
        var img = $("#headImg").attr("src");
        var image = new Image();
        image.crossOrigin = "anonymous";
        image.src = img;
        image.onload = function(){
            var base64 = getBase64Image(image);
            $("#headImg").attr("src",base64);
        }
    };
    //分享名片:社宾好友,链接;其他,转图片格式
    function share(){

        var dom=$("#shareImg"); //你要转变的dom
            var width = dom.width();
            var height = dom.height();
            var type = "png";
            var scaleBy = 1;  //缩放比例
            var canvas = document.createElement('canvas');
            canvas.width = width * scaleBy;
            canvas.height = height * scaleBy+180;  //180是我处理完后发现短了一点,具体为什么不清楚,如果你也少的话,根据自己的项目调吧
            canvas.style.width = width * scaleBy + 'px';
            canvas.style.height = height * scaleBy + 'px';
            var context = canvas.getContext('2d');
            context.scale(scaleBy, scaleBy);
            html2canvas(dom[0], {
                canvas:canvas,
                onrendered: function (canvas) {
                    var data=canvas.toDataURL("image/png");//生成的格式
                    var mm = data.split(",");
                    //mm[0]对应的值是:data:image/png;base64---->>截取image/png
                    var fileType = mm[0].split(":")[1].split(";")[0];

                    $("#images").removeClass("dn"); 
                    $("#images").attr("src",data);  

                }
            });
    } 

    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
    }
</script>


<div class="main-content pb60">
    <div class="gc_headNav mb10">
        <span class="head_left"><a href='javascript:history.go(-1);'><i class='icon-jiantou-copy'></i></a></span>
        <span>我的名片</span>
        <span class="head_right">
            <div class='clearFix'>
                <span class='f24 chui icon-send left'></span>
                <a href='/m/settings/info' class='left ml16'>
                    <span class='icon-fabu f20 chui'></span>
                </a>
            </div>
        </span>
    </div>
    <div class="pt40"></div>
    <!-- start -->
    <div id="shareImg">
    <div class="w355 ma p5 fff">
        <div class="back_f4f9 pl20 pb20 pt22 pb24 pu_r">
            <div class="card_pic"><img id="headImg" src="http://img3.imgtn.bdimg.com/it/u=4215072988,1382169159&fm=26&gp=0.jpg" alt=""></div>
            <p class="f20 c000" onclick="share()">XXX</p>
            <p class="f14 c999 mt5">IT行业</p>
            <p class="mt26"><span class="f24 c9b icon-dianhua-copy-copy"></span><span class="blue f16 ml8">18xxxxxxx78</span></p>
            <p class="f16 c333 mt13"><span class="icon-gongsi f24 c9b"></span><span class="ml8">XXX有限公司</span></p>
            <p class="f16 c333 mt13">
                <span class="icon-weixin1 f24 c9b"></span>
                <span class="ml8" id="wechatNo">546484</span>
                <span class="icon-fuzhi f16 cd8 ml8" onclick="copy();"></span>
            </p>
        </div>
    </div>
    <ul class=" card_list clearFix fff mt10">
        <li class="h60">
            <div>
                <p class="f14 c333">98</p>
                <p class="f12 c999 mt4">引荐</p>
            </div>
            <div class="xian"></div>
        </li>
        <li class="h60">
            <div>
                <p class="f14 c333">101</p>
                <p class="f12 c999 mt4">感恩</p>
            </div>
            <div class="xian"></div>
        </li>
        <li class="h60">
            <div>
                <p class="f14 c333">99</p>
                <p class="f12 c999 mt4">探访</p>
            </div>
            <div class="xian"></div>
        </li>
        <li class="h60">
            <div>
                <p class="f14 c333">100</p>
                <p class="f12 c999 mt4">见证</p>
            </div>
        </li>
    </ul>
    <div class="h52 lh52 fff mt10 bbe5_1">
        <div class="w335 ma f16 c333">产品</div>
    </div>
    <div class="h60 flxa fff">
        <div class="w335 ma f14 c666">XXXXXXX软件</div>
    </div>
    <div class="h52 lh52 fff mt10 bbe5_1">
        <div class="w335 ma f16 c333">产品</div>
    </div>
    <div class="h60 flxa fff">
        <div class="w335 ma f14 c666">XXXXXXX软件</div>
    </div><div class="h52 lh52 fff mt10 bbe5_1">
        <div class="w335 ma f16 c333">产品</div>
    </div>
    <div class="h60 flxa fff">
        <div class="w335 ma f14 c666">XXXXXXX软件</div>
    </div>
</div>
<!-- end -->
</div>


<div>
    <img id="images" class="dn" src="">
</div>