將某個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里出現閃退。所以，如果需要截的圖很大的話，還是建議與服務器端配合。