wxml
<view class="bg">
<canvas canvas-id="shareCanvas" class="canvas"></canvas>
<image src="{{img}}" class="img" bindtap="previewImg"></image>
</view>
<view class="canvas-box">
<canvas hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>
</view>
wxss
.bg {
width: 100%;
height: 100%;
background: red;
}
.canvas {
width: 100%;
height: 100%;
}
.canvas-box{position: fixed;top:999999rpx;left: 0}
.img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
js
var QR = require("../../utils/qrcode.js"); // qrcode.js为生成二维码插件
Page({
/**
* 页面的初始数据
*/
data: {
imgUrl: "..............", //图片链接
codeUrl: 'http://www.baidu.com', // 二维码内容用于生成二维码
temporarycodeUrl: '', // 二维码临时图片路径
img: '' // 合成后图片路径
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 绘制背景海报到canvas
var postersize = this.setCanvasSize(750);//动态设置画布大小
console.log(postersize)
const ctx = wx.createCanvasContext('shareCanvas')
ctx.drawImage(this.data.imgUrl, 0, 0, postersize.w, postersize.h)
ctx.draw()
// 绘制二维码到canvas
var codesize = this.setCanvasSize(686);//动态设置画布大小
console.log(codesize)
var initUrl = this.data.codeUrl;
// 在另一个canvas上生成二维码
this.createQrCode(initUrl, "mycanvas", codesize.w, codesize.h);
var code_url = ''
setTimeout(() => {
// code_url = this.canvasToTempImage();
var that = this;
//获取临时缓存code照片路径,存入data中
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
console.log(tempFilePath)
that.setData({
temporarycodeUrl: tempFilePath
})
console.log(that.data.temporarycodeUrl)
//将临时code图片路径绘制到海报canvas中
var res = wx.getSystemInfoSync();
var scale = 750 / 180;
var width = res.windowWidth / scale;
var height = width
var leftscale = 750 / 480; // 180为left
var left = res.windowWidth / leftscale;
var topscale = 750 / 880; // 180为top
var top = res.windowWidth / topscale;
ctx.drawImage(that.data.temporarycodeUrl, left, top, width, height)
ctx.draw(that)
setTimeout(() => {
// code_url = this.canvasToTempImage();
//获取临时缓存合成照片路径,存入data中
wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
img: tempFilePath
})
console.log(tempFilePath)
},
fail: function (res) {
console.log(res);
}
});
}, 1000);
},
fail: function (res) {
console.log(res);
}
});
}, 1000);
},
//点击图片进行预览,长按保存分享图片
previewImg: function (e) {
var img = this.data.img;
console.log(img);
wx.previewImage({
current: img, // 当前显示图片的http链接
urls: [img] // 需要预览的图片http链接列表
})
},
createQrCode: function (url, canvasId, cavW, cavH, left, top) {
//调用插件中的draw方法,绘制二维码图片
QR.api.draw(url, canvasId, cavW, cavH, left, top);
// setTimeout(() => { this.canvasToTempImage(); }, 1000);
},
//适配不同屏幕大小的canvas
setCanvasSize: function (width) {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / width;//不同屏幕下canvas的适配比例;设计稿是750宽
// var scale = 1
var width = res.windowWidth / scale;
var height = res.windowHeight / scale;;
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
})
注: 网络图片通过drawImage绘制到canvas在开发者工具上显示正常,但在手机上无法正常绘制,需要使用wx.downloadFile获取到下载后的地址再绘制canvas中