Skip to content

M
mallapp
Commit cccb9582 authored by 罗超's avatar 罗超
Browse files
Options

修改Canvas

parent 403d6acc
Show whitespace changes
Inline Side-by-side
Showing with 158 additions and 266 deletions
pages/goods/components/draw/style1.vue
View file @ cccb9582
<template> <template>
<view class="draw-style1" :style="{ zoom: zoom }"> <view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips> <u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas <canvas
canvas-id="firstCanvas" canvas-id="firstCanvas"
class="sty-box" class="sty-box"
...@@ -44,6 +45,7 @@ export default { ...@@ -44,6 +45,7 @@ export default {
loca_images: [], loca_images: [],
}, },
ctx: null, ctx: null,
tempPic: "",
}; };
}, },
watch: { watch: {
...@@ -77,8 +79,6 @@ export default { ...@@ -77,8 +79,6 @@ export default {
}, },
}, },
mounted() { mounted() {
console.log("in draw");
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2); this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images; this.config.images = this.images;
this.config.bgType = this.bgType; this.config.bgType = this.bgType;
...@@ -154,6 +154,9 @@ export default { ...@@ -154,6 +154,9 @@ export default {
); );
}, },
drawCtx() { drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this); let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this; let that = this;
if (!this.info.avatar_loca) { if (!this.info.avatar_loca) {
...@@ -227,11 +230,33 @@ export default { ...@@ -227,11 +230,33 @@ export default {
} }
}, },
drawQrCode(ctx) { drawQrCode(ctx) {
let that = this;
uni.getImageInfo({ uni.getImageInfo({
src: this.info.qrcode_url, src: this.info.qrcode_url,
success: function (image) { success: function (image) {
ctx.drawImage(image.path, 480, 975, 215, 215); ctx.drawImage(image.path, 480, 975, 215, 215);
ctx.draw(); ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0 * that.zoom,
destHeight: 1344.0 * that.zoom,
canvasId: "firstCanvas",
success: (res) => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
},
},
that
);
});
}, },
}); });
}, },
...@@ -428,7 +453,10 @@ export default { ...@@ -428,7 +453,10 @@ export default {
imgRect.sy, imgRect.sy,
imgRect.sWidth, imgRect.sWidth,
imgRect.sHeight, imgRect.sHeight,
375, 459, 351, 234 375,
459,
351,
234
); );
ctx.fillStyle = "#000"; ctx.fillStyle = "#000";
ctx.fillRect(375, 693, 351, 234); ctx.fillRect(375, 693, 351, 234);
...@@ -444,7 +472,10 @@ export default { ...@@ -444,7 +472,10 @@ export default {
imgRect.sy, imgRect.sy,
imgRect.sWidth, imgRect.sWidth,
imgRect.sHeight, imgRect.sHeight,
375, 693, 351, 234 375,
693,
351,
234
); );
this.otherDraw(ctx); this.otherDraw(ctx);
} }
...@@ -600,73 +631,18 @@ export default { ...@@ -600,73 +631,18 @@ export default {
<style> <style>
.draw-style1 { .draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff;
}
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff; background: #fff;
} position: relative;
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; z-index: 2;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.draw-style1 .sty-box .info-box .left-info .good-price {
color: #fc4a3b;
font-size: 40px;
margin-bottom: 75px;
} }
.draw-style1 .sty-box .info-box .left-info .tips { .draw-style1 .sty-box {
font-size: 24px; width: 750px;
color: gray; height: 1344px;
position: absolute;
top: -1344px;
left: -750px;
} }
</style> </style>
pages/goods/components/draw/style2.vue
View file @ cccb9582
<template> <template>
<view class="draw-style1" :style="{ zoom: zoom }"> <view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips> <u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas <canvas
canvas-id="firstCanvas" canvas-id="firstCanvas"
class="sty-box" class="sty-box"
...@@ -44,6 +45,7 @@ export default { ...@@ -44,6 +45,7 @@ export default {
loca_images: [], loca_images: [],
}, },
ctx: null, ctx: null,
tempPic: ""
}; };
}, },
watch: { watch: {
...@@ -154,6 +156,9 @@ export default { ...@@ -154,6 +156,9 @@ export default {
); );
}, },
drawCtx() { drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this); let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this; let that = this;
if (!this.info.avatar_loca) { if (!this.info.avatar_loca) {
...@@ -218,11 +223,33 @@ export default { ...@@ -218,11 +223,33 @@ export default {
} }
}, },
drawQrCode(ctx) { drawQrCode(ctx) {
let that=this
uni.getImageInfo({ uni.getImageInfo({
src: this.info.qrcode_url, src: this.info.qrcode_url,
success: function (image) { success: function (image) {
ctx.drawImage(image.path, 458, 1063, 215, 215); ctx.drawImage(image.path, 458, 1063, 215, 215);
ctx.draw(); ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0 * that.zoom,
destHeight: 1344.0 * that.zoom,
canvasId: "firstCanvas",
success: (res) => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
},
},
that
);
});
}, },
}); });
}, },
...@@ -469,8 +496,8 @@ export default { ...@@ -469,8 +496,8 @@ export default {
this.showGoodPrice(ctx); this.showGoodPrice(ctx);
//this.showTips(ctx); //this.showTips(ctx);
this.drawQrCode(ctx); this.drawQrCode(ctx);
that.drawAvatar(ctx); this.drawAvatar(ctx);
that.drawTitle(ctx); this.drawTitle(ctx);
} }
}, },
showGoodPrice(ctx) { showGoodPrice(ctx) {
...@@ -560,73 +587,18 @@ export default { ...@@ -560,73 +587,18 @@ export default {
<style> <style>
.draw-style1 { .draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff; background: #fff;
} position: relative;
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; z-index: 2;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
} }
.draw-style1 .sty-box .info-box .left-info .good-price { .draw-style1 .sty-box {
color: #fc4a3b; width: 750px;
font-size: 40px; height: 1344px;
margin-bottom: 75px; position: absolute;
} top: -1344px;
.draw-style1 .sty-box .info-box .left-info .tips { left: -750px;
font-size: 24px;
color: gray;
} }
</style> </style>
pages/goods/components/draw/style3.vue
View file @ cccb9582
<template> <template>
<view class="draw-style1" :style="{ zoom: zoom }"> <view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips> <u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas <canvas
canvas-id="firstCanvas" canvas-id="firstCanvas"
class="sty-box" class="sty-box"
...@@ -44,6 +45,7 @@ export default { ...@@ -44,6 +45,7 @@ export default {
loca_images: [], loca_images: [],
}, },
ctx: null, ctx: null,
tempPic: "",
}; };
}, },
watch: { watch: {
...@@ -154,6 +156,9 @@ export default { ...@@ -154,6 +156,9 @@ export default {
); );
}, },
drawCtx() { drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this); let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this; let that = this;
if (!this.info.avatar_loca) { if (!this.info.avatar_loca) {
...@@ -227,11 +232,33 @@ export default { ...@@ -227,11 +232,33 @@ export default {
} }
}, },
drawQrCode(ctx) { drawQrCode(ctx) {
let that = this;
uni.getImageInfo({ uni.getImageInfo({
src: this.info.qrcode_url, src: this.info.qrcode_url,
success: function (image) { success: function (image) {
ctx.drawImage(image.path, 50, 1085, 232, 232); ctx.drawImage(image.path, 50, 1085, 232, 232);
ctx.draw(); ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0 * that.zoom,
destHeight: 1344.0 * that.zoom,
canvasId: "firstCanvas",
success: (res) => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
},
},
that
);
});
}, },
}); });
}, },
...@@ -522,73 +549,18 @@ export default { ...@@ -522,73 +549,18 @@ export default {
<style> <style>
.draw-style1 { .draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff; background: #fff;
} position: relative;
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; z-index: 2;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
} }
.draw-style1 .sty-box .info-box .left-info .good-price { .draw-style1 .sty-box {
color: #fc4a3b; width: 750px;
font-size: 40px; height: 1344px;
margin-bottom: 75px; position: absolute;
} top: -1344px;
.draw-style1 .sty-box .info-box .left-info .tips { left: -750px;
font-size: 24px;
color: gray;
} }
</style> </style>
pages/goods/components/draw/style4.vue
View file @ cccb9582
<template> <template>
<view class="draw-style1" :style="{ zoom: zoom }"> <view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips> <u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas <canvas
canvas-id="firstCanvas" canvas-id="firstCanvas"
class="sty-box" class="sty-box"
...@@ -44,6 +45,7 @@ export default { ...@@ -44,6 +45,7 @@ export default {
loca_images: [], loca_images: [],
}, },
ctx: null, ctx: null,
tempPic: "",
}; };
}, },
watch: { watch: {
...@@ -154,6 +156,9 @@ export default { ...@@ -154,6 +156,9 @@ export default {
); );
}, },
drawCtx() { drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this); let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this; let that = this;
if (!this.info.avatar_loca) { if (!this.info.avatar_loca) {
...@@ -219,11 +224,33 @@ export default { ...@@ -219,11 +224,33 @@ export default {
} }
}, },
drawQrCode(ctx) { drawQrCode(ctx) {
let that = this;
uni.getImageInfo({ uni.getImageInfo({
src: this.info.qrcode_url, src: this.info.qrcode_url,
success: function (image) { success: function (image) {
ctx.drawImage(image.path, 306, 1097, 138, 138); ctx.drawImage(image.path, 306, 1097, 138, 138);
ctx.draw(); ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0 * that.zoom,
destHeight: 1344.0 * that.zoom,
canvasId: "firstCanvas",
success: (res) => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
},
},
that
);
});
}, },
}); });
}, },
...@@ -541,73 +568,18 @@ export default { ...@@ -541,73 +568,18 @@ export default {
<style> <style>
.draw-style1 { .draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff; background: #fff;
} position: relative;
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; z-index: 2;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
} }
.draw-style1 .sty-box .info-box .left-info .good-price { .draw-style1 .sty-box {
color: #fc4a3b; width: 750px;
font-size: 40px; height: 1344px;
margin-bottom: 75px; position: absolute;
} top: -1344px;
.draw-style1 .sty-box .info-box .left-info .tips { left: -750px;
font-size: 24px;
color: gray;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment