自定义分享内容
制图用的 原生的canvas
js 部分
Page({
/**
* 页面的初始数据
*/
data: {
canvasList: null,
CodeUrlbg: '../../status/image/1@2x.png', //背景图片
destMinWidth: 500, //背景宽度
maxHeight: 400, //背景高度
destMul: 2, //画布写出倍数
tempFilePath: ''
},
init(res) {
console.log('init----', res)
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio; //获取屏幕的像素比 值为2
//新接口需显示设置画布宽高； w*2 h*2
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr, dpr); //缩放
this.setData({
canvas,
ctx
});
//向画布载入图片的方法
this.canvasDraw(ctx, canvas).then(res => {
console.log('1', res)
// 向画布载入logo的方法
return this.code(ctx)
}).then(rrr => {
console.log('2', rrr)
//图片头像渲染完成之后，渲染文字
wx.nextTick(
this.title(ctx)
)
})
},
// 封面图 使用 pormise方法来输出 代码执行成功，返回一个成功标识出去
canvasDraw(ctx, canvas) {
return new Promise(res => {
let img = this.data.canvas.createImage(); //创建img对象
img.src = this.data.CodeUrlbg;
img.onload = () => {
console.log(img.complete); //true
this.data.ctx.drawImage(img, 0, 0, 250, 220);
setTimeout(() => {
res(true)
}, 100);
};
this.code();
})
},
// 头像 使用 pormise方法来输出 代码执行成功，返回一个成功标识出去
code(ctx) {
const that = this;
console.log(this.data.canvas)
console.log(this.data.canvas.createImage())
console.log
return new Promise(rrr => {
let code = this.data.canvas.createImage(); //创建img对象
code.onload = () => {
this.data.ctx.drawImage(code, 20, 76, 70, 70);
};
code.src = this.data.canvasList.skuList[0].image;
// code.src = this.data.resqrCodeUrl;
setTimeout(() => {
rrr(true)
}, 100);
})
},
//文字模块，不使用pormise，因为他是最后模块，所有不需要了
title(ctx) {
// let text = '接小程序开发，web开发，H5开发，小程序云开发，PHP开发'
let text = this.data.canvasList.productName
let moy = '￥' + this.data.canvasList.skuList[0].vipGroupPrice
ctx.font = 'normal bold 10px sans-serif';
ctx.fillStyle = "rgba(60, 59, 59)";
console.log('======,', text.length)
let firstLine = text.substring(0, 10); //文字切割方法
let secondLine = text.substring(10, 20) + '...'; //文字切割方法
ctx.fillText(firstLine, 100, 85, 280) // ctx.fillText(文字, 像素, 移动y, 移动x)
ctx.fillText(secondLine, 100, 105, 280) // ctx.fillText(文字, 像素, 移动y, 移动x) (canvas.width - context.measureText(str).width) / 2
ctx.fillStyle = "rgba(0,0,0)"; //添加颜色
ctx.font = 'normal bold 14px sans-serif'; //指定文字样式
ctx.fillStyle = "red"; //新增样式
// ctx.fillText(moy, 100, 145, 280)
ctx.fillText(moy, ((ctx.canvas.width-ctx.measureText(moy).width) / 2 -100), 145) // ctx.fillText(文字, 像素, 移动y, 移动x)
// ctx.canvas.width 获取画布的宽度 ctx.measureText(moy).width 获取价格的宽度
// (ctx.canvas.width-ctx.measureText(moy).width) / 2
// console.log(moy.measureText(str).width)
console.log(ctx.canvas.width)
console.log(ctx.measureText(moy).width)
setTimeout(() => {
this.bc()
}, 2000);
},
bc() {
// 保存到相册
var that = this
console.log('保存canvasId', this.data.canvas._canvasId)
wx.canvasToTempFilePath({ //将canvas生成图片
canvas: this.data.canvas,
x: 0,
y: 0,
width: 500,
height: 400,
destWidth: 500, //截取canvas的宽度
destHeight: 360, //截取canvas的高度
success: function (res) {
console.log('生成图片成功：', res)
that.setData({
tempFilePath: res.tempFilePath
})
},
}, this)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
this.apiCanvas()
},
apiCanvas() {
var that = this
wx.request({
url: '此处获取商品的api',
data: { },
success(res) {
console.log(res.data.data)
that.setData({
canvasList: res.data.data
})
that.canvasPeady()
}
})
},
canvasPeady() {
const query = wx.createSelectorQuery()
query.select('#canvas_box').fields({
id: true,
node: true,
size: true
}).exec(this.init.bind(this))
console.log(query)
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
var self = this;
var a = '黑云'
if (a) {
a = `【${a}拼过后推荐】` + self.data.canvasList.productName
} else {
a = self.data.canvasList.productName
}
return {
title: a,
// desc: '分享描述',
path: '分享后的打开路径',
imageUrl: self.data.tempFilePath,
success: function (res) {
console.log(res)
}
}
},
})
wxml 部分
<canvas
class="canvas-class"
type="2d"
id="canvas_box"
style="width:500rpx;height:400rpx "
></canvas>
wxss 部分
.canvas-class{
margin: 20rpx auto;
}
// 当 图片设置好之后 就用 下面的css 把画布隐藏
/* .canvas-class{
position: fixed;
left: 100%;
} */
