UniApp在微信小程序中的Canvas画布操作
-
画布建立
- 建立画布
<!-- 禁止画布被拖动 --> <canvas canvas-id="posterid" style="width:300rpx;height:400rpx;" disable-scroll="true" @touchstart="" @touchmove="" @touchend="" > </canvas>- js声明画布对象
var ctx = uni.createCanvasContext('posterid') //····绘画操作 ctx.draw(); //绘制图像 -
网络图片在画布中需要先下载到本地才可以绘入画布中，最后导出图片
-
下载网络图片（这一步要先准备好）
uni.downloadFile({ url: imgUrl, success: (res) => { if (res.statusCode === 200) { uni.setStorageSync('headImg',res.tempFilePath); } },fail: (err) => { console.log(err); } }) -
先确认是否可以获取到网络图片下载到本地后的信息才可以开始绘画
-
获取图片信息
getImageInfo(image) { //返回一个Promise对象，包含用户的信息 return new Promise((req, rej) => { uni.getImageInfo({ src: image, success: function(res) { req(res) }, }); }) }
-
-
-
绘制的几个方法
-
文本换行
/** * @desc canvas文字过长换行脚本 * @param {Object} ctx canvas对象 * @param {String} text 文字 * @param {Number} x 距离左边的宽度 * @param {Number} y 距离右边的宽度 * @param {Number} w 文本区域的宽度 * @param {Object} fontStyle 文本的字体风格/位置，有默认值 */ ctb (ctx,text,x,y,w,fontStyle) { ctx.save(); ctx.fillStyle = fontStyle.fillStyle; ctx.textAlign = fontStyle.textAlign; ctx.textBaseline = fontStyle.textBaseline; const chr = text.split(''); const row = []; let temp = ''; /* 判断如果末尾是，！。》 就不要换行 判断如果末尾是《 就要换行 */ for (let a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < w) { } else { if (/[，。！》]/im.test(chr[a])) { // console.log(`我是${chr[a]},我在末尾,我不换行`); temp += ` ${chr[a]}`; // 跳过这个字符 a++; } if (/[《]/im.test(chr[a - 1])) { // console.log(`我是${chr[a-1]},我在末尾,我要换行`); // 删除这个字符 temp = temp.substr(0, temp.length - 1); a--; } row.push(temp); temp = ''; } temp += chr[a] ? chr[a] : ''; } row.push(temp); for (let b = 0; b < row.length; b++) { ctx.fillText(row[b], x, y + b * fontStyle.lineHeight); } } -
矩形图片裁剪成原型
/** * @param {Object} ctx 创建的画布对象 * @param {Object} width 矩形的宽 * @param {Object} height 矩形的高 * @param {Object} x 矩形左上角x轴坐标点 * @param {Object} y 矩形左上角y轴坐标点 * @param {Object} url 绘制的图片的URL */ drawCircular(ctx,width, height, x, y, url) { var avatarurl_width = width; var avatarurl_heigth = height; var avatarurl_x = x; var avatarurl_y = y; ctx.save(); ctx.beginPath(); ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip(); ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); ctx.restore(); }
-
-
绘画需要异步执行
//海报绘制 async draw(){ var ctx = uni.createCanvasContext('posterid') //获取图片信息 let headImg = await this.getImageInfo(uni.getStorageSync("headImg")); //延迟绘制海报 setTimeout(() =>{ //绘画操作 //····················· ctx.draw(false,() =>{ //绘画成功的操作，可以存放保存图片 setTimeout(() =>{ uni.canvasToTempFilePath({ canvasId: 'posterid', destWidth: this.cropW * this.canvasScale * 5, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2 destHeight: this.cropH * this.canvasScale * 5, quality:1, fileType:'png', success: (res) => { if(res.errMsg == "canvasToTempFilePath:ok"){ uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success:(res) => { uni.showToast({ icon: 'none', position: 'bottom', title: "图片已下载至【图库】，请打开【图库】查看", }); },fail: (err) => { //重新提示用户打开保存图片的授权 if(err.errMsg === "saveImageToPhotosAlbum:fail auth deny"){ uni.showModal({ title: '提示', content: '需要您授权保存相册', showCancel: false, success(res) { if (res.confirm) { uni.openSetting({ success(settingdata) { if (settingdata.authSetting['scope.writePhotosAlbum']) { uni.showModal({ title: '提示', content: '获取权限成功,再次保存图片即可成功', showCancel: false, }) } else { uni.showModal({ title: '提示', content: '获取权限失败，无法保存到相册', showCancel: false }) } } }) } } }) }else{ uni.showToast({ icon: 'none', title: '下载失败', }); } } }); } }, }, this); },500) }) },1500) }
