微信小程序使用Canvas详细绘制图片和竖排文字

前言

闲暇之余，抽出时间写了一个杀三国武将的小程序。中间需要设计合成的武将皮肤图片、垂直武将姓名、小程序代码，然后保存到相册中，让用户可以和朋友或者其他平台分享。合成图片要按照Canvas文档来做没有问题，主要是因为对竖排文字有要求，所以在这里和大家分享一下。

文本

先放一张最后保存到相册的图片~

自我感觉良好，至少满足自己的期望~ ~ ~

让我们一步步来看看如何实现它。

整个画面分为三个部分：

武将图片小程序代码武将文字信息首先看wxml里面的代码，主要是放一个画布标签来控制高度和宽度属性。

view canvas class=' share-canvas ' style=' width :100%；高度： { { canvas height } } px ' canvas-id=' share _ canvas '/canvas/查看武将图片

drawHeroImage:函数(路径){ var=this；//获取画布上下文让CTX=wx.createcanvas上下文(' share _ canvas ')；//为了保证图片比例和绘制位置，首先得到图片大小wx.getimaginfo ({src:path，success 3360 function(RES){//计算图片比例信息让maxwidth=math.min (res.width，that . data . canvas width * 0.65)；让radio=MaxWidth/RES . width；让offsetY=(that . data . canvasheight-RES . height * radio)/2；console . log(' offsetY=' offsetY ')；that . setdata({ imagewidth : RES . width * radio，imageheight : RES . height * radio，offsetY: offsetY，})；//绘制画布背景，不属于绘制图片部分CTX . setfillstyle(' white ')CTX . fill rect(0，0，that.data.canvas宽度，that.data.canvas高度)；//画武将图。路径是本地路径，不能传输网络url。如果是网络图片，需要下载CTX。drawimage(路径，10，偏移量，Res. width * radio，RES . height * radio)//绘制小代码that . drawqcodeimage(CTX)；//画权力的汉字：吴那.画影响力(，那.数据.英雄.英雄.影响力)；//画军区司令员的名字：鲁迅那个.画名字(CTX，那个.资料.英雄.英雄.名字)；//武将称号：江陵侯那。德鲁霍纳(CTX，那个。数据。英雄。英雄。霍纳)；//最后调用draw函数生成预览图片。//一个坑只能调用一次，否则后者会覆盖前面的CTX . draw()；}});}小程序代码

小程序代码和武将的图片是同类型的，也就是说绘图位置需要计算，所以这里就不显示相关代码了。

军事指挥官的短信

从刚才的代码可以看出，我分了三个部分来画。其实吴和鲁迅是可以放在一起的，但是当我画的时候，发现空间在画的时候会造成一个例外，导致空间后面的文字无法画出来。因此，这里吴与鲁迅之间的空间是由位置偏移造成的。

下面是如何画出武将的称号。

//绘制军事指挥官称号：江陵侯绘制Horner :函数(，文字){//设置字体大小CTX . setfont size(26)；//设置字体颜色CTX . setfillstyle(' 000000 ')；//计算绘图起点让x=this . data . offset x 35；设y=this . data . offsection 10；console.log('drawHorner '文本)；console . log(x)；console . log(y)；//绘制竖排文字，这里有一个Util函数，具体实现请继续看canvas.drawtextvertical (CTX，text，x，y)；}绘制竖排文字发现了一个来自互联网的开源代码。如果需要看原理，请看这里

当然，我在这里做了一些改变来应用这个小程序。这个函数的原型是这样的：

canvasrenderingcontext2d . prototype . letter space text=function(text，x，y，letterspacing)原谅我不太擅长js。我不知道它是什么语法。看了一会，不明白。感觉就像给类添加了新的属性，不管它是什么。

不管是白猫还是黑猫，抓老鼠都是好猫

修改后的函数如下所示：

帆布。js/* * * @作者张新旭(。com)* @ license MIT * @ description http://www.zhangxinxu.com/wordpress/?p=7362*/function drawTextVertical(context，text，x，y){ var arrText=text。split(')；var arrWidth=arrText.map(函数（字母){ return 26//这里为了找到那个空格的病菌做了许多努力，不过似乎是白费力了//const metrics=上下文。测量文本(字母);//控制台。日志(指标)；//常量宽度=度量。宽度；//返回宽度；});var align=context.textAlignvar基线=context . textbaseline if(align==' left '){ x=x Math。最大值apply(null，arr宽度)/2；} else if(align==' right '){ x=x-math。最大值apply(null，arr宽度)/2；}如果(基线=='底部' ||基线=='字母' ||基线=='象形字){ y=y-arr宽度[0]/2；} else if(baseline==' top ' | | baseline==' hanging '){ y=y arr width[0]/2；} context . textalign=' center context . text baseline=' middle//开始逐字绘制arrText.forEach(函数（字母，索引){//确定下一个字符的纵坐标位置var字母宽度=arr宽度[index]；//是否需要旋转判断var代码=字母。charcodeat(0)；如果(代码=256) {context.translate(x，y)；//英文字符，旋转90 上下文。旋转(90 *数学/180)；context.translate(-x，-y)；} else if(索引0文本。charcodeat(index-1)256){//y修正y=y arr宽度[index-1]/2；}context.fillText(字母，x，y)；//旋转坐标系还原成初始态context.setTransform(1，0，0，1，0，0)；//确定下一个字符的纵坐标位置var字母宽度=arr宽度[index]；y=y字母宽度；});//水平垂直对齐方式还原context . textalign=align context . text baseline=基线；}模块。导出={ drawTextVertical : drawTextVertical }绘制网络图片

由于网络图片无法直接绘制，所以需要先下载到本地，然后再按住本地图片绘制的流程走一遍。

下载图像：函数(){//微信不支持非安全超文本传输协议的图片下载，这里了个替换让网址=这个。数据。英雄。英雄。图标。替换(/http/，' https ')；变量=这个；wx.downloadFile({url: url，success:函数(res) {//下载成功后拿到图片的路径，然后开始绘制var path=RES . tempfilepath that . drawer image(路径);}，fail:函数(RES){控制台。log(RES)} })；}保存图片

说了这么多，自然少不了最终的一步，将绘制到帆布的图片保存到手机相册，这里需要用户授权，你需要自己处理。用的是微信给我们提供的接口wx.canvasToTempFilePath。需要我们传入起点坐标(x，y)和画布大小（宽度、高度)以及canvasId。

保存共享图像：函数(){wx.showLoading({title: '正在保存图片.',});让那个=这个；wx。canvasotmpfilepath({ x : 0，y: 0，width :数据。canvaswidth，高度：数据。canvasheight，canvasId: 'share_canvas '，success : function(RES){ wx。saveiveimagetopotaslbum({ file path 3360 RES . tempfile path，success(RES){ console。日志(RES)}；wx.showToast({title: '保存到相册成功，duration: 1500，})}，fail(RES){ console。日志(RES)wx。showtoast({ title : '保存到相册失败，icon: 'fail'})}，complete(RES){ console。日志(RES)} })})开源

本着开源的精神，源码已经放在开源代码库上，大家可以去上面查看具体代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。