canvas绘制图片
绘制图片的问题html绘制图片的问题
1、canvas不能绘制网络图片需要转换成本地图片进行使用
2、多张图片绘制需要调用 img.onload，进行嵌套绘制
html
<view class="overlay-box"><view style="margin-top: 20px;"></view><scroll-view class="overlay-wrap" scroll-y="true" style="visibility:{{!canvasonload?'visible':'hidden'}}"><canvas id="{{canvasId}}" type="2d" class="share__canvas1" style="width: 100%; height:964rpx;"></canvas><view class="savebtn" bindtap="saveiImg"><van-button type="danger" size='large' round='{{true}}'> 保存</van-button></view></scroll-view></view>
data: {canvasId: 'canvasID',canvasonload: false, //加载状态bg1: config.host + 'volunteer_bg.png',//背景的网络图片cachet1: config.host + 'cachet.png',//公章的网络图片title_bg1:config.host + 'volunteer_title.png',//标题的网络图片bg2: '',cachet2: '',title_bg2:'',codeImg: '',},onLoad(options) {// 请求小程序二维码的接口，加载完毕在执行后续操作my.post(my.urls.Code,true).then(res => {if (res.code == 200) {this.getCanvas([this.data.bg1, this.data.cachet1,this.data.title_bg1,res.msg], 0)}})},getCanvas(urlArr, _type) {let _this = thiswx.getImageInfo({src: urlArr[_type],success: function (res) {//res.path是网络图片的本地地址if (_type === 0) {_this.setData({bg2: res.path,})_this.getCanvas(urlArr, 1)} else if(_type === 1){_this.setData({cachet2: res.path,})_this.getCanvas(urlArr, 2)}else if(_type === 2){_this.setData({title_bg2: res.path,})_this.getCanvas(urlArr, 3)}else if(_type === 3){_this.setData({codeImg: res.path,})var query = wx.createSelectorQuery().in(_this);query.select('#' + _this.data.canvasId).fields({node: true,size: true,}).exec(_this.drawImg.bind(_this))}}})},// 画图drawImg(res) {const that = thisconst width = res[0].widthconst height = res[0].heightconst canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)// 比例 canvas / 设计搞宽度const proportion = width / 335// 绘制图片const img = canvas.createImage();const img2 = canvas.createImage();const img3 = canvas.createImage();const img4 = canvas.createImage();// 背景图片img.src = this.data.bg2img.onload = () => {ctx.drawImage(img, 0, 0, proportion * 341, proportion * 500)// 标题图片img2.src = that.data.title_bg2img2.onload = () => {ctx.drawImage(img2, (width/2)-50, proportion * 40, 100, 100)// 绘制公章图片img3.src = that.data.cachet2img3.onload = () => {ctx.drawImage(img3, proportion * 194, proportion * 365, proportion*100, proportion*100)// 二维码图片img4.src = that.data.codeImgimg4.onload = () => {ctx.drawImage(img4, proportion * 23, proportion * 405, proportion *60, proportion *60)}}}ctx.fillStyle = "#C84141";ctx.font = proportion * 16 + "px PingFang SC-Medium, PingFang SC";drawText(ctx, '小老弟', proportion * 30, proportion * 191, proportion * 290, proportion * 290)// 证书内容ctx.fillStyle = "#20";ctx.font = proportion * 15 + "px PingFang SC-Medium, PingFang SC";drawText(ctx, '感谢您抽身百忙之中，参加我们的志愿者服务活动。为表达我们由衷的敬意，也为了鼓励更多人士加入我们，特为您颁发此证书，以兹纪念，谢谢。', proportion * 30, proportion * 240, proportion * 284, proportion * 20)// 查看二维码ctx.fillStyle = "#9D9D9D";ctx.font = proportion * 12 + "px PingFang SC-Medium, PingFang SC";drawText(ctx, '长按二维码', proportion * 88, proportion * 430, proportion * 290, proportion * 290)ctx.font = proportion * 12 + "px PingFang SC-Medium, PingFang SC";drawText(ctx, '查看更多公益项目', proportion * 88, proportion * 450, proportion * 290, proportion * 290)//基金会ctx.fillStyle = "#1E2235";ctx.font = proportion * 14 + "px PingFang SC-Medium, PingFang SC";drawText(ctx, '基金会', proportion * 180, proportion * 420, proportion * 284, proportion * 20)//日期ctx.font = proportion * 14 + "px PingFang SC-Medium, PingFang SC";drawText(ctx, '-12-16', proportion * 200, proportion * 450, proportion * 280, proportion * 20)wx.hideLoading({complete: that.setData({canvasonload: false})})}//文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度function drawText(ctx, str, leftWidth, initHeight, canvasWidth, titleHeight, bool) {var lineWidth = 0;var lastSubStrIndex = 0; //每次开始截取的字符串的索引for (let i = 0; i < str.length; i++) {lineWidth += ctx.measureText(str[i]).width;if (lineWidth > canvasWidth) {ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分// 行高initHeight += proportion * 30; //16为字体的高度lineWidth = 0;lastSubStrIndex = i;titleHeight += proportion * 18;}if (i == str.length - 1) {//绘制剩余部分ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);}}// 标题border-bottom 线距顶部距离titleHeight = titleHeight + proportion * 10;return titleHeight}myCanvas = canvas},// 保存图片saveiImg() {wx.showLoading({title: '图片保存中...',})wx.canvasToTempFilePath({// 将canvas生成图片canvas: myCanvas,success: (res) => {wx.saveImageToPhotosAlbum({//保存图片到相册filePath: res.tempFilePath,success: function (res) {wx.showToast({icon: 'success',title: "保存图片保存成功"})},fail: (err) => {if (err.errMsg) {//重新授权弹框确认wx.showModal({title: '提示',content: '您好,请先授权，在保存此图片。',showCancel: false,success(res) {if (res.confirm) {//重新授权弹框用户点击了确定wx.openSetting({//进入小程序授权设置页面success(settingdata) {if (settingdata.authSetting['scope.writePhotosAlbum']) {//用户打开了保存图片授权开关wx.saveImageToPhotosAlbum({filePath: respath,success: function (data) {wx.showToast({title: '保存成功',icon: 'success',duration: 2000})},})} else {//用户未打开保存图片到相册的授权开关wx.showModal({title: '温馨提示',content: '授权失败，请稍后重新获取',showCancel: false,})}}})}}})}wx.showToast({icon: 'error',title: "保存图片保存失败"})}})},fail: (err) => {console.log(err);},complete: () => {wx.hideLoading()}})},
