关于将h5页面保存为图片的插件——html2canvas(小记)

最近工作的时因为有分享的需求，里面需要动态展示，并且需要用户能保存下来图片并且识别图中的二维码

就用到了html2canvas 这个插件，用的时候也遇到了不少坑，但还是磕磕绊绊用下来的，在此总结一下

1.引入使用

既然是插件，那引入方法跟其他的一样，直接

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

就可以使用了

下面附上使用的代码片段

  document.addEventListener('gesturestart', function(event) {
  event.preventDefault();
   });
   let canvas2 = document.createElement('canvas'), // 创建canvas
   _canvas = document.querySelector('.fxBox'), //此处可换body，或div等 我们一般可以放绘制的元素
   w = parseInt(window.getComputedStyle(_canvas).width),
   h = parseInt(window.getComputedStyle(_canvas).height);

   //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
   canvas2.width = w * 2;
   canvas2.height = h * 2;
   canvas2.style.width = w/100 + 'rem';
   canvas2.style.height = h/100 + 'rem';

   let context = canvas2.getContext('2d'),
       rect = $('.fxBox').get(0).getBoundingClientRect(); //获取元素相对于视察的偏移量

   context.scale(2, 2);
   context.translate(-rect.left,-rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位

   // // =====================================注意注意注意=================================
   // // 必须先scale,再traslate，如果不是绘制全屏的话，这两句可以不加，正常绘制就会把margin区域也绘制上，如果需要不绘制margin区域，而且这个元素就根据窗口大小而居中，我们很不好控制，所以我们再这里先获取 getBoundingClientRect() 根据元素偏移，最后绘制出来全屏的，

   html2canvas($('.fxBox'),{
       canvas: canvas2,
       allowTaint:false,
       useCORS: true, // 允许图片跨域
       width: 630,  // 绘制图片的宽 2倍
       height: 944, // 绘制图片的高 2倍
       dpi: window.devicePixelRatio * 2, // dpi  如果模糊的话 就把dpi和scale缩放的值调大 dpi越高生成的图片越大
   }).then(canvas => {
       document.body.appendChild(canvas)
       var box = document.querySelector('.fxBox')
       box.style.display='none'
   });

2.跨域问题

使用这个插件很容易就会碰到跨域问题，解决这个问题需要前后端都进行配置

①后端支持：图片要是cdn上的地址，并且允许图片跨域，header头中设置应为

Access-Control-Allow-Origin:  *

②前端配置

 useCORS: true, // 允许图片跨域,我在上面的代码块中已经加过了，直接使用就行