html2canvas的坑

html2canvas的坑

最近项目要实现一个将html生成图片的效果，从网上搜就用了html2canvas，结果弄了挺久，踩了不少的坑。

大致流程就是先找的插件，开始没有用官网的。
第一个实现效果是生成图片嘛，就还可以

		var copyDom = $(".tuiguangtu_tu");//要保存的dom
        var width = copyDom.width(); //dom宽
        var height = copyDom.height(); //dom高
        var scale = 2; //放大倍数
       html2canvas(copyDom[0], {
            scale: scale,
            width: width,
            heigth: height,
            useCORS: true, // 【重要】开启跨域配置
        }).then(canvas => {           
        	var url = canvas.toDataURL("image/png");
            $(".picsss").attr("src",url);
        });

大致就这么几行代码，前期因为插件版本问题，出现了下面的几个问题。

第一个问题：生成图片不清晰

这个问题用scale将他的比例放大就可以，我当时写的时候他的scale是不管用的，后来换了一个版本，管用了。

第二个问题：生成图片背景模糊

我搜了下，网上有解决背景模糊的，但是我没写出来，只是把背景都换成了图片，清晰度还是可以的。

第三个问题：生成的图片有空白

生成的图片会根据滚动条位置截图，我滚动条滚动到下面的话，生成的图会有空白，然后各种搜啊，改的，败在了不看文档，文档里有个scrollY，加上这个是0，就不会出现空白了。

第四个问题：文字的阴影加上后，所有元素都加上了

也是换了官网的最新版本后好的。。。。

上传的话，生成的图片是base64格式的，我这边是直接获取后传给后台，后台操作的

最后整体代码就这么点，

		var copyDom = $(".tuiguangtu_tu");//要保存的dom
        var width = copyDom.width(); //dom宽
        var height = copyDom.height(); //dom高
        var scale = 2; //放大倍数
       html2canvas(copyDom[0], {
            scale: scale,//放大2倍
            width: width,
            heigth: height,
            useCORS: true, // 【重要】开启跨域配置
        }).then(canvas => {           
        	var url = canvas.toDataURL("image/png");//将canvas转成图片
            $(".picsss").attr("src",url);
            $.post("{{url('uploadbase64')}}",
            {
               'image_base64':url
             }, function (data) {
            });
        });

整体下来发现，就几行代码，都是汗水啊，走了很多弯路。

最重要插件还是要用官网最新版本比较好，之间换了好几个版本的，估计网上查到的发布时间太长了，我看基本都2016 17 年。
http://html2canvas.hertzen.com/dist/html2canvas.js