效果图：

wxml

<view><canvas type="2d" id="canvas_box" style="width:260px;height:430px "></canvas><button class='bottom' catchtap="bc" canvas-id="mycanvas"> 保存到相册    </button>
</view>

type：指定 canvas 类型

id：canvas 组件的唯一标识符

样式根据自己情况自定义

page{background: rgb(223, 165, 165);}
canvas{margin:20rpx auto;border: 1rpx solid #ccc;background: #fff;color: #fff;
}

js重点

（完整js代码在最下面）

  onReady: function () {const query = wx.createSelectorQuery()query.select('#canvas_box').fields({id: true,node: true,size: true}).exec(this.init.bind(this));},

id:true 是否返回节点 id

node:true 是否返回节点对应的 Node 实例

size:true 是否返回节点尺寸（width height）

wx.createSelectorQuery()

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。

select

在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。

selector 语法

selector类似于 CSS 的选择器，但仅支持下列语法。

ID选择器：#the-id
class选择器（可以连续指定多个）：.a-class.another-class
子元素选择器：.the-parent > .the-child
后代选择器：.the-ancestor .the-descendant
跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
多选择器的并集：#a-node, .some-other-nodes

fields

获取节点的相关信息。需要获取的字段在fields中指定。返回值是 nodesRef 对应的 selectorQuery

注意

computedStyle 的优先级高于 size，当同时在 computedStyle 里指定了 width/height 和传入了 size: true，则优先返回 computedStyle 获取到的 width/height。

 init(res) {console.log(res)const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatio//新接口需显示设置画布宽高；canvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.scale(dpr, dpr);this.setData({canvas,ctx});//向画布方法this.canvasDraw(ctx);this.title(ctx);this.name(ctx)this.code(ctx).then(rrr=>{this.hande(ctx)})},

wx.getSystemInfoSync() // wx.getSystemInfo 的同步版本

通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，实现了 HTML Canvas 2D Context 定义的属性、方法。

画图

  canvasDraw(ctx) {let img = this.data.canvas.createImage(); img.src = "img/2.jpg";img.onload = () => {this.data.ctx.drawImage(img, 0, 0, 260, 260);};},

let img = this.data.canvas.createImage(); //创建img对象

img.src = "图片地址"

img.onload 图片加载监听

this.data.ctx.drawImage(img, 10, 10, 260, 260); // (图片，左距离，上距离，宽，高）

画文字

title(ctx) {// ctx.setFontSize(12)let text = '接小程序开发，web开发，H5开发，小程序云开发，PHP开发'let moy =  '有需要的直接微信扫码'ctx.font = 'normal bold 12px sans-serif';ctx.fillStyle = "rgba(60, 59, 59)";console.log('======,', text.length)if (text.length <= 19) {ctx.fillText(text, 10, 275, 280)ctx.fillStyle = "rgba(0,0,0)";ctx.font = 'normal bold 16px sans-serif';ctx.fillStyle = "red";ctx.fillText(moy, 10, 290, 280)}if (text.length <= 38) {let firstLine = text.substring(0, 20);let secondLine = text.substring(20, 38);ctx.fillText(firstLine, 10, 275, 280)ctx.fillText(secondLine, 10, 290, 280)ctx.fillStyle = "rgba(0,0,0)";ctx.font = 'normal bold 16px sans-serif';ctx.fillStyle = "red";ctx.fillText(moy, 10, 315, 280)} else {let firstLine = text.substring(0, 20);let secondLine = text.substring(20, 38) + '...';ctx.fillText(firstLine, 10, 280, 280)ctx.fillText(secondLine, 10, 295, 280)ctx.font = 'normal bold 16px sans-serif';ctx.fillStyle = "red";ctx.fillText(moy, 10, 320, 280)}},

保存到相册

普通的保存

wx.canvasToTempFilePath({x: 100,y: 200,width: 50,height: 50,destWidth: 100,destHeight: 100,canvasId: 'myCanvas',success(res) {console.log(res.tempFilePath)}
})

2d的保存

  bc() {// 保存到相册console.log('保存canvasId',this.data.canvas._canvasId)wx.canvasToTempFilePath({     //将canvas生成图片canvas:this.data.canvas,x: 0,y: 0,width: this.data._width,height: this.data._height,destWidth: this.data._width,     //截取canvas的宽度destHeight:this.data._height,   //截取canvas的高度success: function (res) {console.log('生成图片成功：',res)wx.saveImageToPhotosAlbum({  //保存图片到相册filePath: res.tempFilePath,success: function () {wx.showToast({title: "保存图片成功！",duration: 2000})}})},},this)},

注意两者区别:请参考官方文档

完整js代码

Page({data: {},onLoad: function () {},onReady: function () {const query = wx.createSelectorQuery()query.select('#canvas_box').fields({id: true,node: true,size: true}).exec(this.init.bind(this));},init(res) {console.log(res)const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatio//新接口需显示设置画布宽高；canvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.scale(dpr, dpr);this.setData({canvas,ctx});//向画布载入图片的方法this.canvasDraw(ctx);//向画布载入标题的方法this.title(ctx);this.name(ctx)this.code(ctx).then(rrr=>{// 头像加载this.hande(ctx)})},// 封面图canvasDraw(ctx) {let img = this.data.canvas.createImage(); //创建img对象img.src = "img/2.jpg";img.onload = () => {console.log(img.complete); //truethis.data.ctx.drawImage(img, 0, 0, 260, 260);};},// 标题title(ctx) {// ctx.setFontSize(12)let text = '接小程序开发，web开发，H5开发，小程序云开发，PHP开发'let moy =  '有需要的直接微信扫码'ctx.font = 'normal bold 12px sans-serif';ctx.fillStyle = "rgba(60, 59, 59)";console.log('======,', text.length)if (text.length <= 19) {// 一行字ctx.fillText(text, 10, 275, 280)ctx.fillStyle = "rgba(0,0,0)";}else if (text.length <= 38) {// 两行字let firstLine = text.substring(0, 20);//第一行let secondLine = text.substring(20, 38);第二行ctx.fillText(firstLine, 10, 275, 280)ctx.fillText(secondLine, 10, 290, 280)} else {// 超过两行省略多的加省略号let firstLine = text.substring(0, 20);let secondLine = text.substring(20, 38) + '...';ctx.fillText(firstLine, 10, 280, 280)ctx.fillText(secondLine, 10, 295, 280)}ctx.font = 'normal bold 16px sans-serif';ctx.fillStyle = "red";ctx.fillText(moy, 10, 320, 280)},// 头像hande(ctx) {let hande = this.data.canvas.createImage(); //创建img对象hande.onload = () => {console.log(hande.complete); //true// 绘制头像图片ctx.arc(30, 370, 40/2, 0, 2 * Math.PI) //画出圆ctx.clip(); //裁剪上面的圆形ctx.drawImage(hande, 10, 350, 40, 40)ctx.restore();};hande.src = "img/1.jpg";},// 名字name(ctx){ctx.fillStyle = "rgba(60, 59, 59)";ctx.font = 'normal bold 12px sans-serif';ctx.fillText('Loust', 60, 365, 280)ctx.fillStyle = "rgba(60, 59, 59)";ctx.font = 'normal bold 10px sans-serif';ctx.fillStyle = "#999";ctx.fillText('希望大佬们能够多多指教', 60, 380, 280)},// 二维码code(ctx) {return new Promise(rrr=>{let code = this.data.canvas.createImage(); //创建img对象code.onload = () => {console.log(code.complete); //truethis.data.ctx.drawImage(code, 180, 340, 60, 60);};code.src = "img/code.jpg";setTimeout(() => {rrr(true)}, 100);})},bc() {// 保存到相册console.log('保存canvasId',this.data.canvas._canvasId)wx.canvasToTempFilePath({     //将canvas生成图片canvas:this.data.canvas,x: 0,y: 0,width: this.data._width,height: this.data._height,destWidth: this.data._width,     //截取canvas的宽度destHeight:this.data._height,   //截取canvas的高度success: function (res) {console.log('生成图片成功：',res)wx.saveImageToPhotosAlbum({  //保存图片到相册filePath: res.tempFilePath,success: function () {wx.showToast({title: "保存图片成功！",duration: 2000})}})},},this)},
})

微信小程序2D canvas绘制分享海报相关推荐

微信小程序使用canvas绘制分享海报
一.准备工作最近在做的一个vue项目中,需要做一个分享海报,头秃!!! 首先确定海报那些地方是随机变动的.海报背景.引用二维码生成组件(目前市场上有很多生成二维码的组件,这个项目用的是uqrcode ...
微信小程序使用canvas生成分享海报功能复盘
前言近期需要开发一个微信小程序生成海报分享的功能.在h5一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理.但是由于小程序不具备传统意义的dom元素,所以也没有办法 ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序新版canvas绘制图片方法
截至2022.12.23 修改日微信小程序开发文档介绍不全,导致很多用户绘制图片不显示或失败,因此写下截至目前的可行方案 <canvas type="2d" id=&quo ...
微信小程序使用canvas绘制圆角矩形在Android：变形、锯齿
这两天用小程序实现分享生成海报,那我的手机测的一直没问题,结果后来用同事的小米测发现:画的图形缺个角,锯齿形的,根据小程序社区回复:使用ctx.arc + ctx.lineTo就能避免Android错 ...
微信小程序通过canvas绘制所需图片形状。（文章以直角梯形进行说明）
通过这种方法可以快捷的完成一些设计的效果. index.wxml //新建一个画板. 1 <canvas canvas-id="myCanvas" style="b ...

微信小程序2D canvas绘制分享海报

wxml

样式根据自己情况自定义

js重点

画图

画文字

保存到相册

微信小程序2D canvas绘制分享海报相关推荐

最新文章

热门文章