uni-app生成广告图的一些坑 2022年5月12日 1306 代码厨子 使用canvas生成广告图过程中，一直使用别人封装的函数，没有完全理解原理，导致各种问题。下决心研究了一下，现在基本弄明白了。 直接记录问题与方法吧 # 关于canvas生成的基础原理 本质上，就是在一个canvas对象上进行画图，然后把这个canvas截图保存，所以基本步骤还是生成画布，一层一层覆盖，最终保存。 但是，在这过程中有好几个问题，比如，尺寸问题，不同手机生成尺寸问题，贴图原理，偏移方式等等，我这里直接列举我遇到的问题，以及解决方式。 我这里用的是uni-app市场里hch-poster这个组件，这里要感谢原作者的付出。 ## 尺寸 一般用法是采用一个固定尺寸的画布，这里注意，是要写到canvas上的，如下代码： ```html <canvas canvas-id="myCanvas" id="myCanvas" :style="'width:' + poster.w + 'px; height:' + poster.h + 'px;'" :width="poster.w" :height="poster.h"></canvas> ``` ## 画布 我这poster是我定义的画布大小，也是要乘以缩放倍数进行调整。 代码如下： ```javascript poster() { let data = this.posterData let system = this.system let posterBg = { url: data.poster.url, r: data.poster.r * system.scale, w: data.poster.w * system.scale, h: data.poster.h * system.scale, x: 0, y: 0, p: data.poster.p * system.scale } return posterBg } ``` ## 贴图 贴图我采用了组件内的drawSquarePic方法，没什么好说的，要注意的就是url必须是网络图片或者下载到本地的临时路径，不能是base64，我这里掉坑里一次。 建议，下载到本地用临时路径，否则在生成时候可能会出现下载不及时导致空白的情况。 ## 文字 文字我采用了组件中的drawTextReturnH方法，不过，我修改了他对齐方式，他原来的right方式是贴着右面了，没有右间距，我硬改了一下，实际上应该扩充函数形参。 ## 生成图片质量 这里其实和canvas已经关系不大了，主要是使用uni-app下的api，uni.canvasToTempFilePath就是这个api了。 这里有三个坑： 1，保存图片格式，建议jpg，因为png太大了 2，尺寸参数尽量用默认，否则会出现奇奇怪怪的不同客户端大小问题。 3，canvas贴图完成后，最好间隔100毫秒再执行保存图片api，我出现了贴图不全的情况。
