Skip to content

dev / zhiliang-light-mp

Go to a project
Toggle navigation
Toggle navigation pinning
11d4ac48 by simon
Options

no message

1 parent cbf060d5
Inline Side-by-side
Showing 16 changed files with 868 additions and 77 deletions
const main = {
/**
* 渲染块
* @param {Object} params
*/
drawBlock({ text, width = 0, height, x, y, paddingLeft = 0, paddingRight = 0, borderWidth, backgroundColor, borderColor, borderRadius = 0, opacity = 1 }) {
// 判断是否块内有文字
let blockWidth = 0; // 块的宽度
let textX = 0;
let textY = 0;
if (typeof text !== 'undefined') {
// 如果有文字并且块的宽度小于文字宽度，块的宽度为 文字的宽度 + 内边距
const textWidth = this._getTextWidth(typeof text.text === 'string' ? text : text.text);
blockWidth = textWidth > width ? textWidth : width;
blockWidth += paddingLeft + paddingLeft;
const { textAlign = 'left', text: textCon } = text;
textY = height / 2 + y; // 文字的y轴坐标在块中线
if (textAlign === 'left') {
// 如果是右对齐，那x轴在块的最左边
textX = x + paddingLeft;
} else if (textAlign === 'center') {
textX = blockWidth / 2 + x;
} else {
textX = x + blockWidth - paddingRight;
}
} else {
blockWidth = width;
}
if (backgroundColor) {
// 画面
this.ctx.save();
this.ctx.setGlobalAlpha(opacity);
this.ctx.setFillStyle(backgroundColor);
if (borderRadius > 0) {
// 画圆角矩形
this._drawRadiusRect(x, y, blockWidth, height, borderRadius);
this.ctx.fill();
} else {
this.ctx.fillRect(this.toPx(x), this.toPx(y), this.toPx(blockWidth), this.toPx(height));
}
this.ctx.restore();
}
if (borderWidth) {
// 画线
this.ctx.save();
this.ctx.setGlobalAlpha(opacity);
this.ctx.setStrokeStyle(borderColor);
this.ctx.setLineWidth(this.toPx(borderWidth));
if (borderRadius > 0) {
// 画圆角矩形边框
this._drawRadiusRect(x, y, blockWidth, height, borderRadius);
this.ctx.stroke();
} else {
this.ctx.strokeRect(this.toPx(x), this.toPx(y), this.toPx(blockWidth), this.toPx(height));
}
this.ctx.restore();
}
if (text) {
this.drawText(Object.assign(text, { x: textX, y: textY }))
}
},
/**
* 渲染文字
* @param {Object} params
*/
drawText(params) {
const { x, y, fontSize, color, baseLine, textAlign, text, opacity = 1, width, lineNum, lineHeight } = params;
if (Object.prototype.toString.call(text) === '[object Array]') {
let preText = { x, y, baseLine };
text.forEach(item => {
preText.x += item.marginLeft || 0;
const textWidth = this._drawSingleText(Object.assign(item, {
...preText,
}));
preText.x += textWidth + (item.marginRight || 0); // 下一段字的x轴为上一段字x + 上一段字宽度
})
} else {
this._drawSingleText(params);
}
},
/**
* 渲染图片
*/
drawImage(data) {
const { imgPath, x, y, w, h, sx, sy, sw, sh, borderRadius = 0, borderWidth = 0, borderColor } = data;
this.ctx.save();
if (borderRadius > 0) {
this._drawRadiusRect(x, y, w, h, borderRadius);
this.ctx.strokeStyle = 'rgba(255,255,255,0)';
this.ctx.stroke();
this.ctx.clip();
this.ctx.drawImage(imgPath, this.toPx(sx), this.toPx(sy), this.toPx(sw), this.toPx(sh), this.toPx(x), this.toPx(y), this.toPx(w), this.toPx(h));
if (borderWidth > 0) {
this.ctx.setStrokeStyle(borderColor);
this.ctx.setLineWidth(this.toPx(borderWidth));
this.ctx.stroke();
}
} else {
this.ctx.drawImage(imgPath, this.toPx(sx), this.toPx(sy), this.toPx(sw), this.toPx(sh), this.toPx(x), this.toPx(y), this.toPx(w), this.toPx(h));
}
this.ctx.restore();
},
/**
* 渲染线
* @param {*} param0
*/
drawLine({ startX, startY, endX, endY, color, width }) {
this.ctx.save();
this.ctx.beginPath();
this.ctx.setStrokeStyle(color);
this.ctx.setLineWidth(this.toPx(width));
this.ctx.moveTo(this.toPx(startX), this.toPx(startY));
this.ctx.lineTo(this.toPx(endX), this.toPx(endY));
this.ctx.stroke();
this.ctx.closePath();
this.ctx.restore();
},
downloadResource(images = []) {
const drawList = [];
this.drawArr = [];
images.forEach((image, index) => drawList.push(this._downloadImageAndInfo(image, index)));
return Promise.all(drawList);
},
initCanvas(w, h, debug) {
return new Promise((resolve) => {
this.setData({
pxWidth: this.toPx(w),
pxHeight: this.toPx(h),
debug,
}, resolve);
});
}
}
const handle = {
/**
* 画圆角矩形
*/
_drawRadiusRect(x, y, w, h, r) {
const br = r / 2;
this.ctx.beginPath();
this.ctx.moveTo(this.toPx(x + br), this.toPx(y)); // 移动到左上角的点
this.ctx.lineTo(this.toPx(x + w - br), this.toPx(y));
this.ctx.arc(this.toPx(x + w - br), this.toPx(y + br), this.toPx(br), 2 * Math.PI * (3 / 4), 2 * Math.PI * (4 / 4))
this.ctx.lineTo(this.toPx(x + w), this.toPx(y + h - br));
this.ctx.arc(this.toPx(x + w - br), this.toPx(y + h - br), this.toPx(br), 0, 2 * Math.PI * (1 / 4))
this.ctx.lineTo(this.toPx(x + br), this.toPx(y + h));
this.ctx.arc(this.toPx(x + br), this.toPx(y + h - br), this.toPx(br), 2 * Math.PI * (1 / 4), 2 * Math.PI * (2 / 4))
this.ctx.lineTo(this.toPx(x), this.toPx(y + br));
this.ctx.arc(this.toPx(x + br), this.toPx(y + br), this.toPx(br), 2 * Math.PI * (2 / 4), 2 * Math.PI * (3 / 4))
},
/**
* 计算文本长度
* @param {Array|Object}} text 数组 或者 对象
*/
_getTextWidth(text) {
let texts = [];
if (Object.prototype.toString.call(text) === '[object Object]') {
texts.push(text);
} else {
texts = text;
}
let width = 0;
texts.forEach(({ fontSize, text, marginLeft = 0, marginRight = 0 }) => {
this.ctx.setFontSize(this.toPx(fontSize));
width += this.ctx.measureText(text).width + marginLeft + marginRight;
})
return this.toRpx(width);
},
/**
* 渲染一段文字
*/
_drawSingleText({ x, y, fontSize, color, baseLine, textAlign = 'left', text, opacity = 1, textDecoration = 'none',
width, lineNum = 1, lineHeight = 0, fontWeight = 'normal', fontStyle = 'normal', fontFamily = "sans-serif"}) {
this.ctx.save();
this.ctx.beginPath();
this.ctx.font = fontStyle + " " + fontWeight + " " + this.toPx(fontSize, true) + "px " + fontFamily
this.ctx.setGlobalAlpha(opacity);
// this.ctx.setFontSize(this.toPx(fontSize));
this.ctx.setFillStyle(color);
this.ctx.setTextBaseline(baseLine);
this.ctx.setTextAlign(textAlign);
let textWidth = this.toRpx(this.ctx.measureText(text).width);
const textArr = [];
if (textWidth > width) {
// 文本宽度 大于 渲染宽度
let fillText = '';
let line = 1;
for (let i = 0; i <= text.length - 1 ; i++) { // 将文字转为数组，一行文字一个元素
fillText = fillText + text[i];
if (this.toRpx(this.ctx.measureText(fillText).width) >= width) {
if (line === lineNum) {
if (i !== text.length - 1) {
fillText = fillText.substring(0, fillText.length - 1) + '...';
}
}
if(line <= lineNum) {
textArr.push(fillText);
}
fillText = '';
line++;
} else {
if(line <= lineNum) {
if(i === text.length -1){
textArr.push(fillText);
}
}
}
}
textWidth = width;
} else {
textArr.push(text);
}
textArr.forEach((item, index) => {
this.ctx.fillText(item, this.toPx(x), this.toPx(y + (lineHeight || fontSize) * index));
})
this.ctx.restore();
// textDecoration
if (textDecoration !== 'none') {
let lineY = y;
if (textDecoration === 'line-through') {
// 目前只支持贯穿线
lineY = y;
}
this.ctx.save();
this.ctx.moveTo(this.toPx(x), this.toPx(lineY));
this.ctx.lineTo(this.toPx(x) + this.toPx(textWidth), this.toPx(lineY));
this.ctx.setStrokeStyle(color);
this.ctx.stroke();
this.ctx.restore();
}
return textWidth;
},
}
const helper = {
/**
* 下载图片并获取图片信息
*/
_downloadImageAndInfo(image, index) {
return new Promise((resolve, reject) => {
const { x, y, url, zIndex } = image;
const imageUrl = url;
// 下载图片
this._downImage(imageUrl, index)
// 获取图片信息
.then(imgPath => this._getImageInfo(imgPath, index))
.then(({ imgPath, imgInfo }) => {
// 根据画布的宽高计算出图片绘制的大小，这里会保证图片绘制不变形
let sx;
let sy;
const borderRadius = image.borderRadius || 0;
const setWidth = image.width;
const setHeight = image.height;
const width = this.toRpx(imgInfo.width);
const height = this.toRpx(imgInfo.height);
if (width / height <= setWidth / setHeight) {
sx = 0;
sy = (height - ((width / setWidth) * setHeight)) / 2;
} else {
sy = 0;
sx = (width - ((height / setHeight) * setWidth)) / 2;
}
this.drawArr.push({
type: 'image',
borderRadius,
borderWidth: image.borderWidth,
borderColor: image.borderColor,
zIndex: typeof zIndex !== 'undefined' ? zIndex : index,
imgPath,
sx,
sy,
sw: (width - (sx * 2)),
sh: (height - (sy * 2)),
x,
y,
w: setWidth,
h: setHeight,
});
resolve();
})
.catch(err => reject(err));
});
},
/**
* 下载图片资源
* @param {*} imageUrl
*/
_downImage(imageUrl) {
return new Promise((resolve, reject) => {
if (/^http/.test(imageUrl) && !new RegExp(wx.env.USER_DATA_PATH).test(imageUrl)) {
wx.downloadFile({
url: this._mapHttpToHttps(imageUrl),
success: (res) => {
if (res.statusCode === 200) {
resolve(res.tempFilePath);
} else {
reject(res.errMsg);
}
},
fail(err) {
reject(err);
},
});
} else {
// 支持本地地址
resolve(imageUrl);
}
});
},
/**
* 获取图片信息
* @param {*} imgPath
* @param {*} index
*/
_getImageInfo(imgPath, index) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: imgPath,
success(res) {
resolve({ imgPath, imgInfo: res, index });
},
fail(err) {
reject(err);
},
});
});
},
toPx(rpx, int) {
if (int) {
return parseInt(rpx * this.factor);
}
return rpx * this.factor;
},
toRpx(px, int) {
if (int) {
return parseInt(px / this.factor);
}
return px / this.factor;
},
/**
* 将http转为https
* @param {String}} rawUrl 图片资源url
*/
_mapHttpToHttps(rawUrl) {
if (rawUrl.indexOf(':') < 0) {
return rawUrl;
}
const urlComponent = rawUrl.split(':');
if (urlComponent.length === 2) {
if (urlComponent[0] === 'http') {
urlComponent[0] = 'https';
return `${urlComponent[0]}:${urlComponent[1]}`;
}
}
return rawUrl;
},
}
Component({
properties: {
},
created() {
const sysInfo = wx.getSystemInfoSync();
const screenWidth = sysInfo.screenWidth;
this.factor = screenWidth / 750;
},
methods: Object.assign({
/**
* 计算画布的高度
* @param {*} config
*/
getHeight(config) {
const getTextHeight = (text) => {
let fontHeight = text.lineHeight || text.fontSize;
let height = 0;
if (text.baseLine === 'top') {
height = fontHeight;
} else if (text.baseLine === 'middle') {
height = fontHeight / 2;
} else {
height = 0;
}
return height;
}
const heightArr = [];
(config.blocks || []).forEach((item) => {
heightArr.push(item.y + item.height);
});
(config.texts || []).forEach((item) => {
let height;
if (Object.prototype.toString.call(item.text) === '[object Array]') {
item.text.forEach((i) => {
height = getTextHeight({...i, baseLine: item.baseLine});
heightArr.push(item.y + height);
});
} else {
height = getTextHeight(item);
heightArr.push(item.y + height);
}
});
(config.images || []).forEach((item) => {
heightArr.push(item.y + item.height);
});
(config.lines || []).forEach((item) => {
heightArr.push(item.startY);
heightArr.push(item.endY);
});
const sortRes = heightArr.sort((a, b) => b - a);
let canvasHeight = 0;
if (sortRes.length > 0) {
canvasHeight = sortRes[0];
}
if (config.height < canvasHeight || !config.height) {
return canvasHeight;
} else {
return config.height;
}
},
create(config) {
this.ctx = wx.createCanvasContext('canvasid', this);
const height = this.getHeight(config);
this.initCanvas(config.width, height, config.debug)
.then(() => {
// 设置画布底色
if (config.backgroundColor) {
this.ctx.save();
this.ctx.setFillStyle(config.backgroundColor);
this.ctx.fillRect(0, 0, this.toPx(config.width), this.toPx(height));
this.ctx.restore();
}
const { texts = [], images = [], blocks = [], lines = [] } = config;
const queue = this.drawArr
.concat(texts.map((item) => {
item.type = 'text';
item.zIndex = item.zIndex || 0;
return item;
}))
.concat(blocks.map((item) => {
item.type = 'block';
item.zIndex = item.zIndex || 0;
return item;
}))
.concat(lines.map((item) => {
item.type = 'line';
item.zIndex = item.zIndex || 0;
return item;
}));
// 按照顺序排序
queue.sort((a, b) => a.zIndex - b.zIndex);
queue.forEach((item) => {
if (item.type === 'image') {
this.drawImage(item)
} else if (item.type === 'text') {
this.drawText(item)
} else if (item.type === 'block') {
this.drawBlock(item)
} else if (item.type === 'line') {
this.drawLine(item)
}
});
const res = wx.getSystemInfoSync();
const platform = res.platform;
let time = 0;
if (platform === 'android') {
// 在安卓平台，经测试发现如果海报过于复杂在转换时需要做延时，要不然样式会错乱
time = 300;
}
this.ctx.draw(false, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'canvasid',
success: (res) => {
this.triggerEvent('success', res.tempFilePath);
},
fail: (err) => {
this.triggerEvent('fail', err);
},
}, this);
}, time);
});
})
.catch((err) => {
wx.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
console.error(err);
});
},
}, main, handle, helper),
});
{
"component": true
}
\ No newline at end of file
<!--index.wxml-->
<view class="container">
<canvas canvas-id='canvasid' class="canvas {{debug ? 'debug' : 'pro'}}" style='width: {{pxWidth}}px; height: {{pxHeight}}px;'></canvas>
</view>
.canvas {
width: 750rpx;
height: 750rpx;
}
.canvas.pro {
position: absolute;
bottom: 0;
left: 0;
transform: translate3d(-9999rpx, 0, 0);
}
.canvas.debug {
position: absolute;
bottom: 0;
left: 0;
border: 1rpx solid #ccc;
}
\ No newline at end of file
Component({
properties: {
config: {
type: Object,
value: {},
},
preload: { // 是否预下载图片资源
type: Boolean,
value: false,
},
hideLoading: { // 是否隐藏loading
type: Boolean,
value: false,
}
},
ready() {
if (this.data.preload) {
const poster = this.selectComponent('#poster');
this.downloadStatus = 'doing';
poster.downloadResource(this.data.config.images).then(() => {
this.downloadStatus = 'success';
this.trigger('downloadSuccess');
}).catch((e) => {
this.downloadStatus = 'fail';
this.trigger('downloadFail', e);
});
}
},
methods: {
trigger(event, data) {
if (this.listener && typeof this.listener[event] === 'function') {
this.listener[event](data);
}
},
once(event, fun) {
if (typeof this.listener === 'undefined') {
this.listener = {};
}
this.listener[event] = fun;
},
downloadResource(reset) {
return new Promise((resolve, reject) => {
if (reset) {
this.downloadStatus = null;
}
const poster = this.selectComponent('#poster');
if (this.downloadStatus && this.downloadStatus !== 'fail') {
if (this.downloadStatus === 'success') {
resolve();
} else {
this.once('downloadSuccess', () => resolve());
this.once('downloadFail', (e) => reject(e));
}
} else {
poster.downloadResource(this.data.config.images)
.then(() => {
this.downloadStatus = 'success';
resolve();
})
.catch((e) => reject(e));
}
})
},
onCreate(reset = false) {
!this.data.hideLoading && wx.showLoading({ mask: true, title: '生成中' });
return this.downloadResource(typeof reset === 'boolean' && reset).then(() => {
!this.data.hideLoading && wx.hideLoading();
const poster = this.selectComponent('#poster');
poster.create(this.data.config);
})
.catch((err) => {
!this.data.hideLoading && wx.hideLoading();
wx.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
console.error(err);
this.triggerEvent('fail', err);
})
},
onCreateSuccess(e) {
const { detail } = e;
this.triggerEvent('success', detail);
},
onCreateFail(err) {
console.error(err);
this.triggerEvent('fail', err);
}
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {
"we-canvas": "../index/index"
}
}
\ No newline at end of file
<view bindtap='onCreate'>
<slot/>
</view>
<we-canvas id="poster" bind:success="onCreateSuccess" bind:fail="onCreateFail"/>
\ No newline at end of file
const defaultOptions = {
selector: '#poster'
};
function Poster(options = {}) {
options = {
...defaultOptions,
...options,
};
const pages = getCurrentPages();
const ctx = pages[pages.length - 1];
const poster = ctx.selectComponent(options.selector);
delete options.selector;
return poster;
};
Poster.create = (reset = false) => {
const poster = Poster();
if (!poster) {
console.error('请设置组件的id="poster"!!!');
} else {
return Poster().onCreate(reset);
}
}
export default Poster;
\ No newline at end of file
......@@ -15,7 +15,7 @@ Page({
name: "",
phone: "",
messageContant: "", // 单词拼写错误
userInfo: {},
},
onShareAppMessage() {},
......@@ -31,7 +31,31 @@ Page({
// this.setData({
// commonTipsCompVisible: false
// })
this.queryMember().then((result) => {
this.setData({
name:result.nickname
})
});
},
/**
* 获取会员信息
*/
queryMember() {
return new Promise((resolve, reject) => {
app.post({
url: app.api.member,
data: {}
}).then((result) => {
this.setData({
userInfo: result
})
resolve(result);
})
});
},
/**
* 提交表单
*/
......@@ -55,14 +79,14 @@ Page({
})
return;
}
if (!phone) {
wx.showToast({
title: "请输入联系方式",
icon: 'none'
})
return;
}
if (!checkMobile(phone)) {
// if (!phone) {
// wx.showToast({
// title: "请输入联系方式",
// icon: 'none'
// })
// return;
// }
if (phone && !checkMobile(phone)) {
wx.showToast({
title: "请输入正确联系方式",
icon: 'none'
......
......@@ -8,11 +8,11 @@
<view class="form">
<view class="form-item">
<view class="label">用户姓名</view>
<input class="val" bindinput="bindNameInput" placeholder="请输入姓名" />
<input value="{{name}}" class="val" bindinput="bindNameInput" placeholder="请输入姓名" />
</view>
<view class="form-item">
<view class="label">联系方式</view>
<input class="val" bindinput="bindPhoneInput" placeholder="请输入联系方式" type="number" />
<input class="val" bindinput="bindPhoneInput" placeholder="选填" type="number" />
</view>
<textarea class="textarea" bindinput="bindMessageContantInput" maxlength="500" placeholder="不超过500字"></textarea>
<!-- 图片上传 -->
......
import QR from '../../utils/qrcode'
import Poster from '../../miniprogram_dist/poster/poster';
let app = getApp();
Page({
......@@ -18,10 +19,115 @@ Page({
this.initData();
},
initData() {
// 获取用户信息 小程序码
this.queryMember().then((result) => {
// 获取海报数据
let posterData = this.getPosterConfig();
// 绘制设置海报
this.onCreatePoster(posterData);
});
},
onPosterSuccess(e) {
wx.hideLoading();
const {
detail
} = e;
console.log("detail:", detail)
this.setData({
imageUrl: detail
})
},
onPosterFail(err) {
wx.hideLoading();
console.error(err);
},
/**
* 异步生成海报
*/
onCreatePoster(posterConfig) {
console.log("posterConfig:", posterConfig);
this.setData({
posterConfig: posterConfig
}, () => {
Poster.create(true); // 入参：true为抹掉重新生成
});
},
// 获取海报数据
getPosterConfig() {
// 合成图片需要的数据
let {
userInfo
} = this.data;
let blocks = [{
x: 0,
y: 0,
width: 690,
height: 900,
backgroundColor: "#ffffff",
borderRadius: 10,
}];
let images = [{
x: 286,
y: 30,
width: 120,
height: 120,
borderRadius: 120,
zIndex: 11,
url: userInfo.avatar,
}, {
x: 126,
y: 220,
width: 440,
height: 440,
zIndex: 11,
url: userInfo.memberUrl,
}];
let lines = [];
let texts = [{
x: 690 / 2,
y: 192,
width: 690,
fontSize: 36,
color: "#3680EB",
textAlign: "center",
zIndex: 11,
text: userInfo.nickname,
}, {
x: 690 / 2,
y: 720,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: "深士照明",
}, {
x: 690 / 2,
y: 800,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: "扫码即获专属积分，兑换超值奖品",
}];
let posterData = {
width: 690,
height: 900,
debug: false,
blocks: blocks,
images: images,
lines: lines,
texts: texts,
}
return posterData;
},
/**
* 获取会员信息
*/
......@@ -37,73 +143,15 @@ Page({
userInfo: userInfo,
qrImagePath: userInfo.memberUrl,
})
wx.downloadFile({
url: userInfo.memberUrl,
success(res) {
if (res.statusCode === 200) {
_this.setData({
imageUrl: res.tempFilePath
})
}
}
})
// 生成个人二维码
// let tlMemberCode = userInfo.memberCode;
// let qrSize = this.setCanvasSize(440);
// let codeContent = `tlMemberCode=${tlMemberCode}`
// this.createQrCode(codeContent, 'qrcanvas', qrSize.w, qrSize.h);
resolve();
})
});
},
createQrCode(content, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
QR.api.draw(content, canvasId, cavW, cavH);
this.canvasToTempImage(canvasId);
},
//获取临时缓存图片路径，存入data中
canvasToTempImage(canvasId) {
let that = this;
wx.canvasToTempFilePath({
canvasId, // 这里canvasId即之前创建的canvas-id
success: function (res) {
let tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
qrImagePath: tempFilePath,
});
},
fail: function (res) {
console.log(res);
}
});
},
//适配不同屏幕大小的canvas
setCanvasSize(sz) {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
var width = res.windowWidth / scale;
var height = width; //canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
/**
* 保存图片到本地
*/
saveImageToPhotosAlbum() {
console.log("saveImageToPhotosAlbum");
let _this = this;
if (!_this.data.imageUrl) {
wx.showToast({
......@@ -143,4 +191,52 @@ Page({
}
})
},
// 创建二维码
createQrCode(content, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
QR.api.draw(content, canvasId, cavW, cavH);
this.canvasToTempImage(canvasId);
},
//获取临时缓存图片路径，存入data中
canvasToTempImage(canvasId) {
let that = this;
wx.canvasToTempFilePath({
canvasId, // 这里canvasId即之前创建的canvas-id
success: function (res) {
let tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
qrImagePath: tempFilePath,
});
},
fail: function (res) {
console.log(res);
}
});
},
//适配不同屏幕大小的canvas
setCanvasSize(sz) {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
var width = res.windowWidth / scale;
var height = width; //canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
})
......
{
"usingComponents": {
"poster": "/miniprogram_dist/poster/index"
},
"navigationBarTitleText": "我的二维码"
}
......
......@@ -24,14 +24,19 @@ $contentWidth:690px;
.card {
margin: 0 auto;
padding: 20px 0 74px;
// padding: 20px 0 74px;
width: $contentWidth;
background: #FFFFFF;
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.10);
// background: #FFFFFF;
// box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.10);
border-radius: 10px;
text-align: center;
font-size: 32px;
.my-card {
width: 690px;
height: 900px;
}
.avatar {
width: 120px;
height: 120px;
......
<poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
<view class="page">
<view class="app__bgc bgc"></view>
<view class="app__bg bg"></view>
......@@ -5,13 +6,12 @@
<view class="top-space"></view>
<view class="content">
<view class="card">
<image class="avatar" mode="widthFix" src="{{userInfo.avatar}}" />
<image class="my-card" mode="widthFix" src="{{imageUrl}}" />
<!-- <image class="avatar" mode="widthFix" src="{{userInfo.avatar}}" />
<view class="nickname">{{userInfo.nickname}}</view>
<image class="qrcode" mode="widthFix" src="{{qrImagePath}}" />
<!-- <image wx:if="{{qrImagePath}}" class="qrcode" mode="widthFix" src="{{qrImagePath}}" />
<canvas wx:else class="qrcode" style="visibility: hidden;" canvas-id="qrcanvas" /> -->
<view class="t1">深士照明</view>
<view class="t1 t2">扫码即获专属积分，兑换超值奖品</view>
<view class="t1 t2">扫码即获专属积分，兑换超值奖品</view> -->
</view>
<view class="tips">分享邀请好友加入，赢取推广积分</view>
<view class="btn-wrap">
......
......@@ -94,8 +94,21 @@ Page({
parentId: ""
}
}).then((result) => {
let provinceList = result;
// ---- start 把广东移动到第一条
for (var i = 0; i < provinceList.length; i++) {
let key = provinceList[i].areaName.indexOf('广东');
if (key != -1) {
let target = provinceList[i];
provinceList.unshift(target);
provinceList.splice(i + 1, 1);
break;
}
}
// ---- end 把广东移动到第一条
this.setData({
provinceList: result
provinceList: provinceList
})
console.log("provinceList:", result);
})
......