createNewImg(){
var that = this;
const query = wx.createSelectorQuery()
var canvas = query.select('#mycanvas')
query.select('#mycanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const context = canvas.getContext('2d')
const imaUpload = canvas.createImage()
console.log()
imaUpload.src ='https://www.linkedsign.cn/Photo/Beauty/ChamberOfCommerce/20210907/yqh.png'
// console.log(1)
imaUpload.onload = function (){
context.drawImage(imaUpload, 0, 0, 345, 550)
console.log(context)
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
// console.log(res[0].width)
context.scale(dpr, dpr)
context.fillRect(0, 0, 100, 100)
context.save();
var titl = that.data.Title;
context.fillStyle='#191919';
context.textAlign='left';
context.font = 'normal bold 18px sans-serif';
context.fillText('嘻嘻哈哈', 60, 270);
context.stroke();
context.save();
// context.draw(true)
wx.canvasToTempFilePath({
canvasId:'mycanvas',
// quality:'jpg',
canvas:canvas,
success:res=>{
console.log(res)
that.setData({
imageUrl:res.tempFilePath
})
}
})
}
})
}
canvas.toDataURL("image/png");
格式 image/[图片格式]
png默认生成图片无背景;
jpeg默认生成图片为黑色背景;
如果需要白色背景,可以:
ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas设置的背景色和css设置的背景色要保持一致