| | |
| | | }
|
| | | },
|
| | | {
|
| | | "path": "partner-info/partner-code-v2",
|
| | | "style": {
|
| | | "navigationBarTitleText": "合伙人推广二维码",
|
| | | "enablePullDownRefresh": false
|
| | | }
|
| | | },
|
| | |
|
| | | {
|
| | | "path": "order-manage/order-manage",
|
| | | "style": {
|
| | | "navigationBarTitleText": "订单管理",
|
对比新文件 |
| | |
| | | <template> |
| | | <view style="position: fixed;z-index: -9999;"> |
| | | <canvas id="myQrcode" :canvas-id="canvasID" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}"></canvas> |
| | | <view v-if="qrCode == ''"> |
| | | <QRCode ref="qrcode" /> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import QRCode from "../qr_code/qrcode.vue" |
| | | var _this; |
| | | export default { |
| | | name: 'canvas-images', |
| | | props: { |
| | | // canvasID 等同于 canvas-id |
| | | canvasID: { |
| | | Type: String, |
| | | default: 'myQrcode' |
| | | }, |
| | | canvasWidth: { // 画布宽度 |
| | | Type: 'int', |
| | | default: 375 |
| | | }, |
| | | canvasHeight: { // 画布高度 |
| | | Type: 'int', |
| | | default: 650 |
| | | }, |
| | | shareTitle: { // 分享标题 |
| | | Type: 'String', |
| | | default: '我是这张图片的标题' |
| | | }, |
| | | goodsTitle: { // 商品宣传标题 |
| | | Type: 'String', |
| | | default: '' |
| | | }, |
| | | goodsTitle2: { // 商品宣传标题 |
| | | Type: 'String', |
| | | default: '' |
| | | }, |
| | | |
| | | shareImage: { // 分享图片 |
| | | Type: 'String', |
| | | default: '' |
| | | }, |
| | | qrSize: { // 二维码大小 |
| | | Type: 'int', |
| | | default: 100 |
| | | }, |
| | | qrUrl: { // 生成二维码的链接 |
| | | Type: 'String', |
| | | default: 'https://ext.dcloud.net.cn/plugin?id=5747' |
| | | } |
| | | }, |
| | | components: { |
| | | QRCode |
| | | }, |
| | | data() { |
| | | return { |
| | | qrCode: '', // 二维码 |
| | | localImgPath: '', |
| | | canvas: undefined |
| | | } |
| | | }, |
| | | mounted() { |
| | | _this = this; |
| | | }, |
| | | methods: { |
| | | // downloadImg() { |
| | | // let that = this |
| | | // const query = uni.createSelectorQuery() |
| | | // console.log('canvasID',this.canvasID) |
| | | // query.select('#myQrcode') |
| | | // .fields({ |
| | | // node: true, |
| | | // size: true |
| | | // }) |
| | | // .exec((res) => { |
| | | // console.log('query',res) |
| | | // var canvas = res[0].node |
| | | // uni.canvasToTempFilePath({ |
| | | // canvasId: this.canvasID, |
| | | // canvas: canvas, |
| | | // x: 0, |
| | | // y: 0, |
| | | // width: this.canvasWidth, |
| | | // height: this.canvasHeight, |
| | | // destWidth: this.canvasWidth, |
| | | // destHeight: this.canvasHeight, |
| | | // success(res) { |
| | | // console.log('二维码临时路径:', res.tempFilePath) |
| | | // uni.saveImageToPhotosAlbum({ |
| | | // filePath: res.tempFilePath, |
| | | // success: function() { |
| | | // console.log('save success'); |
| | | // uni.showToast({ |
| | | // title: '保存成功' |
| | | // }) |
| | | // }, |
| | | // fail(res) { |
| | | // console.error(res) |
| | | // uni.showToast({ |
| | | // title: '保存失败。', |
| | | // icon: 'error' |
| | | // }) |
| | | // } |
| | | // }) |
| | | // }, |
| | | // fail(res) { |
| | | // console.error('fail', res) |
| | | |
| | | // uni.showToast({ |
| | | // title: '保存失败', |
| | | // icon: 'error' |
| | | // }) |
| | | // } |
| | | // }) |
| | | |
| | | // }) |
| | | |
| | | // }, |
| | | |
| | | // 创建二维码 |
| | | canvasCreate() { |
| | | this.localImgPath = this.shareImage |
| | | console.log('this.shareImage', this.shareImage) |
| | | if (this.shareImage && this.shareImage.startsWith('https://')) { |
| | | uni.getImageInfo({ |
| | | src: _this.shareImage, |
| | | success(res) { |
| | | console.log('getImageInfo res', res) |
| | | _this.localImgPath = res.path |
| | | _this.$refs.qrcode.make({ |
| | | size: _this.qrSize, |
| | | text: _this.qrUrl |
| | | }) |
| | | .then(res => { |
| | | // 返回的res与uni.canvasToTempFilePath返回一致 |
| | | // console.log(res) |
| | | _this.qrCode = res.tempFilePath; |
| | | _this.onCanvas(); |
| | | }); |
| | | }, |
| | | fail(error) { |
| | | this.$message.showToast('加载图片错误') |
| | | } |
| | | }) |
| | | } else { |
| | | _this.$refs.qrcode.make({ |
| | | size: _this.qrSize, |
| | | text: _this.qrUrl |
| | | }) |
| | | .then(res => { |
| | | // 返回的res与uni.canvasToTempFilePath返回一致 |
| | | // console.log(res) |
| | | _this.qrCode = res.tempFilePath; |
| | | _this.onCanvas(); |
| | | }); |
| | | } |
| | | |
| | | |
| | | }, |
| | | // 画图 |
| | | async onCanvas() { |
| | | uni.showLoading({ |
| | | title: "分享图片生成中..." |
| | | }); |
| | | const ctx = uni.createCanvasContext(_this.canvasID, _this); |
| | | // 设置 canvas 背景色 |
| | | ctx.setFillStyle('#FFFFFF'); |
| | | ctx.fillRect(0, 0, _this.canvasWidth, _this.canvasHeight); |
| | | ctx.setFillStyle('#000000'); |
| | | // 背景图片 |
| | | //需要下载图片 |
| | | |
| | | if (_this.localImgPath) { |
| | | console.log('localImgPath', _this.localImgPath) |
| | | ctx.drawImage(_this.localImgPath, 20, 20, 335, 500); |
| | | } |
| | | // ctx.setFontSize(18); |
| | | // ctx.setTextAlign('center'); |
| | | // ctx.fillText(_this.shareTitle, _this.canvasWidth / 2, 30); |
| | | // 左边标题 |
| | | ctx.setTextAlign('left') |
| | | ctx.setFontSize(22) |
| | | _this.writeTextOnCanvas(ctx, 20, 21, _this.goodsTitle, 20, 560); |
| | | ctx.setTextAlign('left') |
| | | ctx.setFontSize(16) |
| | | _this.writeTextOnCanvas(ctx, 20, 21, _this.goodsTitle2, 20, 585); |
| | | // 设置虚线 |
| | | // ctx.setStrokeStyle('#333333'); |
| | | // ctx.setLineDash([5, 10], 2); |
| | | // ctx.beginPath(); |
| | | // ctx.moveTo(220, 340); |
| | | // ctx.lineTo(220, 420); |
| | | // ctx.stroke(); |
| | | // 二维码 |
| | | ctx.drawImage(_this.qrCode, 250, 520, 100, 100); |
| | | // ctx.draw(); |
| | | |
| | | // 延迟后渲染至canvas上 |
| | | let pic = await _this.setTime(ctx) |
| | | _this.$emit('success', pic); |
| | | }, |
| | | /** |
| | | * @param {Object} ctx_2d getContext("2d") 对象 |
| | | * @param {int} lineheight 段落文本行高 |
| | | * @param {int} bytelength 设置单字节文字一行内的数量 |
| | | * @param {string} text 写入画面的段落文本 |
| | | * @param {int} startleft 开始绘制文本的 x 坐标位置(相对于画布) |
| | | * @param {int} starttop 开始绘制文本的 y 坐标位置(相对于画布) |
| | | */ |
| | | writeTextOnCanvas(ctx_2d, lineheight, bytelength, text, startleft, starttop) { |
| | | // 获取字符串的真实长度(字节长度) |
| | | function getTrueLength(str) { |
| | | var len = str.length, |
| | | truelen = 0; |
| | | for (var x = 0; x < len; x++) { |
| | | if (str.charCodeAt(x) > 128) { |
| | | truelen += 2; |
| | | } else { |
| | | truelen += 1; |
| | | } |
| | | } |
| | | return truelen; |
| | | } |
| | | // 按字节长度截取字符串,返回substr截取位置 |
| | | function cutString(str, leng) { |
| | | var len = str.length, |
| | | tlen = len, |
| | | nlen = 0; |
| | | for (var x = 0; x < len; x++) { |
| | | if (str.charCodeAt(x) > 128) { |
| | | if (nlen + 2 < leng) { |
| | | nlen += 2; |
| | | } else { |
| | | tlen = x; |
| | | break; |
| | | } |
| | | } else { |
| | | if (nlen + 1 < leng) { |
| | | nlen += 1; |
| | | } else { |
| | | tlen = x; |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | return tlen; |
| | | } |
| | | for (var i = 1; getTrueLength(text) > 0; i++) { |
| | | var tl = cutString(text, bytelength); |
| | | ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i - 1) * lineheight + |
| | | starttop); |
| | | text = text.substr(tl); |
| | | } |
| | | }, |
| | | // 彻底改成同步 防止拿到的图片地址为空 |
| | | setTime(ctx) { |
| | | return new Promise((resole, err) => { |
| | | setTimeout(() => { |
| | | ctx.draw(false, async () => { |
| | | let pic = await _this.getNewPic(); |
| | | resole(pic) |
| | | }); |
| | | }, 600) |
| | | }) |
| | | }, |
| | | // 获取新的图片地址 |
| | | getNewPic() { |
| | | return new Promise((resolve, errs) => { |
| | | setTimeout(() => { |
| | | uni.canvasToTempFilePath({ |
| | | canvasId: _this.canvasID, |
| | | quality: 1, |
| | | complete: (res) => { |
| | | // 在H5平台下,tempFilePath 为 base64 |
| | | // 关闭showLoading |
| | | uni.hideLoading(); |
| | | // 储存海报地址 也是分享的地址 |
| | | resolve(res.tempFilePath) |
| | | } |
| | | }, _this); |
| | | }, 200) |
| | | }) |
| | | }, |
| | | }, |
| | | mounted() { |
| | | _this = this; |
| | | } |
| | | } |
| | | </script> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import shareImages from '@/components/hj-placard/shareImages.vue' |
| | | import shareImages from './hj-placard/shareImages.vue' |
| | | export default { |
| | | components: { |
| | | shareImages |