html2canvas生成图片时踩到的坑

html2canvas生成图片时踩到的坑

1. html2canvas ，是H5生成图片常用的框架，但是由于以前没有用过踩到了N多的坑，现在写下来好让自己以后再用时能注意这些问题；
2. vue 工程下安装html2canvas

	npm install html2canvas

npm 安装后需要在使用界面引入

	import html2canvas from 'html2canvas'

3. html2canvas的代码

 makeImg() {
   html2canvas(this.$refs.cardContent, {useCORS: true, logging: true}).then(canvas => {
         return canvas.toDataURL().split(',')[1];   //BASE64 的 图片URL
         });
 }

其中 this.$refs.cardContent就是你要截取的H5的元素，可以用document来获取这个元素，也可以用$refs来获取元素；

{useCORS: true, logging: true} 这两个属性是在网上查的，记得是H5元素中如果存在图片处理图片跨域的问题，但是不好用！！！ 或许是使用的不正确，就因为这个图片跨域的问题浪费了大量的时间（当时已经把从服务器获取到的图片转成了BASE64 html2canvas 依然获得不到那张图片）；

4. html2canvas不支持很多CSS样式，大体如下
   
   因为做的项目有竖版文字的排列开始用的css属性是writing-mode样式只能为了html2canvas放弃。

5. 关于竖版文字排版遇到标点符号乱行的问题
   
   大体问题就是任意标点符号会和图上的 ‘是’ 并排成一行：注意是一行！！！，而 ‘也’ 的上面还是会保留那个空格。最开始一直找不到原因，只是在网上去看html2canvas 的运行机制，是如何再画布上写出选中元素的 ；无果。
   想到了一个笨方法，把‘，’放再一个div里面。
   通过正则表达式匹配当前的字符串

                let reg = new RegExp(',','g');
                this.currSentiment[i]= this.currSentiment[i].replace(reg,'<div>,</div>');

再放入H5的时候使用VUE 的v-html 属性屏蔽掉div。