效果图：
前提：
公司要求生成一分报告并转为图片并保存，之前用canvas画过，但这次是在不想用canvas一点点画了，再往上找了n久，爬了n多坑，终于搞出来了
插件：
wxml2canvas
一：下载插件
npm install wxml2canvas
二：构建npm
微信开发者工具： 工具 –> 构建npm
三：使用
import Wxml2Canvas from 'wxml2canvas'
好了，坑开始了！！！！！！！！！！！！
坑一：引入一直报错
解决方法
重新下载了好几次wxml2canvas，又清了缓存n次
总结：微信开发者工具太辣鸡了
坑二：文字不换行
解决方法：
data-type="inline-text"
text标签的 data-type 由 text 修改为 inline-text
坑三：文字按整个canvas的宽度来换行，超过的部位还被裁了
解决方法：手动换行
计算这里一行最多可以放几个文字，然后把这一段文本分割成几行，最后循环遍历显示
class="function"> class="my_draw_canvas" wx:for="{{instructionTextList}}" wx:key="index" data-type="inline-text" data-text="{{item}}"> {{item}}
坑四：最后的图片不显示wxss中写的border代码
解决方法:
let drawMyImage = new Wxml2Canvas({ element: 'myCanvas', // canvas的id, obj: that, // 传入当前组件的this options: {class: ".exc-c",limit: ".limit-r",}, width: that.data.width * 3, height: that.data.height * 3, // width: 794, // height: 1123, background: '#ffffff', // 生成图片的背景色 progress(percent) { // 进度 // console.log(percent); }, finish(url) { // 生成的图片 console.log('url',url) wx.hideLoading() that.savePoster(url) }, error(res) { // 失败原因 console.log(res); wx.hideLoading() } }, this); let data = { // 获取wxml数据 list: [ { type: 'wxml', class: '.my_canvas .my_draw_canvas', // my_canvas要绘制的wxml元素根类名， my_draw_canvas单个元素的类名（所有要绘制的单个元素都要添加该类名） limit: '.my_canvas', // 要绘制的wxml元素根类名 x: 0, y: 0, }, { //绘制横线 logo下面 type: 'line', x: 10, y: 50,x2:760,y2:50, style: { width: 1, stroke: '#000' } }, { // 车牌下面 type: 'line', x: 10, y: 178,x2:760,y2:178, style: { width: 1, stroke: '#000' } }, {// 检测部位 下面 type: 'line', x: 170, y: 208,x2:760,y2:208, style: { width: 1, stroke: '#000' } }, {// 功能/作用 下面 type: 'line', x: 10, y: 318,x2:760,y2:318, style: { width: 1, stroke: '#000' } }, {// 正常状态 下面 type: 'line', x: 10, y: 354,x2:760,y2:354, style: { width: 1, stroke: '#000' } }, // {// 画竖线 左边 // type: 'line', x: 10, y: 178,x2:10,y2:that.data.height-186, // style: { // width: 1, // stroke: '#000' // } // }, // {// 画竖线 右边 // type: 'line', x: 760, y: 178,x2:760,y2:that.data.height-186, // style: { // width: 1, // stroke: '#000' // } // }, // {// 车牌照片 右边 // type: 'line', x: 170, y: 178,x2:170,y2:318, // style: { // width: 1, // stroke: '#000' // } // }, // {// 检测部位 右边 // type: 'line', x: 250, y: 178,x2:250,y2:318, // style: { // width: 1, // stroke: '#000' // } // }, ] } // 绘制canvas drawMyImage.draw(data, this);
坑五：不同型号手机显示错位
好不容易填了一下第四个坑，但是屏幕越大的手机，线条往右下方偏移越严重
希望的样式：（12pro）
(13pro) (ipad)
以上我感觉是不能用 type: ‘line’ 一条条地画了，搞了整整两三天，最终放弃
最后解决方法：在需要画线的地方，插入一个view当做一条线
class="my_draw_canvas" data-type="text" style="width: 80px;height: 1px;background: rgba(0, 0, 0, 1);">
class="my_draw_canvas" data-type="text" style="width: 1px;height: 1000px;background: rgba(0, 0, 0, 1);">
以上，线条可以在不同型号、版本的手机上完美呈现
然而，坑依然没有结束！！！！！！！！！！！！！
坑六：下载后图片不显示
因为写静态页面的时候都是引入本地的图片，所以点击导出的时候是完全没有问题的，但是换成了后台动态数据，要根据地址去显示服务器上的图片的时候，就开始作妖了！！！！！
解决方法：先把图片下载至本地
wx.downloadFile({ url: `图片地址`, success: function(res){ let leftLogo = res.tempFilePath if(res.dataLength > 0){ that.setData({ leftLogo:leftLogo, }) }else{ that.setData({ leftLogo:"", }) } }, fail: function (error) { wx.showToast({ title: "预下载左侧logo失败", icon: 'none' }) } })
class="my_draw_canvas" src="{{leftLogo}}" data-type="image" data-url="{{leftLogo}}">
以上就是我画图的所有心累里程
后续还有两个bug没解决：
bug一：微信开发者工具中导出图片有问题，但手机上没问题
（电脑） （手机）
bug二：手机上有问题，电脑上没有
（电脑） (手机)
后续有解决方法了再补充
——2023-3-14
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net
