技術標籤：JSNginx阿里雲jshtml

使用場景：

根據產品資訊生成海報圖，供分享和分銷使用。

程式碼：

首先要載入html2canvas的js檔案。（需要前往官網下載）

<script>
    var canvas = document.createElement("canvas"); //建立一個canvas節點
    var scale = 3; //定義任意放大倍數 支援小數
    var type = "png";//生成圖片樣式
    var width = 360; //獲取需要生成海報dom的寬度,為了測試，給的定值
    var height = 1750; //獲取需要生成海報dom的高度,為了測試，給的定值
    canvas.width = width * scale; //定義canvas 寬度 * 縮放
    canvas.height = height * scale; //定義canvas高度 *縮放
    canvas.getContext("2d").scale(scale,scale); //獲取context,設定scale
    html2canvas(document.getElementById('share_img_con'), {//這裡的share_img_con就是海報的內容
         tainttest:true, //檢測每張圖片都已經載入完成
         useCORS: true, // 【重要】開啟跨域配置
         canvas: canvas,
         onrendered: function(canvas) {
             $("#share_img_con").hide();//隱藏海報內容div
             $("#share_img_img").html('');//海報展示
             $("#share_img_img").append(Canvas2Image.convertToImage(canvas, canvas.width, canvas.height, type));//生成海報並新增到頁面
             $("#share_img_img img").css("width", "100%");//設定海報展示樣式
          }
     });
</script>
 

採坑紀錄：

1.跨域問題：因為公司圖片儲存和呼叫是用阿里雲的OSS，在生成海報的時候會報跨域的錯。

解決：

1.在圖片新增屬性 crossorigin="anonymous"。

2.修改伺服器Nginx配置，新增

add_header 'Access-Control-Allow-Origin' $core_orgin;//$core_orgin就是圖片伺服器的域名，不考慮安全問題的話可以設定為*
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS,DELETE,PUT';
 

另外圖片伺服器也要修改配置，在Nginx配置新增相應的允許訪問的程式碼，同上。

3.阿里雲OSS或者其他雲盤儲存需要在OSS配置允許訪問的域名。下邊是阿里雲OSS的配置：