|
@@ -36,21 +36,30 @@
|
|
|
</button>
|
|
|
<!-- #endif -->
|
|
|
<button class="onSave" @click="showText">
|
|
|
- <image src="@/static/demo/ic_pic.png" mode="aspectFit"></image>
|
|
|
- <text>复制文案</text>
|
|
|
+ <view class="lg text-gray cuIcon-formfill" style="width:70rpx;height:70rpx"></view>
|
|
|
+ <text>文案</text>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button class="onSave" @click="showRes">
|
|
|
+ <view class="lg text-gray cuIcon-picfill" style="width:70rpx;height:70rpx"></view>
|
|
|
+ <text>素材</text>
|
|
|
</button>
|
|
|
|
|
|
- <button class="onSave" @click="onSaveImg">
|
|
|
- <image src="@/static/demo/ic_weixin.png" mode="aspectFit"></image>
|
|
|
- <text>生成海报</text>
|
|
|
+ <button class="onSave" @click="showPoster">
|
|
|
+ <view class="lg text-gray cuIcon-btn" style="width:70rpx;height:70rpx"></view>
|
|
|
+ <text>海报</text>
|
|
|
</button>
|
|
|
</view>
|
|
|
<!-- #ifdef H5 -->
|
|
|
|
|
|
|
|
|
- <graceDialog :isTitle="false" :show="image" closeBtnColor="#FFFFFF" v-on:closeDialog="closeImage">
|
|
|
- <view slot="content" class="grace-img-in">
|
|
|
- <image class="demo-img" :src="h5SaveImg" mode="widthFix"></image>
|
|
|
+ <graceDialog :isTitle="false" :title="`长按保存海报`" :isCloseBtn="false" :show="image" closeBtnColor="#FFFFFF" v-on:closeDialog="closeImage">
|
|
|
+ <view class="grace-img-in" slot="content">
|
|
|
+ <image class="demo-img" :src="poster" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view slot="btns" class="grace-space-between">
|
|
|
+ <text class="grace-dialog-buttons" @tap="closeImage">关闭</text>
|
|
|
+ <text class="grace-dialog-buttons grace-blue" @tap="closeImage">长按复制</text>
|
|
|
</view>
|
|
|
</graceDialog>
|
|
|
|
|
@@ -67,6 +76,20 @@
|
|
|
<text class="grace-dialog-buttons grace-blue" @tap="textCopy">复制</text>
|
|
|
</view>
|
|
|
</graceDialog>
|
|
|
+
|
|
|
+ <graceDialog :isTitle="true" :title="`素材大全`" :isCloseBtn="false" :show="res" v-on:closeDialog="closeRes">
|
|
|
+ <scroll-view :scroll-y="true" class="content2" slot="content">
|
|
|
+ <view v-for="(v, k) in fetch.pic" :key="k">
|
|
|
+ <view class="grace-img-in">
|
|
|
+ <image class="demo-img" :src="v" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view slot="btns" class="grace-space-between">
|
|
|
+ <text class="grace-dialog-buttons" @tap="closeRes">关闭</text>
|
|
|
+ <text class="grace-dialog-buttons grace-blue" @tap="closeRes">长按复制</text>
|
|
|
+ </view>
|
|
|
+ </graceDialog>
|
|
|
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
@@ -98,10 +121,12 @@ export default {
|
|
|
return {
|
|
|
swiperIndex: 0,
|
|
|
posterImgs: [],
|
|
|
- h5SaveImg: "",
|
|
|
+ poster: "",
|
|
|
image : false,
|
|
|
text : false,
|
|
|
+ res : false,
|
|
|
text_index : 0,
|
|
|
+ text_top : 0,
|
|
|
fetch : {
|
|
|
info : {},
|
|
|
pic : [],
|
|
@@ -132,6 +157,12 @@ export default {
|
|
|
closeImage : function () {
|
|
|
this.image = false;
|
|
|
},
|
|
|
+ showRes : function () {
|
|
|
+ this.res = true;
|
|
|
+ },
|
|
|
+ closeRes : function () {
|
|
|
+ this.res = false;
|
|
|
+ },
|
|
|
showText : function () {
|
|
|
this.text = true;
|
|
|
},
|
|
@@ -183,131 +214,149 @@ export default {
|
|
|
ctx.fillRect(0, 0, 375, 673);
|
|
|
ctx.setFillStyle("#FFF");
|
|
|
ctx.fillRect(0, 0, 375, 673);
|
|
|
- uni.downloadFile({
|
|
|
- url: this.fetch.pic[this.swiperIndex],
|
|
|
+
|
|
|
+ this.downPic(ctx, resolve, reject);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //下载图片
|
|
|
+ downPic : function(ctx, resolve, reject) {
|
|
|
+ var self = this;
|
|
|
+ uni.downloadFile({
|
|
|
+ url: self.fetch.pic[self.swiperIndex],
|
|
|
+ success: (res) => {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: res.tempFilePath,
|
|
|
+ success: function (image) {
|
|
|
+ var img = self.Dever.getImage(image.width, image.height, 375, 375);
|
|
|
+ var x = (375 - img[0])/2;
|
|
|
+ var y = 0;
|
|
|
+ ctx.drawImage(res.tempFilePath, x, y, img[0], img[1]);
|
|
|
+ self.downQrcode(ctx, resolve, reject);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.hideLoading();
|
|
|
+ self.Dever.alert('海报制作失败,图片下载失败');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ self.Dever.alert('海报制作失败,图片下载失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //下载二维码
|
|
|
+ downQrcode : function(ctx, resolve, reject) {
|
|
|
+ uni.downloadFile({
|
|
|
+ url: this.fetch.info.qrcode,
|
|
|
+ success: (res) => {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ this.addPosterName(ctx);
|
|
|
+ this.addPosterPrice(ctx);
|
|
|
+ this.addPosterQrcode(ctx);
|
|
|
+ // 二维码
|
|
|
+ ctx.drawImage(res.tempFilePath, 238, this.text_top + 88, 120, 120);
|
|
|
+
|
|
|
+ this.drawPoster(ctx, resolve, reject);
|
|
|
+ } else {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.Dever.alert('海报制作失败,图片下载失败');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.Dever.alert('海报制作失败,图片下载失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品标题
|
|
|
+ addPosterName : function(ctx) {
|
|
|
+ ctx.setFontSize(21);
|
|
|
+ ctx.setFillStyle('#333');
|
|
|
+ let drawtextList = drawtext(this.fetch.info.name, 341);
|
|
|
+ this.text_top = 0;
|
|
|
+ drawtextList.forEach((item,index) => {
|
|
|
+ if(index < 2){
|
|
|
+ this.text_top = 380 + (index + 1) * 28;
|
|
|
+ ctx.fillText(item.content, 17, this.text_top);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品价格
|
|
|
+ addPosterPrice : function(ctx) {
|
|
|
+ if (this.fetch.info.price) {
|
|
|
+ ctx.setFontSize(26);
|
|
|
+ ctx.setFillStyle('#f00');
|
|
|
+ ctx.fillText(this.fetch.info.price, 17, this.text_top + 47);
|
|
|
+ // 商品门市价
|
|
|
+ ctx.setFontSize(18);
|
|
|
+ ctx.setFillStyle('#999');
|
|
|
+ let textLeft = 38 + (this.fetch.info.price.length * 13)
|
|
|
+ ctx.fillText(this.fetch.info.s_price, textLeft, this.text_top + 45);
|
|
|
+ // 商品门市价横线
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.setLineWidth(1);
|
|
|
+ ctx.moveTo(textLeft - 1, this.text_top + 38);
|
|
|
+ ctx.lineTo((textLeft + 5 + this.fetch.info.s_price.length * 9), this.text_top + 38);
|
|
|
+ ctx.setStrokeStyle('#999');
|
|
|
+ ctx.stroke();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 商品分割线
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.setLineWidth(1);
|
|
|
+ ctx.moveTo(17, this.text_top + 70);
|
|
|
+ ctx.lineTo(358, this.text_top + 70);
|
|
|
+ ctx.setStrokeStyle('#eee');
|
|
|
+ ctx.stroke();
|
|
|
+ },
|
|
|
+
|
|
|
+ //二维码
|
|
|
+ addPosterQrcode : function(ctx) {
|
|
|
+ // 长按识别二维码访问
|
|
|
+ ctx.setFontSize(19);
|
|
|
+ ctx.setFillStyle('#333');
|
|
|
+ ctx.fillText("长按识别二维码访问", 17, this.text_top + 136);
|
|
|
+ // 平台名称
|
|
|
+ ctx.setFontSize(16);
|
|
|
+ ctx.setFillStyle('#999');
|
|
|
+ ctx.fillText(this.fetch.info.platform_name, 17, this.text_top + 170);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 绘制海报
|
|
|
+ drawPoster : function(ctx, resolve, reject) {
|
|
|
+ ctx.draw(true, () => {
|
|
|
+ // canvas画布转成图片并返回图片地址
|
|
|
+ uni.canvasToTempFilePath({
|
|
|
+ canvasId: 'poster',
|
|
|
+ width: 375,
|
|
|
+ height: 673,
|
|
|
+ quality : 1,
|
|
|
success: (res) => {
|
|
|
- if (res.statusCode === 200) {
|
|
|
- console.info(uni.getImageInfo({src:res.tempFilePath}));
|
|
|
- uni.getImageInfo({
|
|
|
- src: res.tempFilePath,
|
|
|
- success: function (image) {
|
|
|
- console.log(image.width);
|
|
|
- console.log(image.height);
|
|
|
- }
|
|
|
- });
|
|
|
- return;
|
|
|
- ctx.drawImage(res.tempFilePath, 0, 0, 375, 375);
|
|
|
- uni.downloadFile({
|
|
|
- url: this.fetch.info.qrcode,
|
|
|
- success: (res2) => {
|
|
|
- if (res.statusCode === 200) {
|
|
|
- // 商品标题
|
|
|
- ctx.setFontSize(21);
|
|
|
- ctx.setFillStyle('#333');
|
|
|
- let drawtextList = drawtext(this.fetch.info.name, 341);
|
|
|
- let textTop = 0;
|
|
|
- drawtextList.forEach((item,index) => {
|
|
|
- if(index < 2){
|
|
|
- textTop = 380 + (index + 1) * 28;
|
|
|
- ctx.fillText(item.content, 17, textTop);
|
|
|
- }
|
|
|
- });
|
|
|
- // 商品价格
|
|
|
- if (this.fetch.info.price) {
|
|
|
- ctx.setFontSize(26);
|
|
|
- ctx.setFillStyle('#f00');
|
|
|
- ctx.fillText(this.fetch.info.price, 17, textTop + 47);
|
|
|
- // 商品门市价
|
|
|
- ctx.setFontSize(18);
|
|
|
- ctx.setFillStyle('#999');
|
|
|
- let textLeft = 38 + (this.fetch.info.price.length * 13)
|
|
|
- ctx.fillText(this.fetch.info.s_price, textLeft, textTop + 45);
|
|
|
- // 商品门市价横线
|
|
|
- ctx.beginPath();
|
|
|
- ctx.setLineWidth(1);
|
|
|
- ctx.moveTo(textLeft - 1, textTop + 38);
|
|
|
- ctx.lineTo((textLeft + 5 + this.fetch.info.s_price.length * 9), textTop + 38);
|
|
|
- ctx.setStrokeStyle('#999');
|
|
|
- ctx.stroke();
|
|
|
- // 商品分割线
|
|
|
- ctx.beginPath();
|
|
|
- ctx.setLineWidth(1);
|
|
|
- ctx.moveTo(17, textTop + 70);
|
|
|
- ctx.lineTo(358, textTop + 70);
|
|
|
- ctx.setStrokeStyle('#eee');
|
|
|
- ctx.stroke();
|
|
|
- }
|
|
|
-
|
|
|
- // 长按识别二维码访问
|
|
|
- ctx.setFontSize(19);
|
|
|
- ctx.setFillStyle('#333');
|
|
|
- ctx.fillText("长按识别二维码访问", 17, textTop + 136);
|
|
|
- // 平台名称
|
|
|
- ctx.setFontSize(16);
|
|
|
- ctx.setFillStyle('#999');
|
|
|
- ctx.fillText(this.fetch.info.platform_name, 17, textTop + 170);
|
|
|
- // 二维码
|
|
|
- ctx.drawImage(res2.tempFilePath, 238, textTop + 88, 120, 120);
|
|
|
- ctx.draw(true, () => {
|
|
|
- // canvas画布转成图片并返回图片地址
|
|
|
- uni.canvasToTempFilePath({
|
|
|
- canvasId: 'poster',
|
|
|
- width: 375,
|
|
|
- height: 673,
|
|
|
- quality : 1,
|
|
|
- success: (res) => {
|
|
|
- if(this.posterImgs[this.swiperIndex]){
|
|
|
- this.posterImgs[this.swiperIndex].temporary = res.tempFilePath;
|
|
|
- }else{
|
|
|
- this.posterImgs[this.swiperIndex] = {
|
|
|
- temporary: res.tempFilePath
|
|
|
- };
|
|
|
- }
|
|
|
- console.log("海报制作成功!");
|
|
|
- resolve(res.tempFilePath);
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
- uni.hideLoading();
|
|
|
- reject();
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: '海报制作失败,图片下载失败',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: '海报制作失败,图片下载失败',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: '海报制作失败,图片下载失败',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
+ if(this.posterImgs[this.swiperIndex]){
|
|
|
+ this.posterImgs[this.swiperIndex].temporary = res.tempFilePath;
|
|
|
+ }else{
|
|
|
+ this.posterImgs[this.swiperIndex] = {
|
|
|
+ temporary: res.tempFilePath
|
|
|
+ };
|
|
|
}
|
|
|
+ resolve(res.tempFilePath);
|
|
|
},
|
|
|
- fail: err => {
|
|
|
+ fail: () => {
|
|
|
uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: '海报制作失败,图片下载失败',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
+ reject();
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
// 保存图片
|
|
|
- async onSaveImg() {
|
|
|
+ async showPoster() {
|
|
|
let imgUrl = "";
|
|
|
if(this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary){
|
|
|
imgUrl = await this.posterImgs[this.swiperIndex].temporary;
|
|
@@ -315,7 +364,7 @@ export default {
|
|
|
imgUrl = await this.createPoster();
|
|
|
}
|
|
|
// #ifdef H5
|
|
|
- this.h5SaveImg = imgUrl;
|
|
|
+ this.poster = imgUrl;
|
|
|
this.showImage();
|
|
|
uni.hideLoading();
|
|
|
// #endif
|