502 lines
14 KiB
JavaScript
502 lines
14 KiB
JavaScript
// mycomponent/temp/qrcode/qrcode.js
|
||
var app = getApp();
|
||
import drawQrcode from "../../../../utils/weapp.qrcode.esm.js";
|
||
Component({
|
||
/**
|
||
* 组件的属性列表
|
||
*/
|
||
properties: {
|
||
isshow: {
|
||
value: false,
|
||
type: Boolean,
|
||
},
|
||
showcarrfootBol: {
|
||
type: null,
|
||
},
|
||
iPnoneBottomBol: {
|
||
type: null,
|
||
},
|
||
},
|
||
|
||
/**
|
||
* 组件的初始数据
|
||
*/
|
||
data: {
|
||
errorFlag: false,
|
||
errorMsg: "",
|
||
poster: "",
|
||
poster_id: 0,
|
||
loading: 0,
|
||
getFlag: true,
|
||
step: 1.5,
|
||
},
|
||
ready() {
|
||
// this.getPosterPic();
|
||
},
|
||
observers: {
|
||
isshow: function (isshow) {
|
||
if (isshow && this.data.poster == "" && this.data.getFlag) {
|
||
this.getPosterPic();
|
||
this.data.getFlag = false;
|
||
}
|
||
},
|
||
},
|
||
/**
|
||
* 组件的方法列表
|
||
*/
|
||
methods: {
|
||
loadImgError(err) {
|
||
this.setData({
|
||
errorFlag: true,
|
||
errorMsg: err.detail.errMsg,
|
||
});
|
||
},
|
||
// 隐藏二维码
|
||
clicktapshow() {
|
||
this.setData({
|
||
isshow: false,
|
||
});
|
||
// wx.showTabBar({})
|
||
},
|
||
previewImage() {
|
||
wx.showToast({
|
||
title: "长按分享好友",
|
||
icon: "none",
|
||
duration: 1800,
|
||
});
|
||
wx.previewImage({
|
||
urls: [this.data.poster], // 当前显示图片的链接
|
||
});
|
||
},
|
||
async getPosterPic() {
|
||
let posterSize = await this.getMyCanvasMessage(640, 1008);
|
||
var urlStr = app.getNetAddresss("member.qrcode.get-poster");
|
||
this.setData({
|
||
canvasWidth: posterSize.width,
|
||
canvasHeight: posterSize.height,
|
||
});
|
||
//this.startDrawCanvas(posterSize,{});
|
||
app._getNetWork({
|
||
showToastIn: false,
|
||
url: urlStr,
|
||
success: (resdata) => {
|
||
let res = resdata.data;
|
||
if (res.result != 1) {
|
||
return;
|
||
}
|
||
if (res.data.center_show == 0) {
|
||
this.setData({
|
||
loading: 100,
|
||
poster: res.data.image_url,
|
||
});
|
||
} else if (res.data.center_show == 1) {
|
||
this.data.poster_id = resdata.data.data.id;
|
||
this.startDrawCanvas(posterSize, resdata.data.data);
|
||
} else if (res.data.center_show == 2) {
|
||
this.getPosterTp2();
|
||
}
|
||
},
|
||
});
|
||
},
|
||
getPosterTp2() {
|
||
let that = this;
|
||
let urlStr = app.getNetAddresss("member.poster");
|
||
app._getNetWork({
|
||
url: urlStr,
|
||
success: (resdata) => {
|
||
var res = resdata.data;
|
||
if (res.result == 1) {
|
||
if (res.data.image_url == "" || res.data.image_url == null) {
|
||
wx.showToast({
|
||
title: "请稍等" + res.data.image_url,
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
setTimeout(() => {
|
||
this.getPosterTp2();
|
||
}, 500);
|
||
} else if (res.data.image_url != "") {
|
||
setTimeout(() => {
|
||
that.setData({
|
||
poster: res.data.image_url,
|
||
});
|
||
}, 1000);
|
||
}
|
||
} else {
|
||
wx.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
duration: 1500,
|
||
});
|
||
}
|
||
},
|
||
fail: function (res) {
|
||
if (this.data.timer) {
|
||
clearInterval(this.data.timer);
|
||
}
|
||
wx.hideLoading({});
|
||
console.log(res);
|
||
},
|
||
});
|
||
},
|
||
|
||
//工具
|
||
//开始绘制
|
||
async startDrawCanvas(posterSize, posterData) {
|
||
const ctx = wx.createCanvasContext("myCanvas", this);
|
||
//this.drawRoundRectPath(ctx,posterSize.width,posterSize.height,30);
|
||
ctx.setFillStyle("#fff");
|
||
ctx.fillRect(0, 0, posterSize.width, posterSize.height);
|
||
//ctx.draw();
|
||
|
||
//下载背景
|
||
let bgImg = await this.readDownPicInfo(posterData.background);
|
||
//绘制背景图片
|
||
if (bgImg.height > bgImg.width) {
|
||
let p = posterSize.height / posterSize.contentScale / bgImg.height;
|
||
bgImg.height = bgImg.height * p;
|
||
bgImg.width = bgImg.width * p;
|
||
} else {
|
||
let p = posterSize.width / posterSize.contentScale / bgImg.width;
|
||
bgImg.width = bgImg.width * p;
|
||
bgImg.height = bgImg.height * p;
|
||
}
|
||
this.drawCanvasImage(ctx, {
|
||
left: 0,
|
||
top: 0,
|
||
width: bgImg.width / this.data.step,
|
||
height: bgImg.height / this.data.step,
|
||
img: bgImg.img,
|
||
contentScale: posterSize.contentScale,
|
||
});
|
||
this.setData({ loading: 10 });
|
||
|
||
//绘制其他内容
|
||
let otherData = posterData.style_data;
|
||
for (let i = 0; i < otherData.length; i++) {
|
||
let item = otherData[i];
|
||
//绘制昵称
|
||
item.contentScale = posterSize.contentScale;
|
||
console.log(item);
|
||
if (item.type == "nickname") {
|
||
this.drawCanvasText(ctx, item);
|
||
} else if (item.type == "img" || item.type == "head") {
|
||
// 代表后台有图片
|
||
// //下载和读取图片
|
||
let file = await this.readDownPicInfo(item.src);
|
||
item.img = file.img;
|
||
this.drawCanvasImage(ctx, item);
|
||
} else if (item.type == "qr_shop" || item.type == "qr_app_share") {
|
||
//需要自己将链接生成二维码
|
||
let img = await this.getQRCodeUrl(item);
|
||
item.img = img;
|
||
this.drawCanvasImage(ctx, item);
|
||
}
|
||
console.log("loading", loading);
|
||
let loading = parseInt((80 / otherData.length) * (i + 1));
|
||
this.setData({ loading: loading + 10 });
|
||
}
|
||
console.log("执行完成");
|
||
ctx.draw(
|
||
false,
|
||
setTimeout(async () => {
|
||
let img = await this.toimage("myCanvas", posterSize);
|
||
this.setData({
|
||
loading: 100,
|
||
poster: img,
|
||
});
|
||
this.upQrcodeImg(img);
|
||
}, 1000)
|
||
);
|
||
},
|
||
//绘制图片
|
||
drawCanvasImage(ctx, imgInfo) {
|
||
let step = this.data.step;
|
||
ctx.drawImage(
|
||
imgInfo.img,
|
||
imgInfo.left * imgInfo.contentScale * step,
|
||
imgInfo.top * imgInfo.contentScale * step,
|
||
imgInfo.width * imgInfo.contentScale * step,
|
||
imgInfo.height * imgInfo.contentScale * step
|
||
); // 推进去图片
|
||
},
|
||
//绘制文字
|
||
drawCanvasText(ctx, textInfo) {
|
||
let step = this.data.step;
|
||
console.log(step);
|
||
let size = textInfo.size * textInfo.contentScale;
|
||
let top = textInfo.top * textInfo.contentScale + size;
|
||
ctx.setFontSize(size * step);
|
||
ctx.setFillStyle(textInfo.color);
|
||
ctx.fillText(
|
||
textInfo.src,
|
||
textInfo.left * textInfo.contentScale * step,
|
||
top * step
|
||
);
|
||
console.log("完成");
|
||
},
|
||
//导出图片
|
||
toimage(canvasId, posterSize) {
|
||
return new Promise((resolve, reject) => {
|
||
console.log(canvasId, posterSize);
|
||
wx.canvasToTempFilePath(
|
||
{
|
||
x: 0,
|
||
y: 0,
|
||
// quality:1,
|
||
width: posterSize.width,
|
||
height: posterSize.height,
|
||
destWidth: posterSize.width * 4,
|
||
destHeight: posterSize.height * 4,
|
||
canvasId: canvasId,
|
||
success: (res) => {
|
||
var tempFilePath = res.tempFilePath;
|
||
resolve(tempFilePath);
|
||
},
|
||
fail: (res) => {
|
||
wx.showToast({
|
||
title: "图片导出失败" + res,
|
||
icon: "success",
|
||
duration: 2000,
|
||
});
|
||
},
|
||
},
|
||
this
|
||
);
|
||
});
|
||
},
|
||
drawRoundRectPath(ctx, width, height, radius) {
|
||
ctx.beginPath(0);
|
||
//从右下角顺时针绘制，弧度从0到1/2PI
|
||
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
|
||
//矩形下边线
|
||
ctx.lineTo(radius, height);
|
||
//左下角圆弧，弧度从1/2PI到PI
|
||
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
|
||
//矩形左边线
|
||
ctx.lineTo(0, radius);
|
||
//左上角圆弧，弧度从PI到3/2PI
|
||
ctx.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
|
||
//上边线
|
||
ctx.lineTo(width - radius, 0);
|
||
//右上角圆弧
|
||
ctx.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
|
||
//右边线
|
||
ctx.lineTo(width, height - radius);
|
||
ctx.closePath();
|
||
ctx.clip();
|
||
},
|
||
//下载和读取图片
|
||
readDownPicInfo(url) {
|
||
return new Promise((resolve, reject) => {
|
||
wx.downloadFile({
|
||
url, //仅为示例，并非真实的资源
|
||
success: (res) => {
|
||
wx.getImageInfo({
|
||
src: res.tempFilePath,
|
||
success(res1) {
|
||
//确保是一张图片
|
||
resolve({
|
||
img: res.tempFilePath,
|
||
width: res1.width,
|
||
height: res1.height,
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
this.data.getFlag = true;
|
||
console.log("图片读取出错", err.errMsg);
|
||
wx.showToast({
|
||
title: "图片读取出错" + err.errMsg,
|
||
icon: "success",
|
||
duration: 2000,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
fail: (res) => {
|
||
this.data.getFlag = true;
|
||
console.log("图片下载出错", res);
|
||
wx.showToast({
|
||
title: "图片下载出错" + res,
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
},
|
||
});
|
||
});
|
||
},
|
||
// 获取海报画布宽高
|
||
getMyCanvasMessage(w, h) {
|
||
return new Promise((resolve, reject) => {
|
||
wx.getSystemInfo({
|
||
success: (res) => {
|
||
let scale = h / w;
|
||
let width = res.screenWidth - res.screenWidth * 0.2;
|
||
let height = width * scale;
|
||
let contentScale = width / w;
|
||
(width = width * this.data.step),
|
||
(height = height * this.data.step);
|
||
resolve({
|
||
width,
|
||
height,
|
||
contentScale,
|
||
});
|
||
},
|
||
fail: (res) => {
|
||
this.data.getFlag = true;
|
||
},
|
||
});
|
||
});
|
||
},
|
||
getQRCodeUrl(item) {
|
||
return new Promise((resolve, reject) => {
|
||
let step = this.data.step;
|
||
this.setData(
|
||
{
|
||
tempQRCodeCanvasWidth: item.width * item.contentScale * step,
|
||
tempQRCodeCanvasHeight: item.height * item.contentScale * step,
|
||
},
|
||
async () => {
|
||
drawQrcode({
|
||
width: (item.width * item.contentScale - 10) * step,
|
||
height: (item.height * item.contentScale - 10) * step,
|
||
canvasId: "tempQRCode",
|
||
background: "#fff",
|
||
_this: this,
|
||
x: 5 * step,
|
||
y: 5 * step,
|
||
text: item.src,
|
||
callback: () => {
|
||
setTimeout(async () => {
|
||
let img = await this.toimage("tempQRCode", {
|
||
width: item.width * item.contentScale * step,
|
||
height: item.height * item.contentScale * step,
|
||
});
|
||
resolve(img);
|
||
}, 500);
|
||
},
|
||
});
|
||
}
|
||
);
|
||
});
|
||
},
|
||
pxToNum(px) {
|
||
let num = px.substring(0, px.length - 2);
|
||
return parseInt(num);
|
||
},
|
||
upQrcodeImg(imgFile) {
|
||
let urlStr = app.getNetAddresss("upload.uploadPic");
|
||
console.log(imgFile);
|
||
wx.uploadFile({
|
||
url: urlStr,
|
||
filePath: imgFile,
|
||
name: "file",
|
||
header: { "Content-Type": "multipart/form-data" },
|
||
formData: {
|
||
// 和服务器约定的token, 一般也可以放在header中
|
||
_wx_token: wx.getStorageSync("wx_token"),
|
||
ingress: 0,
|
||
},
|
||
success: (res) => {
|
||
let data = JSON.parse(res.data);
|
||
console.log("上传成功", data);
|
||
if (data.result == 1) {
|
||
//data.data.img_url
|
||
console.log(data.data.img_url);
|
||
this.addPosterRecord(data.data.img_url);
|
||
}
|
||
},
|
||
fail: function (e) {
|
||
console.log("上传失败一一一", e);
|
||
},
|
||
});
|
||
},
|
||
addPosterRecord(img_url) {
|
||
var urlStr = app.getNetAddresss("member.qrcode.poster-record");
|
||
console.log("开始写记录");
|
||
app._getNetWork({
|
||
showToastIn: false,
|
||
url: urlStr,
|
||
data: {
|
||
image: img_url,
|
||
poster_id: this.data.poster_id,
|
||
},
|
||
success: (resdata) => {},
|
||
});
|
||
},
|
||
async checkWritePotosAlbum() {
|
||
var _this = this;
|
||
let writePhotosAlbum = await this.getAuthSetting(
|
||
"scope.writePhotosAlbum"
|
||
);
|
||
if (!writePhotosAlbum) {
|
||
wx.showModal({
|
||
title: "请开启授权",
|
||
content: "是否跳转设置页开启授权",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
wx.openSetting({
|
||
success(settingdata) {
|
||
if (settingdata.authSetting["scope.writePhotosAlbum"]) {
|
||
_this.saveImg();
|
||
} else {
|
||
console.log("还是没授权");
|
||
}
|
||
},
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log("用户点击取消");
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
this.saveImg();
|
||
},
|
||
saveImg() {
|
||
console.log("执行");
|
||
var imgSrc = this.data.poster;
|
||
wx.downloadFile({
|
||
url: imgSrc,
|
||
success: function (res) {
|
||
wx.saveImageToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success: (data) => {
|
||
wx.showToast({
|
||
title: "保存成功",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
},
|
||
fail: function (err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
},
|
||
});
|
||
},
|
||
getAuthSetting(authName) {
|
||
return new Promise((resolve, reject) => {
|
||
wx.getSetting({
|
||
success(res) {
|
||
if (!res.authSetting[authName]) {
|
||
wx.authorize({
|
||
scope: authName,
|
||
success() {
|
||
resolve(true);
|
||
},
|
||
fail() {
|
||
resolve(false);
|
||
},
|
||
});
|
||
} else resolve(true);
|
||
},
|
||
fail() {
|
||
resolve(false);
|
||
},
|
||
});
|
||
});
|
||
},
|
||
},
|
||
});
|