html2canvas生成图片时踩到的坑
html2canvas生成图片时踩到的坑html2canvas ,是H5生成图片常用的框架,但是由于以前没有用过踩到了N多的坑,现在写下来好让自己以后再用时能注意这些问题;vue 工程下安装html2canvasnpm install html2canvasnpm 安装后需要在使用界面引入import html2canvas from 'html2canvas'html2...
html2canvas生成图片时踩到的坑
- html2canvas ,是H5生成图片常用的框架,但是由于以前没有用过踩到了N多的坑,现在写下来好让自己以后再用时能注意这些问题;
- vue 工程下安装html2canvas
npm install html2canvas
npm 安装后需要在使用界面引入
import html2canvas from 'html2canvas'
- 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 依然获得不到那张图片);
-
html2canvas不支持很多CSS样式,大体如下
因为做的项目有竖版文字的排列开始用的css属性是writing-mode样式只能为了html2canvas放弃。 -
关于竖版文字排版遇到标点符号乱行的问题
大体问题就是任意标点符号会和图上的 ‘是’ 并排成一行:注意是一行!!!,而 ‘也’ 的上面还是会保留那个空格。最开始一直找不到原因,只是在网上去看html2canvas 的运行机制,是如何再画布上写出选中元素的 ;无果。
想到了一个笨方法,把‘,’放再一个div里面。
通过正则表达式匹配当前的字符串
let reg = new RegExp(',','g');
this.currSentiment[i]= this.currSentiment[i].replace(reg,'<div>,</div>');
再放入H5的时候使用VUE 的v-html 属性屏蔽掉div。
更多推荐
所有评论(0)