<!-- 二维码 -->
<canvas id="qrcode" canvas-id="qrcode" width="120" ></canvas>
<!-- 生成带小程序码的分享图片 -->
<canvas canvas-id="shareCanvas" class="share-canvas"></canvas>
#qrcode{
opacity: 0;
position: absolute;
left: -800rpx;
}
.share-canvas {
width: 720px;
height: 1280px;
background: #fff;
position: fixed;
left: -720px;
top: 0;
}
下载uqrcodejs：https://uqrcode.cn/doc/guide/getting-started.html
import UQRCode from 'uqrcodejs';
export default{
data(){
return{
val: 'https', // 要生成的二维码的地址
src: '', // 二维码生成后的图片地址或base64
bgUrl:'https',//背景图片
}
},
methods:{
andImg() {
//分享生成图片
uni.showLoading({
title: "正在生成图片"
})
if(this.activity_id==11){
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = this.val
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 120;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
this.$nextTick(()=>{
uni.canvasToTempFilePath(
{
canvasId: 'qrcode',
width: 120,
height: 120,
success: res => {
if(res.errMsg=='canvasToTempFilePath:ok'){
this.src = res.tempFilePath//获取生成的二维码地址
this.onImg()
}
},
fail: err => {
console.log(err);
}
},
);
})
},
onImg() {
function toFormateStr (ctx, str, draw_width, lineNum, startX, startY, steps ) {
var strWidth = ctx.measureText(str).width; // 测量文本源尺寸信息（宽度）
var startpoint = startY, keyStr = '', sreLN = strWidth / draw_width;
var liner = Math.ceil(sreLN); // 计算文本源一共能生成多少行
let strlen = parseInt(str.length / sreLN); // 等比缩放测量一行文本显示多少个字符
// 若文本不足一行，则直接绘制，反之大于传入的最多行数（lineNum）以省略号（...）代替
if (strWidth < draw_width) {
ctx.fillText(str, startX, startpoint);
} else {
for (var i = 1; i < liner + 1; i++) {
let startPoint = strlen * (i-1);
if (i < lineNum || lineNum == -1) {
keyStr = str.substr(startPoint, strlen);
ctx.fillText(keyStr, startX, startpoint);
} else {
keyStr = str.substr(startPoint, strlen-5) + '...';
ctx.fillText(keyStr, startX, startpoint);
break;
}
startpoint = startpoint + steps;
}
}
}
const that = this
//绘制图片
that.csimg = true
that.iconlogo = true
//创建canvas
let shareCanvas = uni.createCanvasContext('shareCanvas')
//绘制背景图片
//canvas绘制图片（drawImage）无效，显示不了，
//uniapp的drawImage绘制图片和微信小程序一样，图片路径不能使用网络路径，必须先下载到本地（使用uni.downloadFile()下载成临时文件路径也行）
uni.downloadFile({
url:that.bgUrl,
success(res){
shareCanvas.drawImage(res.tempFilePath, 0, 120, 720, 1280)
if(that.companyInfo.company_abbr){
if(that.companyInfo.company_abbr.length <= 6){
shareCanvas.setFontSize('56')
}else if(that.companyInfo.company_abbr.length > 6 && that.companyInfo.company_abbr.length <= 10){
shareCanvas.setFontSize('48')
}else if(that.companyInfo.company_abbr.length > 10 && that.companyInfo.company_abbr.length <= 15){
shareCanvas.setFontSize('32')
}else if(that.companyInfo.company_abbr.length > 15){
shareCanvas.setFontSize('26')
}
}
shareCanvas.setTextAlign('center')
// 公司名称
function title() {
const grds = shareCanvas.createLinearGradient(360, 795, 360, 826)
shareCanvas.setFontSize('36')
shareCanvas.setFillStyle('#e7c998')
toFormateStr(shareCanvas, that.companyInfo.company_abbr, 400, 3, 360, 620, 40);
}
// 奖项
function prize_title() {
const grds = shareCanvas.createLinearGradient(360, 795, 360, 826)
shareCanvas.setFontSize('36')
shareCanvas.setFillStyle('#e7c998')
toFormateStr(shareCanvas,that.companyInfo.prize.prize_title, 400, 3,360, 800, 40);
}
if(that.companyInfo.company_abbr){
title()
}
prize_title()
shareCanvas.setFontSize('24')
shareCanvas.drawImage(that.src, 300, 1045, 120, 120)
shareCanvas.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: "shareCanvas",
destWidth: 720, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比21067
destHeight: 1300,
success(canvasres) {
that.csimg = canvasres.tempFilePath
uni.previewImage({
urls: [canvasres.tempFilePath]
})
uni.hideLoading()
},
})
})
}
})
},
}
}
