onReady() {
var that = this
var rpx = wx.getSystemInfoSync().windowWidth / 375; //加入rpx进行手机适配
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const 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画布转成图片并在转发里面形成图片转发
最新推荐文章于 2024-09-17 22:40:26 发布