微信小程序canvas初始化、绘图、保存
微信小程序canvas初始化、绘图、保存，记录保存一下
canvas初始化
/***初始化canvas */
initCanvas(){
// 通过 wx.createSelectorQuery()方法创建
const query = wx.createSelectorQuery()
query.select('#myCanvas') // canvas id
.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
// 存入data 后面用到
this.setData({
ctx:ctx,
canvas:canvas,
cW:res[0].width * dpr,
cH:res[0].height * dpr
})
})
},canvas绘图
/***绘制图画 */
drawImg(x,y,Hx,Hy,CW){
let that=this;
const {ctx,canvas} = this.data
// 创建 image对象，因为新的canvas API ，在调用drawImage的时候需要传入一个image对象。
const img = canvas.createImage()
// 这个url地址，可以是微信获取头像的临时地址
img.src = this.data.loadSrc
img.onload = function() {
// 图片加载后画
// ctx.drawImage(img, x, y,Hx,Hy)
ctx.save();
ctx.beginPath();
ctx.arc(CW/2,CW/2,CW/2,0,2*Math.PI,false)
ctx.clip();
ctx.drawImage(img, x, y, Hx, Hy); // 推进去图片
ctx.closePath();
ctx.restore();
that.saveImgs();
}
},canvas保存图片
/***保存图片 */
saveimg:function() {
let dpr = wx.getSystemInfoSync().pixelRatio // 屏幕比例
let Hx=this.data.scaleWidth*dpr;
let Hy=this.data.scaleHeight*dpr;
let x=this.data.marginLeft*dpr;
let y=this.data.marginTop*dpr;
let cw=this.data.cW
console.log(this.data.cH)
console.log(this.data.cW)
this.drawImg(x,y,Hx,Hy,cw)
console.log(this.data.ctx);
console.log(this.data.canvas.id);
},
async saveImgs() {
let self = this;
//这里是重点 新版本的type 2d 获取方法
const query = wx.createSelectorQuery();
const canvasObj = await new Promise((resolve, reject) => {
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec(async (res) => {
resolve(res[0].node);
})
});
console.log(canvasObj);
wx.canvasToTempFilePath({
//fileType: 'jpg',
//canvasId: 'posterCanvas', //之前的写法
canvas: canvasObj, //现在的写法
success: (res) => {
console.log(res);
self.setData({ canClose: true });
//保存图片
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (data) {
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 5000,
})
// setTimeout(() => {
// self.setData({show: false})
// }, 6000);
},
fail: function (err) {
console.log(err);
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
console.log("当初用户拒绝，再次发起授权")
} else {
util.showToast("请截屏保存分享");
}
},
complete(res) {
wx.hideLoading();
console.log(res);
}
})
},
fail(res) {
console.log(res);
}
}, this)
},
