使用html2canvas生成海报并解决生成模糊以及iphone7生成不了的问题

1、安装插件

npm install html2canvas --save

2、在使用的页面进行引入

import html2canvas from "html2canvas";

3、把需要生成的内容放在一个父盒子中

生成后部分手机会出现模糊的情况，这是由于不用的手机的像素比都不一样，像素比也就是手机的物理像素和css像素比，有一些手机的像素比是2有一些是3还有是1的，那么保证不模糊可以使用像素比进行放大倍数，这个时候可以设置像素比例，像素比例= 手机像素/css像素，如下

 if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
      }
   return 1;

然后在html2canvas的设置中设置scale为这个像素比

注意！！！！！

这个插件有苹果机机的兼容性问题，在iphone7 iphonex都生成不了的时候，请看看html2canvas的版本，只有1.0.0-rc.4这个版本是可行的，如果你指定下载这个版本在package.json中看到是^1.0.0-rc.4，则不一定就是1.0.0-rc.4版本，它是指1.0.0-rc.4以上的版本，把^去掉再install就可以了