微信小程序canvas画布转成图片并在转发里面形成图片转发

  onReady() {var that = thisvar rpx = wx.getSystemInfoSync().windowWidth / 375;       //加入rpx进行手机适配const query = wx.createSelectorQuery()query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatio         //刷新手机频率canvas.width = res[0].width * dpr  canvas.height = res[0].height * dpr  ctx.scale(dpr, dpr)setTimeout(() => {let pic = canvas.createImage();pic.src = '../../images/ic_kaopu.png';               //可以是本地，也可以是网络图片pic.onload = () => {ctx.drawImage(pic, 0, 0, 305 * rpx , 305 * rpx);}ctx.globalCompositeOperation = "destination-over";ctx.font = "bold 14px PingFang"let canvasTitleArray = this.data.jobDetail.recruitmentName.split(""); //文本...let firstTitle = ""; //第一行字let secondTitle = ""; //第二行字for (let i = 0; i < canvasTitleArray.length; i++) {let element = canvasTitleArray[i];let firstWidth = ctx.measureText(firstTitle).width;//console.log(ctx.measureText(firstTitle).width);if (firstWidth > 150) {let secondWidth = ctx.measureText(secondTitle).width;//第二行字数超过，变为...if (secondWidth > 0) {secondTitle += "";break;} else {secondTitle += "...";}} else {firstTitle += element;}}//第一行文字ctx.fillText(firstTitle, 45* rpx , 130* rpx , 280* rpx, 100* rpx )//绘制文本//第二行文字if (secondTitle) {ctx.fillText(secondTitle, 205* rpx, 131* rpx , 280* rpx , 100* rpx)//绘制文本}// ctx.fillText(this.data.jobDetail.recruitmentName, 45 * rpx, 130 * rpx, 280 * rpx, 100 * rpx)  //左 上 右 下// ctx.fillStyle = "#2A323E"// ctx.strokeStyle='#ffffff'// ctx.fillRect(30, 75, 200, 40)ctx.lineWidth = 1// ctx.setLineJoin='round'ctx.strokeStyle="#CB8F36"ctx.strokeRect(45* rpx, 140* rpx , 120 * rpx, 20* rpx)ctx.font = '12px PingFang';let canvasTitleArrays = this.data.jobDetail.jobName.split("");let firstTitles = ""; //第一行字let secondTitles = ""; //第二行字for (let k = 0; k < canvasTitleArrays.length; k++) {let elements = canvasTitleArrays[k];let firstWidths = ctx.measureText(firstTitles).width;if (firstWidths > 70) {let secondWidths = ctx.measureText(secondTitles).width;//第二行字数超过，变为...if (secondWidths > 1) {secondTitles += "..";break;} else {secondTitles += "...";}} else {firstTitles += elements;}}//第一行文字ctx.fillText(firstTitles, 50* rpx , 155* rpx , 250* rpx, 150* rpx )//绘制文本//第二行文字if (secondTitles) {ctx.fillText(secondTitles,141* rpx , 157* rpx, 250* rpx , 150* rpx)//绘制文本}// ctx.fillText(this.data.jobDetail.jobName, 50 * rpx, 155 * rpx, 250 * rpx, 150 * rpx)ctx.fillStyle = "#E8595C"ctx.font = 'bold 20px PingFang';ctx.fillText(this.data.jobDetail.dayPrice + '/天', 190* rpx , 160 * rpx, 80* rpx , 100 * rpx)ctx.fillStyle = "#4B4B4B"ctx.font = '12px PingFang';ctx.fillText(this.formatTimeTwo(this.data.jobDetail.startTime / 1000, 'Y/M/D') + '-', 45* rpx, 190* rpx, 100* rpx, 180* rpx )ctx.fillText(this.formatTimeTwo(this.data.jobDetail.endTime / 1000, 'Y/M/D'), 116* rpx, 190* rpx , 100* rpx , 180* rpx)ctx.fillText('需' + this.data.jobDetail.demandNumber + '人', 185* rpx, 190* rpx , 50 * rpx, 100* rpx )if(this.data.jobDetail.agent == 1){let datas = this.data.jobDetail.extend.splice(0, 3);var Y = 0;for (var index in datas) {// console.log(datas[index].dictName)if(datas[index].dictName == '饮食' || datas[index].dictName == '住宿' || datas[index].dictName == '结算方式'){ctx.fillStyle = "#E8595C"ctx.font = '15px PingFang';ctx.fillText(datas[index].value[0].dictName, 45* rpx  + Y, 215* rpx, 80* rpx , 100* rpx )Y += 70 * rpx}} }else{if(this.data.jobDetail.dietMode == 1){ctx.fillStyle = "#E8595C"ctx.font = '10px PingFang';ctx.fillText('包吃', 45* rpx , 215* rpx, 80* rpx , 100* rpx )}else if(this.data.jobDetail.dietMode == 2){ctx.fillStyle = "#E8595C"ctx.font = '10px PingFang';ctx.fillText('现场可做饭', 45* rpx , 215* rpx, 80* rpx , 100* rpx )}else{ctx.fillStyle = "#E8595C"ctx.font = '10px PingFang';ctx.fillText('现场不能做饭', 45* rpx , 215* rpx, 80* rpx , 100* rpx )}if(this.data.jobDetail.residenceMode == 1){ctx.fillStyle = "#E8595C"ctx.font = '10px PingFang';ctx.fillText('包住', 120* rpx , 215* rpx, 80* rpx , 100* rpx )}else if(this.data.jobDetail.residenceMode == 2){ctx.fillStyle = "#E8595C"ctx.font = '10px PingFang';ctx.fillText('现场可住', 120* rpx , 215* rpx, 80* rpx , 100* rpx )}else{ctx.fillStyle = "#E8595C"ctx.font = '10px PingFang';ctx.fillText('现场不能住宿', 120* rpx , 215* rpx, 80* rpx , 100* rpx )}if(this.data.jobDetail.settlementMode == 1){ctx.fillStyle = "#E8595C"ctx.font = '10px PingFang';ctx.fillText('日结', 195* rpx , 215* rpx, 80* rpx , 100* rpx )}else if (this.data.jobDetail.settlementMode == 2){ctx.fillStyle = "#E8595C"ctx.font = '10px PingFang';ctx.fillText('月结', 195* rpx , 215* rpx, 80* rpx , 100* rpx )}else{ctx.fillStyle = "#E8595C"ctx.font = '10px PingFang';ctx.fillText('按进度结', 195* rpx , 215* rpx, 80* rpx , 100* rpx )}}}, 500);//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时wx.showToast({title: '加载中...',icon: 'loading',duration: 1000});//绘制图片setTimeout(function () {wx.canvasToTempFilePath({// canvasId: 'myCanvas',x: 0,y: 0,width: 500,height: 350,destWidth: 999,destHeight: 809,canvas: canvas,complete(res) {console.log(res.tempFilePath)that.setData({imagePath: res.tempFilePath})}})}, 1000)})},//调用可以直接计算出时间戳的时间formatTimeTwo(number, format) {var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];var returnArr = [];var date = new Date(number * 1000);returnArr.push(date.getFullYear());returnArr.push((date.getMonth() + 1));returnArr.push((date.getDate()));returnArr.push((date.getHours()));returnArr.push((date.getMinutes()));returnArr.push((date.getSeconds()));for (var i in returnArr) {format = format.replace(formateArr[i], returnArr[i]);}return format;},//转发界面onShareAppMessage() {return {title: recruitmentName,imageUrl: this.data.imagePath}}

微信小程序canvas画布转成图片并在转发里面形成图片转发相关推荐

微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
微信小程序 canvas画布渲染云存储的图片
[已解决]问题: 在云开发小程序过程种,用canvas画布渲染云存储的图片,发现不能显示.用http带头的网络图片是可以显示的,用cloud带头的云存储图片就是不行.http带头的网络图片可以展示, ...
微信小程序Canvas画布绘制以及保存
<canvas canvas-id="firstCanvas" style="width: 320px;height: 500px;" bindlongt ...
微信小程序canvas画布不清晰解决方法
绘制的图片,文字等十分模糊添加以下代码,通过设置分辨率来解决 const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].w ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
微信小程序Canvas绘图API
微信小程序Canvas绘图API 前言使用姿势常用API(以下API都是通过CanvasContext对象进行调用) 颜色.样式 setFillStyle(string|CanvasGradien ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法发布时间:2020-10-04 18:20:31 来源:脚本之家阅读:103 作者:清夜微信小程序允许对普通元素通过 border-radius 的 ...

微信小程序canvas画布转成图片并在转发里面形成图片转发

微信小程序canvas画布转成图片并在转发里面形成图片转发相关推荐

最新文章

热门文章