一、图片透明及旋转

let ctx = wx.createCanvasContext('shareImg')
ctx.drawImage('../../../' + res[0].path, 0, 0, w, h)
ctx.save()
ctx.globalAlpha = 0.2
ctx.rotate(-15*Math.PI/180)

二、字体加粗

let text = '这是加粗的文本'
ctx.fillText(text, 194, 378 + 0.5)
ctx.fillText(text, 194 + 0.5, 378)
ctx.fillText(text, 194 , 378)

三、文本换行

this.canvasTextAutoLine('这是换行的文本',ctx,85,467,60,560)
/*
canvas文字换行
str:要绘制的字符串
ctx:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高,自己定义个值即可
canvasWidth:画布的宽度
*/
canvasTextAutoLine(str,ctx, initX, initY, lineHeight,canvasWidth) {
const arrText = str.split('')//字符串分割为数组
let currentText = ''// 当前字符串及宽度
let currentWidth
for (let letter of arrText) {
currentText += letter
currentWidth = ctx.measureText(currentText).width
if (currentWidth > canvasWidth) {
ctx.fillText(currentText, initX, initY)
currentText = ''
initY += lineHeight
}
}
if (currentText) {
ctx.fillText(currentText, initX, initY)
}
},

四、生成图片

注意:

  • 绘制本地图片直接写入相对路径即可:ctx.drawImage('../../images/xxx.png',x, y, w, h)。
  • 如果图片来自网络,首先需要在小程序服务器域名配置downloadFile的合法域名,必须为https协议,不然真机上是绘制不出来的。
  • 如果网络图片地址是异步请求过来的数据,需要先使用wx.downloadFile()的方式,把图片下载到本地,再把临时的本地路径使用drawImage()绘制:
wx.downloadFile({
url: src,
success: function (res) {
if(res.tempFilePath) {
ctx.drawImage(res.tempFilePath, x, y, w, h)
}
}
})
  • 如果有多张网络图片时,同样需要先等待所有的图片加载完,再去绘制。这里可以使用promise的方式来实现:
wx.showLoading({ title: '努力生成中...' })
//小程序本地路役图片
let promise1 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: '../../../images/bg1.png',
success: function (res) {
resolve(res)
},
fail: function (error) {
reject(error)
},
})
});
//网络异步请求
let promise2 = new Promise(function (resolve, reject) {
api.orderDetail().then(res => {
if(res.code == 0) {
resolve()
}
}).catch((error) => {
reject(error)
})
});
Promise.all([promise1,promise2]).then(result => {
let ctx = wx.createCanvasContext('shareImg')
ctx.drawImage('../../' + result[0].path, 0, 0, w, h)
ctx.save()
wx.downloadFile({
url: result[1].pic,
success: function (res) {
console.log(res)
if(res.tempFilePath) {
ctx.drawImage(res.tempFilePath, 178, 790, 216, 216) ctx.stroke()
//draw的第一个参数为false表示仅有一个画布
//第二个参数一定要加定时器,不然会出现生成的图片黑白
ctx.draw(false, setTimeout(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: w,
height: h,
destWidth: w,
destHeight: h,
canvasId: 'shareImg',
success: function (res) {
_this.setData({ "finishCreateCanvas": true })
},
fail: function (res) {
_this.createCanvasFail()
},
complete: function (res) {
wx.hideLoading()
}
})
}, 500))}
}
},fail: function (error) {
//如果有图片数据请求失败,在这里做进一步的处理
_this.createCanvasFail()
},
})
}).catch((error) => {
//如果有图片数据请求失败,在这里做进一步的处理
_this.createCanvasFail()
})

五、生成图片
生成图片之前必须保证canvas已经绘制完成,对此在使用wx.canvasToTempFilePath()方法可以使用定时器的形式保存为临时图片路径,代码已经在上面有所展示。

//生产环境时 记得这里要加入获取相册授权的代码
wx.saveImageToPhotosAlbum({
filePath: _this.data.prurl,
success(res) {
wx.showModal({
content: '图片已保存到相册,赶紧晒一下吧~',
showCancel: false,
confirmText: '好哒',
confirmColor: '#72B9C3',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
})
}
})

小程序canvas文本换行生成图片的更多相关文章

  1. 微信小程序 canvas 字体自动换行(支持换行符)

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

  2. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  3. 优化版小程序canvas,增加失败逻辑,及完善文字

    wxml <view class="shareBox" style="backgound:{{isShow ? '#000' : '#fff'}}" wx ...

  4. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  5. 微信小程序 | canvas绘图

    1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 ...

  6. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  7. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  8. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  9. 记录一下小程序canvas

    小程序canvas学习 效果图: .wxml <canvas style="width: 100vw; height: 100vh;" canvas-id="fir ...

随机推荐

  1. pandas模块篇(之三)

    今日内容概要 目标:将Pandas尽量结束 如何读取外部excel文件数据到DataFrame中 针对DataFrame的常用数据操作 索引与切片 操作DataFrame的字段名称 时间对象序列操作 ...

  2. 流程控制、if、elif、else,whilie、break、continue的使用

    今日内容 流程控制理论 if判断 while循环 流程控制概念 流程控制就是控制事物的执行流程 执行流程的分类 顺序结构 从上往下依次执行,代码运行流程图如下 分支结构 根据某些条件判断做出不同的运行 ...

  3. 使用Dapper访问SQL Server数据库

    对应Demo程序名:DapperDemo 准备工作:为项目安装Dapper类库 方法一:项目中添加:项目名右键:Manage NuGet Packages:搜索Dappe:点击安装 方法二:在NuGe ...

  4. 【爬虫】python爬虫

    爬虫章节 1.python如何访问互联网 URL(网页地址)+lib=>urllib 2.有问题查文档:python document. 3.response = urllib.request. ...

  5. PHP-文件上传封装类

    <?php $file = $_FILES['img']; $obj = new File(); $res = $obj->upload($file,'upload'); if($res) ...

  6. Sequelize关联查询,where影响全局的解决

    需求背景 系统字段关联公司字段表,通过查询所有的系统字段然后关联查询指定的公司对应的字段. 问题代码 const sysField = ctx.model.SysDictionary; const c ...

  7. 【黑马程序员C++ STL】学习记录

    黑马程序员 2017 C++ STL 教程(STL 部分已完结) 基于黑马STL课程整理:黑马程序员2017C++STL教程 视频链接 专栏:本STL专栏目录 文章目录 黑马程序员 2017 C++ ...

  8. 2.4 C++STL deque容器详解

    文章目录 2.4.1 引入 2.4.2 代码示例 2.4.3 代码运行结果 2.4.4 具体案例 总结 2.4.1 引入 deque容器类比vector容器来学习. deque为双向开口容器,见下图. ...

  9. 人生苦短,我用JRebel

    昨天看到团子推送的一篇关于热部署的文章,其中介绍了自研的Sonic插件在公司内部的应用.同时晒出来一张对比图: 团子表示我们的插件要比同类插件优秀哦.不过我定睛一看,好家伙,第一列的JRebel在图中 ...

  10. Linux常用性能诊断命令详解

    top top命令动态地监视进程活动与系统负载等信息. 使用示例: top 效果如下图: 以上命令输出视图中分为两个区域,一个统计信息区,一个进程信息区. 统计信息区: 第一行信息依次为:系统时间.运 ...