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


Posted in Javascript onJune 25, 2019

前言

闲暇时间抽个空写了个三国杀武将手册的小程序,中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码,然后提供保存图片到相册,最终让用户可以分享到朋友圈或其他平台。合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下。

正文

首先放一张最终保存到相册的图片吧~

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

自我感觉良好,至少达到了我自己的预期吧~~~

下面让我们一步一步来看看如何实现的吧。

整个图片分为三个部分:

  • 武将图片
  • 小程序码
  • 武将文字信息

先来看一下 wxml 里面的代码,主要是放了一个 canvas 标签,控制了一下高度和宽度属性。

<view>
<canvas class='share-canvas' style="width:100%;height:{{canvasHeight}}px" canvas-id="share_canvas"></canvas>
</view>

武将图片

drawHeroImage: function (path) {
var that = this;
// 拿到canvas context
let ctx = wx.createCanvasContext('share_canvas');
// 为了保证图片比例以及绘制的位置,先要拿到图片的大小
wx.getImageInfo({
src: path,
success: function (res) {
// 计算图片占比信息 
let maxWidth = Math.min(res.width, that.data.canvasWidth * 0.65);
let radio = maxWidth / res.width;
let offsetY = (that.data.canvasHeight - res.height * radio) / 2;
console.log('offsetY=' + offsetY);
that.setData({
imageWidth: res.width * radio,
imageHeight: res.height * radio,
offsetY: offsetY,
});
// 绘制canvas背景,不属于绘制图片部分
ctx.setFillStyle('white')
ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasHeight);
// 绘制武将图片,path是本地路径,不可以传网络url,如果是网络图片需要先下载
ctx.drawImage(path, 10, offsetY, res.width * radio, res.height * radio)
// 绘制小程序码
that.drawQrCodeImage(ctx);
// 绘制势力汉字:吴
that.drawInfluence(ctx, that.data.hero.HERO.INFLUENCE);
// 绘制武将姓名:陆逊
that.drawName(ctx, that.data.hero.HERO.NAME);
// 绘制武将称号:江陵侯
that.drawHorner(ctx, that.data.hero.HERO.HORNER);
// 最终调用draw函数,生成预览图
// 一个坑点:只能调用一次,否则后面的会覆盖前面的
ctx.draw();
}
});
}

小程序码

小程序码和武将图片是一个类型,无非就是需要计算绘制的位置,这里就不再展示相关代码了。

武将文字信息

从刚刚的代码可以看出,我分了3个部分来绘制,其实 吴 和 陆逊 应该是可以放到一起的,但是我在绘制的时候发现,空格在绘制的时候会引起异常,导致空格后面的文字无法绘制出来,所以我这里 吴 和 陆逊 中间的空白是靠位置偏移来做的。

这里就展示一下如何绘制武将称号的。

// 绘制武将称号:江陵侯
drawHorner: function (ctx, text) {
// 设置字号
ctx.setFontSize(26);
// 设置字体颜色
ctx.setFillStyle("#000000");
// 计算绘制起点
let x = this.data.offsetX + 35;
let y = this.data.offsetY + 10;
console.log('drawHorner' + text);
console.log(x);
console.log(y);
// 绘制竖排文字,这里是个Util函数,具体实现请继续看
Canvas.drawTextVertical(ctx, text, x, y);
}

绘制竖排文字从网上找了个开源的代码,需要看原理的请看这里

当然我这里为了适用小程序做了些改动,函数原型是这样子的:

CanvasRenderingContext2D.prototype.letterSpacingText = function (text, x, y, letterSpacing)

原谅我不是很会 js ,完全不懂这是个什么语法,看了一会没弄懂,感觉像是给类添加新的属性,不管他。

不管白猫黑猫,能抓到耗子就是好猫

改造后的函数像下面的样子:

canvas.js 
/**
* @author zhangxinxu(.com)
* @licence MIT
* @description http://www.zhangxinxu.com/wordpress/?p=7362
*/
function drawTextVertical(context, text, x, y) {
var arrText = text.split('');
var arrWidth = arrText.map(function (letter) {
return 26;
// 这里为了找到那个空格的 bug 做了许多努力,不过似乎是白费力了
// const metrics = context.measureText(letter);
// console.log(metrics);
// const width = metrics.width;
// return width;
});
var align = context.textAlign;
var baseline = context.textBaseline;
if (align == 'left') {
x = x + Math.max.apply(null, arrWidth) / 2;
} else if (align == 'right') {
x = x - Math.max.apply(null, arrWidth) / 2;
}
if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') {
y = y - arrWidth[0] / 2;
} else if (baseline == 'top' || baseline == 'hanging') {
y = y + arrWidth[0] / 2;
}
context.textAlign = 'center';
context.textBaseline = 'middle';
// 开始逐字绘制
arrText.forEach(function (letter, index) {
// 确定下一个字符的纵坐标位置
var letterWidth = arrWidth[index];
// 是否需要旋转判断
var code = letter.charCodeAt(0);
if (code <= 256) {
context.translate(x, y);
// 英文字符,旋转90°
context.rotate(90 * Math.PI / 180);
context.translate(-x, -y);
} else if (index > 0 && text.charCodeAt(index - 1) < 256) {
// y修正
y = y + arrWidth[index - 1] / 2;
}
context.fillText(letter, x, y);
// 旋转坐标系还原成初始态
context.setTransform(1, 0, 0, 1, 0, 0);
// 确定下一个字符的纵坐标位置
var letterWidth = arrWidth[index];
y = y + letterWidth;
});
// 水平垂直对齐方式还原
context.textAlign = align;
context.textBaseline = baseline;
}
module.exports = {
drawTextVertical: drawTextVertical
}

绘制网络图片

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

downloadHeroImage: function () {
// 微信不支持非https的图片下载,这里了个替换
let url = this.data.hero.HERO.ICON.replace(/http/, "https");
var that = this;
wx.downloadFile({
url: url,
success: function (res) {
// 下载成功后拿到图片的路径,然后开始绘制
var path = res.tempFilePath;
that.drawHeroImage(path);
}, fail: function (res) {
console.log(res)
}
});
}

保存图片

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

saveShareImage: function () {
wx.showLoading({
title: '正在保存图片..',
});
let that = this;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.canvasWidth,
height: that.data.canvasHeight,
canvasId: 'share_canvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(res);
wx.showToast({
title: '保存到相册成功',
duration: 1500,
})
},
fail(res) {
console.log(res)
wx.showToast({
title: '保存到相册失败',
icon: 'fail'
})
},
complete(res) {
console.log(res)
}
})
}
})
}

开源

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
js+html实现周岁年龄计算器
Jun 25 #Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 #Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 #Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 #Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 #Javascript
ES6 Object属性新的写法实例小结
Jun 25 #Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP实现ftp上传文件示例
2014/08/21 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP xpath()函数讲解
2019/02/11 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python 创建弹出式菜单的实现代码
2017/07/11 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
python用什么编辑器进行项目开发
2020/06/17 Python
大学自荐信
2013/12/12 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
学校学期工作总结
2015/08/13 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang