最近在uni-app项目中遇到一个合成分享图的需求，其实最开始是用原生写法来做的，后来发现在PC端测试是可以的，但在APP模拟器中会出现问题，可能是因为两者的js环境不同吧，uni-app官网也说了这两者不能等同
先来看看最开始写的原生方法
// 获取下载链接
getDownloadLink() {
this.$axios
.get('/app/address')
.then(res => {
console.log(res)
this.downloadLink = res.data.data
// 转二维码
this.makeCode()
})
.catch(err => {
console.log(err);
});
},
// 链接转二维码
makeCode(){
let img = QR.createQrCodeImg(this.downloadLink,{'size':300});
this.downloadImg = img
console.log(img)
console.log(this.detailsData.banners[0]) },
// 商品分享图片合成
starDraw() {
let _that = this
let base64Img1 = 'data:image/gif;base64,'.concat(this.detailsData.bannersBase64[0])
console.log(base64Img1)
// console.log('data:image/gif;base64,'.concat(this.detailsData.bannersBase64[0]))
// return
var data = [base64Img1, this.downloadImg]
var base64 = []
var bigName = 'F.N次方'
var starName = this.detailsData.name
if(this.detailsData.lowestPrice === this.highestPrice){
var price = '￥' + this.detailsData.lowestPrice
}else{
var price = '￥' + this.detailsData.lowestPrice + '~' + this.detailsData.highestPrice }
console.log(this.detailsData.banners[0])
console.log(price)
var c = document.createElement('canvas'),
// var c = this.$refs.canvas
ctx = c.getContext('2d'),
len = data.length
c.width = 300
c.height = 450
ctx.rect(0, 0, 300, 300)
ctx.fillStyle = '#fff'
ctx.fill()
function drawing(n) {
if (n < len) {
var img = new Image
// img.setAttribute("crossOrigin",'Anonymous')
// img.crossOrigin = 'Anonymous'; //解决跨域
img.crossOrigin = 'Anonymous'
img.src = data[n]
img.onload = function () {
if (n == 1) {
ctx.fillRect(0, 300, 300, c.height-300)
ctx.fillStyle = '#fff'
ctx.drawImage(img, c.width-110, 330, 100, 100);
console.log(1)
ctx.font = '14px sans-serif'
ctx.textBaseline = 'top'
ctx.textAlign = 'start'
ctx.fillStyle = '#000'
ctx.fillText(bigName,10,320)
ctx.fillText(starName, 10, 340)
ctx.font = '14px sans-serif'
ctx.fillStyle = 'red'
ctx.fillText(price, 10, 380)
console.log(2)
} else {
ctx.drawImage(img, 0, 0, c.width, c.height)
}
drawing(n + 1);
}
} else {
//保存生成作品图片
base64.push(c.toDataURL());
_that.base64Data = base64[0]
console.log(_that.base64Data)
// fn();
}
}
drawing(0);
}
这种事原生写法，在浏览器中测试能通过，但APP中会出错
下面来看看使用uni-app的方法来解决的
copyFn() {
let that = this
var goodsName = this.detailsData.name
var text = 'F.N'
if(this.detailsData.lowestPrice === this.highestPrice){
var price = '￥' + this.detailsData.lowestPrice
}else{
var price = '￥' + this.detailsData.lowestPrice + '~' + this.detailsData.highestPrice
}
let ww, hh;
let base64Img1 = 'data:image/gif;base64,'.concat(this.detailsData.bannersBase64[0])
const query = uni.createSelectorQuery().in(this);
query.select('#sss').boundingClientRect(data => { //获取canvas-dom
ww = data.width; //准确的宽高
hh = 450
var ctx = uni.createCanvasContext('myCanvas') //绑定画布
ctx.drawImage(base64Img1, 0, 0, ww, 300); //填充进图片
// this.downloadImg
ctx.setFillStyle('#000') //设置内容1的文字样式
ctx.setFontSize(20);
ctx.rect(0, 300, ww, 300)
ctx.setFillStyle('#fff')
ctx.fill()
ctx.drawImage(that.downloadImg, 240, 360, 100, 100)
// ctx.setTextAlign('center')
ctx.setFillStyle('#000')
ctx.fillText(text,50,hh/2+120)
// ctx.setTextAlign('center')
ctx.fillText(goodsName,50,hh/2+150)
ctx.setFillStyle('red')
ctx.setFontSize(16);
ctx.fillText(price,50,hh/2+180)
ctx.draw(); //输出到画布中
uni.showLoading({ //增加loading等待效果
mask:true
})
setTimeout(()=>{ //不加延迟的话，有时候会赋予undefined
uni.canvasToTempFilePath({
canvasId:'myCanvas',
success: (res) => {
console.log(res.tempFilePath)
this.shareImage=res.tempFilePath
}
})
uni.hideLoading();
},3000)
}).exec();
}
这样就能解决APP中报错的问题，然后再通过调用uni-app分享接口将合成图分享出去
