首先本人是一个canvas小白基本不懂canvas的原理，拿到同事写的代码直接copy过来也没看文档（项目催的紧且文档是英文的）话不多说上代码只是说出我的解决思路很多为什么还要花时间研究比如canvas我都不会

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

   html2canvas(document.querySelector(".upload_box")).then((canvas) => {
    
        var imgData = canvas.toDataURL('image/png');
      
        $('#save_img').html($('<div id="downLoadImg"><img src="' + imgData + '" alt=""></div>'));

    })

如此简单是不是！获取dom 把返回的canvas转成图片显示！遇到两个问题：

部分图片没有生成
生成的图片特别模糊（文字和图片都是模糊的）手机上更糊

可是为啥同事的代码没有问题呢！我拉来了同事发现了一个问题：dom涉及到的图片不是本地的话生成不出来当时试了好多方法都不行（这个时候傻逼的我为啥不去看看文档！）总之在网上试了很久最终的做法是把从服务器获取的图片都转成base64显示 (网上找的代码) 暂时解决了

           getBase64: function getBase64(img) {//传入图片路径，返回base64
                function getBase64Image(img, width, height) {
                    var canvas = document.createElement("canvas");
                    canvas.width = width ? width : img.width;
                    canvas.height = height ? height : img.height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    var dataURL = canvas.toDataURL();
                    return dataURL;
                }

                var image = new Image();
                image.src = img;
                image.crossOrigin = "Anonymous"
                var deferred = jQuery.Deferred();
                if (img) {
                    image.onload = function () {
                        deferred.resolve(getBase64Image(image));//将base64传给done上传处理
                    }
                    return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
                }
            },

    _this.getBase64(resp.avatar)
    .then(function(base64){
    // console.log(base64);
        $('.user_info .user_head img').attr('src',base64)
    },function(err){
        console.log(err);
    });

模糊我都不想处理了！但是产品说不行啊，你这个生成的图片二维码都识别不出来必须要清晰就在我加班到早上六点也解决不了的时候产品说可以先隐藏这个功能，花时间研究一下。于是第二天我就开始准备找方法了。

首先把官方文档看了一遍：http://html2canvas.hertzen.com/configuration 虽然是英文但其实没多少东西主要就是参数配置一句句谷歌也能翻译出来（不要被英文吓到）

看到了一个配置：useCORS false Whether to attempt to load images from a server using CORS 不就是允许跨域获取图片吗，为什么之前试了这句好像没有效果呢？

                         var opts = {
                                useCORS: true
                            };

   html2canvas(document.querySelector(".upload_box"),opts).then((canvas) => {
    
        var imgData = canvas.toDataURL('image/png');
      
        $('#save_img').html($('<div id="downLoadImg"><img src="' + imgData + '" alt=""></div>'));

    })

酱紫远程的图片页也可以了不会出现空白页！真是开心，比转成程base64方便多了毕竟好几张图片都要转很麻烦（后面还有一个转化的大坑我这里没遇到，也是雷后面会说）而且转化之后的图片会更加不清晰！开心！

然后我就开始我的漫长的研究怎么生成清晰图的探索之路了！（找到同事的代码，他啥都没有配置啊！然后我发现html2canvas默认生成的canvas的宽高就是你dom结构的宽高同事的代码截图的是整个网页很大生成的图片也就挺清晰的，但是我的截图模块只占网页不到1/2 太小了！感觉就是这个原因，我开始想要说复制一个dom吧尺寸放大但是觉得太low了于是还是想尝试一下别的！

当然能百度到很多

最多的就是修改源码技术很渣的我直接放弃了不会改不敢改
然后修改配置项啊反正按照他们的说的方法

    var width = $('.upload_box').width()
    var height = $('.upload_box').height()
    var canvasBox = document.createElement("canvas"); 
    var scale = window.devicePixelRatio; 
    canvasBox.width = width * scale; 
    canvasBox.height = height * scale; 

    canvasBox.style.width = width + "px";
    canvasBox.style.height = height + "px";
    canvasBox.getContext("2d").scale(scale, scale); 
   // 获取元素相对于视窗的偏移量
   var opts = {
        scale: scale, 
        useCORS: true,
    };

差不多都是这样的写法但是但是出来canvas是清晰了！但是不居中啊尝试在配置项中增加参数 x y偏移但是并没有什么用然后我就想程序员怎么能用百度！遂换谷歌终于在知乎里面看到一个好像比较看不懂的写法于是就试试：https://www.zhihu.com/question/48217555/answer/122947484

作者：PajamaCat
链接：https://www.zhihu.com/question/48217555/answer/283209866
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前面的回答没有解决margin导致的生成图片偏移问题, 这里是解决方法:      var dom = $('#to-save-img')
      var width = dom.width();
      var height = dom.height();
      var type = "png";
      var scaleBy = 2; //缩放比例
      var canvas = document.createElement("canvas");
      // 获取元素相对于视窗的偏移量
      var rect = dom.get(0).getBoundingClientRect(); 
      canvas.width = width * scaleBy;
      canvas.height = height * scaleBy; 
      canvas.style.width = width * scaleBy + "px";
      canvas.style.height = height * scaleBy + "px";
      var context = canvas.getContext("2d");
      context.scale(scaleBy, scaleBy);
      // 设置context位置, 值为相对于视窗的偏移量的负值, 实现图片复位
      context.translate(-rect.left,-rect.top);

就是这个所谓的偏移，我一看我要截图 dom的确是margin:0 auto的是相对居中的所以试试

           var width = $('.upload_box').width()
                var height = $('.upload_box').height()
                var canvasBox = document.createElement("canvas"); 
                var scale = window.devicePixelRatio; 
                var rect = $('.upload_box').get(0).getBoundingClientRect(); 
                canvasBox.width = width * scale; 
                canvasBox.height = height * scale; 

                canvasBox.style.width = width + "px";
                canvasBox.style.height = height + "px";
                canvasBox.getContext("2d").scale(scale, scale); 
                canvasBox.getContext("2d").translate(-rect.left, -rect.top); 
                           // 获取元素相对于视窗的偏移量
                           var opts = {
                                scale: scale, 
                                canvas: canvasBox, 
                                // logging: true, 
                                // width: width*2, 
                                // height: height*2 ,
                                // allowTaint:true,
                                useCORS: true,
                                // x:-200,
                            };

然后真的就好了！！！！！！！激动啊激动啊简直大神啊！

然后我就很开心了开心的发给测试然后扑街测试的手机上还是完全白板啊？难道是兼容性的问题？可是我们都是iphone7啊！而且兼容性什么的最讨厌了！我快绝望了然后在我的手机上登陆她的账号也是截图不了的这太奇怪了！难道是账号的问题？毕竟一整天都在解决所谓的跨域问题！图片跨域啥的很多啊！

然后果然她的账号的微信头像 :https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIrunVjKyFdyfMnGSqP410sVSpAg2FeDoCT3JkxSJJZ5QjKEQVnRFib7L4jMhrEUqQCZh1yCxDpwibA/132

对这里就是我之前说到的转base64的坑微信的头像不允许跨域，所以html2canvas无法直接使用微信的头像生成canvas,所以啊我就想本地base64就好了就一个头像，但是

查了一下是：污染的画布无法输出，发现原来是受限于 CORS 策略，会存在跨域问题，虽然可以使用图像（比如append到页面上）但是绘制到画布上会污染画布，一旦一个画布被污染,就无法提取画布的数据，比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候会抛出一个安全错误

所以我就妥妥的把问题丢给后端让他们把微信头像转成base64给我了！完全搞定了！撒花

写下这个记录帖虽然问题暂时解决了但是还有更多的不懂在等着我去看