将某个div内容保存成图片，使用html2canvas截图方法（高清图并解决图片跨域问题）

首先附上html2canvas的CDN地址：http://www.bootcdn.cn/html2canvas/ ;

此方法可截取整个div的内容，包括不可视区域，而且能够实现跨域图片截图。以前看了不少关于html2canvas插件图片跨域的解决办法，大部分的答复是在服务器端配置，以后将useCORS属性设置为true，可是若是图片是保存在别人家的服务器上好比阿里云的oss上，那这个方法就实现不了了。哦多卡几，那就把图片转成base64编码赋给img的src，再去截图，这样截图时就避开了跨域请求。完整代码以下：

<div class="box">
　　<p>这是生成图片的box，内容不限</p>　
   //跨域图片（oss地址）
　　<img id="ossImg" src="https://devimg.xiezixiansheng.com/users/0/1/photo/20160708035328.jpeg">

</div>

下面是js代码：

        var c_width = $('.box').outerWidth()；//若是box设置了padding，须要获取outerWidth和outerHeight来赋给canvas；
        var c_height =$('.box').outerHeight();

        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");

　　　　//如下代码是获取根据屏幕分辨率，来设置canvas的宽高以得到高清图片
        // 屏幕的设备像素比
        var devicePixelRatio = window.devicePixelRatio || 2;

        // 浏览器在渲染canvas以前存储画布信息的像素比
        var backingStoreRatio = context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;

        // canvas的实际渲染倍率
        var ratio = devicePixelRatio/backingStoreRatio;

        canvas.width = c_width * ratio;
        canvas.height = c_height * ratio;
        canvas.style.width = c_width + "px";
        canvas.style.height = c_height + "px";
      
        var transTop = $(document).scrollTop() - $('.card_box').offset().top;//获取div垂直方向的位置
    
        context.scale(ratio,ratio);
        context.translate((c_width-$(window).width())/2,transTop) //canvas的位置要保证与div位置相同。

　　　　//高清图设置完成
　　　　
　　　//解决跨域，将跨域图片路径转为base64格式

　　　　var img = new Image();
　　　　var canvas2 = document.createElement('canvas');
　　　　var ctx = canvas2.getContext('2d');
　　　　img.crossOrigin = 'Anonymous';
　　　　img.src=$('#ossImg').attr('src);

　　　　img.onload = function () {
 　　　　   canvas2.height = img.height;
  　　　　  canvas2.width = img.width;
   　　　　 ctx.drawImage(img, 0, 0);
   　　　　 var dataURL = canvas2.toDataURL('image/png');
  　　　　　　$('#ossImg').attr('src',dataURL);

 　　　　 canvas2 = null;

 　　　　//从新给img赋值成功后，执行截图方法
 　　　　getCard()

　　　　}

　　　　function getCard(){

　　　　　　html2canvas($(".box"),{ allowTaint:true, useCORS:true, canvas:canvas, onrendered:function(canvas){ dataURL =canvas.toDataURL("image/png"); var img = new Image(); img.src=dataURL; img.className = 'cardImg'; img.onload = function () { $(".card").append(img); } }, width:c_width, height:c_height })

　　　} 

注意！！！若是须要生成图片的div有背景图，须要将背景图以img标签订位显示，若直接给div设置background会致使生成的图片 背景图模糊。附上亲身经验的图片（最下方的二维码及文字与底层大背景是一体）：

图1是div设置background的图片效果，图2是div用img标签展现的效果：

          

 

我又来补充了：采坑过程有点艰难，最近作的活动又有这个截图的功能，活动界面比较炫酷 各类颜色各类渐变发光效果。而后截图就致使了比其余普通图片图片大不少，base64编码是会阻塞浏览器渲染的，当编码过长会形成浏览器卡顿，苹果手机影响不大，安卓机特别是华为手机上，滑动卡顿明显，且在QQ里出现闪退。因此，若是须要截的图很大的话，仍是建议与服务器端配合。