使用html2canvas生成海报及采坑纪录

使用场景：

根据产品信息生成海报图，供分享和分销使用。

代码：

首先要加载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的配置：