阅读小程序开发文档并尝试用微信小程序原生canvas操作
通过实操发现微信小程序的canvas并不能满足,基于以下几点:
- 在实际转化的过程需要填入节点信息,(固定格式的,如生成海报格式固定);
- 庞大的代码量,环环相扣;
通过插件html2canvas或者其他的插件
需要考虑到兼容,如:html2canvas不能兼容苹果的部分
最后引入h5页面操作
简单快捷
作者也是第二次操作canvas,以此记录遇到的坑
话不多说,贴源码:
说明几点重要的参数:
$(window).scrollTop(0);
将滚动条设置在顶部,如:需要将#section元素生成图片,那么就将滚动条设置在该元素的顶部
var width = $(’#sections’).width()-1;
var height = $(’#sections’).height()-1;
#section元素生成图片时会有1px的白边,可以通过此操作处理
var scrollY = $(document).scrollTop();
var scrollX = $(document).scrollLeft();
设置生成的图片大小
background-color:transparent
注意这个属性是设置透明度的,一般情况不设置,如果设置了,在浏览器中打开图片其背景色是黑色,在加上图片中的字也是黑色的
canvas.toDataURL();
这一属性返回的值是base64可以自行转化成图片
本章内容主要是强调,html2canvas在使用中几个主要参数设置