微信小程序canvas画布绘制
wx.createSelectorQuery()
.select('#canvas')
.fields({ node: true, size: true })
.exec(res => {
let ctx = res[0].node.getContext('2d');//getContext返回Canvas 的绘图上下文
let canvas = res[0].node;
img=canvas;
console.log(img);
// 通过设备的像素比等重新绘制宽高
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = 500 * dpr
canvas.height = 900 * dpr
ctx.scale(dpr, dpr)
console.log(res[0].width * dpr);
console.log(res[0].height * dpr);
let image = canvas.createImage();//创建iamge实例
image.src = 'https://xxxxxxxxx';
image.onload = function (rrr) {
ctx.drawImage(image, 0, 40, 500, 820);
}
let image1 = canvas.createImage();//创建iamge实例
image1.src = 'https://xxxxxxxx';
image1.onload = function (rrr) {
ctx.drawImage(image1, 110, 435, 290, 290);
}
})
wx.createSelectorQuery().select('#canvas').boundingClientRect(function(res) {
console.log(res);
}).exec();
微信小程序 canvas画布图片保存
wx.canvasToTempFilePath({
// 把画布转化成临时文件
x: 0,
y: 0,
width: 500, // 截取的画布的宽
height: 900, // 截取的画布的高
destWidth: 500, // 保存成的画布宽度
destHeight: 900, // 保存成的画布高度
fileType: 'jpg', // 保存成的文件类型
quality: 1, // 图片质量
canvas:img, // 画布ID
success(res) {
console.log(res.tempFilePath)
// 2-保存图片至相册
wx.saveImageToPhotosAlbum({
// 存成图片至手机
filePath: res.tempFilePath,
success(res2) {
wx.showToast({
title: '保存成功',
duration: 2000
});
},
fail(res3) {
if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
wx.showToast({
title: '保存失败，稍后再试',
duration: 2000,
icon: 'none'
});
} else {
wx.showToast({
title: '保存失败，稍后再试',
duration: 2000,
icon: 'none'
});
}
}
});
},
fail(error) {
console.log(error);
wx.showToast({
title: '保存失败，稍后再试',
duration: 2000,
icon: 'none'
});
}
});
