效果图
橘子可以放上小程序码或者其他什么码
代码:
wxml
<!--画布--> <canvas style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;" canvas-id="firstCanvas"></canvas><view class='main'><!--提示标题--><view wx:if='{{finishh}}'>(海报已生成,放大长按图片保存分享)</view><!--生成的图片--><image bindtap='preview' mode='widthFix' src='{{tempFile}}'></image></view>
wxss
page{width: 100%;height: 100%;background: #ffa71f;}.main view{font-size: 26rpx;color: white;text-align: center;margin-top: 80rpx;}.save-button {position: fixed;width: 80rpx;height: 80rpx;bottom: 40rpx;right: 40rpx;border-radius: 50rpx;z-index: 200;background: rgba(0, 0, 0, 0.75);}.save-button .share-image {position: absolute;top: 22rpx;left: 22rpx;width: 36rpx;height: 36rpx;}/*将canvas移到看不到的地方生成*/canvas{position: absolute;left: 0;right: 0;top: -9999rpx;bottom: 0;margin: auto;}.main image{width: 80%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
JS
var app = getApp();Page({canvasIdErrorCallback: function (e) {console.error(e.detail.errMsg)},onReady: function (e) {var that = thiswx.showLoading({title: '生成中',})//设个定时器防止异步的问题setTimeout(function () {//初始化画布背景宽高及内容宽高变量var avatarUrl = app.globalData.userInfo.avatarUrlvar myCanvasWidth var myCanvasHeight var myCanvasWidth1var myCanvasHeight1//获取手机屏幕尺寸并给画布宽高赋值wx.getSystemInfo({success: function (res) {console.log(res)// myCanvasWidth = res.windowWidth - 56// myCanvasHeight = res.windowHeight - 100myCanvasWidth = res.windowWidthmyCanvasHeight = res.windowHeightmyCanvasWidth1 = res.windowWidth myCanvasHeight1 = res.windowHeight},})console.log(myCanvasWidth, myCanvasHeight)console.log("宽：" + parseInt(myCanvasWidth / 5), "高:" + parseInt(myCanvasHeight / 7.88))// var avatarurl_width = parseInt (myCanvasWidth / 5); //绘制的头像宽度//将方形图片处理成圆形头像var avatarurl_heigth = parseInt(myCanvasHeight / 8); //绘制的头像高度var avatarurl_width = avatarurl_heigthvar avatarurl_x = myCanvasWidth / 2 - (avatarurl_width / 2); //绘制的头像在画布上的位置var avatarurl_y = myCanvasHeight / 7 - (avatarurl_heigth / 2); //绘制的头像在画布上的位置that.setData({canvasWidth: myCanvasWidth,canvasHeight: myCanvasHeight,canvasWidth1: myCanvasWidth1,canvasHeight1: myCanvasHeight1})//初始化画布var context1 = wx.createCanvasContext('firstsCanvas')context1.rect(0, 0, myCanvasWidth, myCanvasHeight)context1.setFillStyle('#ffa71f')context1.fill()context1.draw()// 使用 wx.createContext 获取绘图上下文 contextvar context = wx.createCanvasContext('firstCanvas')context.setFillStyle('#ffa71f')context.fillRect(0, 0, myCanvasWidth, myCanvasHeight)context.drawImage("/img/bak1.png", myCanvasWidth / 2 - ((myCanvasWidth - 50) / 2), myCanvasHeight / 2 - ((myCanvasHeight - 50)/2) , myCanvasWidth-50, myCanvasHeight-50)context.fill()// context.rect(0, 0, myCanvasWidth, myCanvasHeight)context.save();context.beginPath(); //开始绘制//先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);context.clip();//画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因context.drawImage("/img/public/avatar.jpg", avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制context.setFontSize(20)context.setTextAlign('center')context.setFillStyle('#333333')context.fillText("用户名", myCanvasWidth / 2, myCanvasHeight / 4)context.setFillStyle('#333333')context.fillText("植物工厂生产研发", myCanvasWidth / 2, myCanvasHeight / 3)context.setFillStyle('red')context.fillText("5-8K", myCanvasWidth / 2, myCanvasHeight / 2.5)context.setFillStyle('#616161')context.setFontSize(15)context.fillText("武侯-红牌楼·1-3年·本科", myCanvasWidth / 2, myCanvasHeight / 2.2)context.setFillStyle('#ffa71f')context.setFontSize(15)context.fillText("入职赏200.00元推荐赏200.00元", myCanvasWidth / 2, myCanvasHeight / 1.95)/*小程序码*/context.drawImage("/img/test.jpg", myCanvasWidth / 2 - (myCanvasHeight / 10), (myCanvasHeight) / 1.6, myCanvasHeight / 5, myCanvasHeight / 5)context.setFillStyle('#333333')context.setFontSize(14)context.fillText("成都xxxxx公司 正在招聘", myCanvasWidth / 2, myCanvasHeight / 1.15)context.setFillStyle('#999999')context.setFontSize(12)context.fillText("(长按识别,了解职位详情)", myCanvasWidth / 2, myCanvasHeight / 1.1)context.draw()//定时器作用同上setTimeout(function () {wx.hideLoading();that.setData({finishh:true})//将canvas转换成图片wx.canvasToTempFilePath({x: 0,y: 0,canvasId: 'firstCanvas',success: function (res) {console.log(res)var tempArr = []tempArr.push(res.tempFilePath)that.setData({tempFile: tempArr})},fail: function (res) {}})}, 1000)}, 1000)},data:{tempFile:[],finishh:false},preview:function(){wx.previewImage({urls: this.data.tempFile,})},})
这样就可以绘制一张海报然后生成图片保存分享了
如果觉得《小程序canvas绘制自适应海报并生成图片》对你有帮助，请点赞、收藏，并留下你的观点哦！
