uni-app生成广告图的一些坑 2022年5月12日 1198 代码厨子 使用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,我出现了贴图不全的情况。