?效果如图：?
?
<template>
<view class="xx-share"
bind:tap="handleModal">
<view class="flez_jz">
<image wx:if="{{showPoster}}"
src="{{canvasSrc}}"
class="img_canv"
mode="aspectFill"></image>
</view>
<!-- 要下载的海报 (尺寸*2) -->
<canvas canvas-id="myCanvas"></canvas>
</view>
</template>
<script>
import wepy from 'wepy';
import env from '@/env';
import { showToast, showLoading } from '@/utils/util'
const ctx = wx.createCanvasContext('myCanvas');
const width = 670, height = 800, r = 16, height0 = 530
export default class ShareHB extends wepy.component {
config = {}
components = {}
watch = {
initCanvas () {
wx.showLoading({
title: '图片正在生成',
});
this._getCode();
}
}
props = {
initCanvas: Boolean,
title: String,
content: String,
introduce: {
type: String,
default: '我把最好的推荐给你，快去看看吧～'
},
imgLogo: String,
nickName: String,
price: String,
priceLabel: String,
toPagePath: String,
toPageParam: String, // 参数 (用'#'连接)
Hierarchy: String,//层级。默认空需要嵌套，1为直接使用
}
mixins = []
data = {
imgLogo2: '',
showPoster: false,
codeImgSrc: '', // 小程序码
canvasSrc: '',
config: {
startX: 0,
startY: 0,
maxWidth: 650,
maxHeight: 1000
}
}
computed = {}
methods = {
handleModal () {
this.$emit('handle-modal');
}
}
events = {}
/* 生命周期 */
onLoad () { }
/* 函数 */
// 获取小程序码
_getCode () {
if (!this.toPagePath) {
wx.hideLoading();
wx.showToast({
title: '二维码路径无效',
icon: 'none',
duration: 2000
});
return;
}
let userInfo = wx.getStorageSync('userInfo');
let shareInfo = ''
if (this.Hierarchy) {
shareInfo = this.$parent.$parent.globalData.shareInfo;
} else {
shareInfo = this.$parent.$parent.$parent.globalData.shareInfo;
}
var storeId = ''
var id = ''
if (shareInfo) {
storeId = shareInfo.storeId
id = shareInfo.distributorId
} else {
storeId = userInfo.storeId ? userInfo.storeId : wx.getStorageSync('storeId')
if (userInfo.distributorId) {
id = userInfo.distributorId
} else {
id = wx.getStorageSync('customerId')
}
}
var shareUserinfo = wx.getStorageSync('shareUserinfo')
if (shareUserinfo) {
storeId = shareUserinfo.storeId
id = shareUserinfo.distributorId
}
let scene;
if (!this.toPageParam) {
scene = encodeURIComponent(`id=${id}#storeId=${storeId}`);
} else {
scene = encodeURIComponent(this.toPageParam);
}
console.log(this.toPageParam, 'toPageParam正在测')
console.log(this.toPagePath, 'toPagePath正在测')
// scene = encodeURIComponent(`id=${id}#storeId=${storeId}`);
let page = encodeURIComponent(this.toPagePath);
// 装宝宝type2 名片3 导行供应链4分销客1
let codeImgSrc = `${env.API_URL}/wxacode/get?scene=${scene}&page=${page}&type=1`;
wx.getImageInfo({
src: codeImgSrc,
success: res => {
this.codeImgSrc = res.path;
this.$apply();
setTimeout(() => {
this._getImageInfo();
}, 1000)
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: '二维码生成失败',
icon: 'none',
duration: 2000
});
}
});
}
// 如果是网络图片的话, 必须先保存至本地进行绘制
_getImageInfo () {
let bgimg = 'https://cdn.ylnhome.com/tuike/fxk_share.png'
// 正式环境必须要 https
if (bgimg.indexOf('https') === -1) {
bgimg = bgimg.replace(/^http/, 'https');
}
wx.getImageInfo({
src: bgimg,
success: res => {
this.bgimg = res.path;
this.$apply()
if (this.imgLogo) {
wx.getImageInfo({
src: this.imgLogo,
success: res => {
this.imgLogo2 = res.path;
this.$apply()
this._drawCanvas(res.path);
},
fail: err => {
wx.hideLoading();
}
})
} else {
this._drawCanvas(res.path);
}
},
fail: err => {
wx.hideLoading();
}
})
}
//开始canvas绘画
_drawCanvas () {
let _this = this
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('#fff')
ctx.rect(0, 0, width, height)
ctx.fill()
ctx.draw(true)
// 营销图
ctx.drawImage(_this.bgimg, 0, 0, width, height0)
ctx.draw(true)
// 头像
ctx.save()
ctx.beginPath()
ctx.setShadow(0, 5, 5, '#E2E2E2')
ctx.arc(102, 616, 60, 0, 2 * Math.PI)
ctx.setStrokeStyle('#fff')
ctx.setLineWidth(6)
ctx.stroke()
ctx.closePath()
ctx.clip()
ctx.drawImage(_this.imgLogo2, 43, 555, 130, 130)
ctx.restore()
ctx.draw(true)
// 姓名
ctx.setTextAlign('left')
ctx.font = 'bold 36px sans-serif'
ctx.setFillStyle('#333')
ctx.fillText(this.nickName, 180, 640)
ctx.draw(true)
// 地址、电话、qq
ctx.font = 'normal 25px sans-serif';
ctx.setFillStyle('#101010')
ctx.fillText('努力打工不如躺着赚钱！', 48, 725, 460)
ctx.fillText('跟我一起注册成为意罗尼推荐官吧！', 48, 765, 460)
ctx.draw(true)
// 小程序码
ctx.drawImage(_this.codeImgSrc, 460, 574, 180, 180)
ctx.draw(true)
setTimeout(() => {
wx.hideLoading()
wx.canvasToTempFilePath({
quality: 1,
canvasId: 'myCanvas',
success (res) {
wx.hideLoading()
// this._canvasToTempFilePath();
_this.canvasSrc = res.tempFilePath;
_this.showPoster = true;
_this.$apply()
_this.saveToPhotosAlbum(res.tempFilePath)
}
})
}, 3000)
// }
// })
}
// 保存canvas生成的图片到相册
saveToPhotosAlbum (path) {
var that = this;
wx.saveImageToPhotosAlbum({
filePath: path,
success (res) {
that.$emit('save-img-success', res);
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 1500
});
}
})
}
// 生成canvas
_canvasToTempFilePath () {
setTimeout(() => {
wx.canvasToTempFilePath({
quality: 1,
canvasId: 'myCanvas',
success: res => {
wx.hideLoading();
this.canvasSrc = res.tempFilePath;
console.log(res.tempFilePath, 'res.tempFilePath')
this.showPoster = true;
this.$apply();
this._saveImageToPhotosAlbum(res.tempFilePath);
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: '生成失败',
icon: 'none',
duration: 2000
});
}
})
}, 500);
}
// 保存canvas生成的图片到相册
_saveImageToPhotosAlbum (filePath) {
wx.saveImageToPhotosAlbum({
filePath,
success: res => {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
this.$emit('save-img-success', res);
},
fail: err => {
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000
});
}
});
}
//文字换行处理
// canvas 标题超出换行处理
_wordsWrap (ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
let lineWidth = 0;
let lastSubStrIndex = 0;
for (let i = 0; i < name.length; i++) {
lineWidth += ctx.measureText(name[i]).width;
if (lineWidth > maxWidth) {
ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY);
srartY += wordsHight + 10;
lineWidth = 0;
lastSubStrIndex = i;
}
if (i == name.length - 1) {
ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY);
}
}
}
}
</script>
<style lang="less" scoped>
.flez_jz {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10%;
width: 100%;
}
.img_canv {
width: 670rpx;
height: 800rpx;
}
.xx-share {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1001;
canvas {
width: 670px;
height: 800px;
position: absolute;
top: -2000px;
transform: scale(0.5);
}
}
</style>
