需求, 使用 canvas 绘制图片和文字, 生成图片
官方文档
- wxml:
- <!--pages/canvas/canvas.wxml-->
- <view>
- <view class="container">
- <button bind:tap="start" class="start" size="mini">选择图片</button>
- <button bind:tap="downloadCanvas" class="downloadCanvas" size="mini">下载</button>
- <button bind:tap="share" class="share" size="mini">分享</button>
- <!-- 分享图片功能 -->
- </view>
- <text>canvas 区域</text>
- <canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px;border: 1px solid grey;' canvas-id='myCanvas'></canvas>
- <image v-if="previewImage" :src="{{canvasImage}}"></image>
- </view>
效果图
布局太简单, 就不展示了
选择图片功能
先设置 canvas 区域的宽度和高度
JS 代码
- data: {
- title: 'canvas 绘制图片',
- canvasWidth: '', // canvas 宽度
- canvasHeight: '', // canvas 高度
- imagePath: '', // 分享的图片路径
- leftMargin: 0,
- topMargin: 0,
- imgInfo: {},
- ctx: [],
- canvasImage: '',
- previewImage: false,
- imgProportion: 0.8, // 图片占 canvas 画布宽度百分比
- imgToTop: 100 // 图片到 canvas 顶部的距离
- },
- onLoad: function(options) {
- var that = this
- var sysInfo = wx.getSystemInfo({
- success: function(res) {
- that.setData({
- canvasWidth: res.windowWidth,
- // 我这里选择 canvas 高度是系统高度的 80%
- canvasHeight: res.windowHeight * 0.8
- })
- // 根据图片比例, 使图片居中
- let leftMargin = (res.windowWidth * (1 - that.data.imgProportion)) / 2
- that.setData({
- leftMargin
- })
- }
- })
- }
接下来选择图片
- // 点击选择图片按钮触发
- start: function() {
- let that = this
- let ctx = wx.createCanvasContext('myCanvas')
- // 设置 canvas 背景色, 否则制作的图片是透明的
- ctx.setFillStyle('#f8f8f8')
- ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasHeight)
- this.addImage(ctx)
- },
- // 添加图片
- addImage: function(ctx) {
- var that = this;
- let imgInfo = that.data.imgInfo
- var path
- wx.chooseImage({
- count: '1',
- success(res) {
- wx.getImageInfo({
- src: res.tempFilePaths[0],
- success: function(response) {
- // 返回的 response 里有图片的临时路径和图片信息(高度 / 宽度)
- that.setData({
- imgInfo: response,
- path: response.path
- })
- that.drawImage(ctx)
- }
- })
- }
- })
- this.addTitle(ctx)
- },
绘制文字和图片
- // 绘制图片
- drawImage(ctx) {
- let that = this
- let imgInfo = that.data.imgInfo
- let path = that.data.path
- // 计算图片宽度 宽度固定 高度等比缩放
- let imgWidth = that.data.canvasWidth * that.data.imgProportion
- let imgHeight = imgInfo.height / imgInfo.width * imgWidth
- // drawImage 参数, 下面会说明
- ctx.drawImage(path, 0, 0, imgInfo.width, imgInfo.height, that.data.leftMargin, that.data.imgToTop, imgWidth, imgHeight)
- ctx.draw()
- that.data.previewImage = true
- },
- // 绘制文字
- addTitle: function(ctx) {
- var str = this.data.title
- ctx.font = 'normal bold 16px sans-serif';
- ctx.setTextAlign('center'); // 文字居中
- ctx.setFillStyle("#222222");
- ctx.fillText(str, this.data.canvasWidth / 2, 45) // 文字位置
- },
drawImage 方法
官方文档
drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) .drawImage 函数有三种函数原型:
drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像, 并在画布上定位被剪切的部分 从 1.9.0 起支持
参数描述
image
所要绘制的图片资源(网络图片要通过 getImageInfo / downloadFile 先下载)
sx
需要绘制到画布中的, image 的矩形 (裁剪) 选择框的左上角 x 坐标
sy
需要绘制到画布中的, image 的矩形 (裁剪) 选择框的左上角 y 坐标
sWidth
需要绘制到画布中的, image 的矩形 (裁剪) 选择框的宽度
sHeight
需要绘制到画布中的, image 的矩形 (裁剪) 选择框的高度
dx
image 的左上角在目标 canvas 上 x 轴的位置
dy
image 的左上角在目标 canvas 上 y 轴的位置
dWidth
在目标画布上绘制 imageResource 的宽度, 允许对绘制的 image 进行缩放
dHeight
在目标画布上绘制 imageResource 的高度, 允许对绘制的 image 进行缩放
图片可能更直观
image.PNG
下载图片
- // 点击下载按钮保存 canvas 图片
- downloadCanvas: function() {
- let that = this;
- // 判断用户是否选择了图片
- if (that.data.previewImage) {
- wx.canvasToTempFilePath({
- x: 0,
- y: 0,
- width: that.canvasWidth,
- height: that.canvasWidth,
- destWidth: that.canvasWidth,
- destHeight: that.canvasHeight,
- canvasId: 'myCanvas',
- success: function success(res) {
- wx.saveImageToPhotosAlbum({
- filePath: res.tempFilePath,
- success(res) {
- console.log(res, '保存')
- }
- })
- }
- });
- } else {
- wx.showToast({
- title: '请先选择图片',
- image: '../../static/img/error.png'
- })
- }
- }
分享图片
- // 分享图片
- share() {
- let that = this
- if (that.data.previewImage) {
- wx.canvasToTempFilePath({
- x: 0,
- y: 0,
- width: that.canvasWidth,
- height: that.canvasWidth,
- destWidth: that.canvasWidth,
- destHeight: that.canvasHeight,
- canvasId: 'myCanvas',
- success: function success(res) {
- wx.showToast({
- icon: 'none',
- title: '长按图片分享',
- duration: 1500
- })
- setTimeout(
- () => {
- wx.previewImage({
- urls: [res.tempFilePath]
- })
- }, 1000)
- }
- })
- } else {
- wx.showToast({
- title: '请先选择图片',
- image: '../../static/img/error.png'
- })
- }
- }
来源: http://www.jianshu.com/p/1e54146b8a26