libo
/
ztb-mini
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

--海报分享--

featrue/v4.5
DESKTOP-A1SENDA\HUzy 4 years ago
parent
5869f5aa6d
commit
d3b7a74fa4
2 changed files with 105 additions and 44 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 112
      pakageInfo/pages/article/detail/index.js
  2. 37
      pakageInfo/pages/article/detail/index.wxml

112
pakageInfo/pages/article/detail/index.js
View File

@ -39,7 +39,7 @@ Page({
finished: false,
form: {
pageNum: 1,
pageSize:15
pageSize: 15
},
maskHidden: false,
},
@ -262,7 +262,7 @@ Page({
return {
title: this.data.momentDetail.title,
path: 'pages/index/index?url=/pakageInfo/pages/article/detail/index&key=id&value=' + this.data.momentDetail.id,
// imageUrl: this.data.imagePath
imageUrl: this.data.imagePathHb||imageUrl
}
},
//分享至朋友圈
@ -274,18 +274,98 @@ Page({
return {
title: this.data.momentDetail.title,
path: 'pages/index/index?url=/pakageInfo/pages/article/detail/index&key=id&value=' + this.data.momentDetail.id,
imageUrl: imageUrl
imageUrl: this.data.imagePathHb||imageUrl
}
},
createPoster(){
createPoster() {
},
createNewImg() {
createNewImg() {
var that = this;
var context = wx.createCanvasContext('mycanvas');
// context.drawImage(path2, 0, 0, 120, 120);
// context.save(); // 保存当前context的状态
context.font="normal 400 15px Arial, sans-serif"
// wx:if="{momentDetail.millPaperName}" src="/pakageInfo/assets/image/img_poster_header_has_title.png"
// <image wx:else src="/pakageInfo/assets/image/im_poster_header_no_title.png" style="width:100%;height:100%"></image>
var parth0='../../../assets/image/img_poster_bg.png'
if (this.data.momentDetail.millPaperName) {
var path1 = '../../../assets/image/img_poster_header_has_title.png'
} else {
var path1 = '../../../assets/image/im_poster_header_no_title.png'
}
context.fillStyle = "white"
context.fillRect(0, 0, 375, 667);
context.stroke()
context.drawImage(parth0, 0, 0, 375, 667);
context.stroke()
context.drawImage(path1, 0, 0, 375, 120);
context.stroke()
//绘制底部图片区域
var parth2='../../../assets/image/img_poster_footer.png'
context.drawImage(parth2, 0, 500, 375, 120);
context.stroke()
//绘制内容标题
context.setFontSize(18);
context.setFillStyle('#000000');
context.setTextAlign('center');
context.fillText(this.data.momentDetail.title, 187, 152);
context.stroke()
//绘制内容
var text = this.data.momentDetail.content
var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组
var temp = "";
var row = [];
context.setFontSize(15)
context.setTextAlign('left');
context.setFillStyle("#000")
//内容自动换行
for (var a = 0; a < chr.length; a++) {
if (context.measureText(temp).width < 330) {
temp += chr[a];
} else {
a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
row.push(temp);
temp = "";
}
}
row.push(temp);
if (row.length > 12) {
var rowCut = row.slice(0, 12);
var rowPart = rowCut[11];
var test = "";
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (context.measureText(test).width < 330) {
test += rowPart[a];
}
else {
break;
}
}
empty.push(test);
var group = empty[0] + "..."//这里只显示两行，超出的用...表示
rowCut.splice(11, 1, group);
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
context.fillText(row[b], 20, 185+ b * 30, 500);
}
//如果纸厂名字存在则在顶部图片区域中心绘制纸厂名称
//这里先把细体文字绘制完再绘制加粗的顶部纸厂名称，如果不在最后绘制则需要使用ctx.font = 'normal 400 15px Arial, sans-serif';重置一下大小
if(this.data.momentDetail.millPaperName){
// context.setFontSize(24);
context.font="normal bold 24px sans-serif"
context.setFillStyle('#3539F8');
context.setTextAlign('center');
context.fillText(this.data.momentDetail.millPaperName, 187, 55);
context.stroke()
}
context.save(); // 保存当前context的状态
context.draw();
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(function () {
@ -295,7 +375,7 @@ Page({
var tempFilePath = res.tempFilePath;
that.setData({
imagePathHb: tempFilePath,
canvasHidden:true,
canvasHidden: true,
maskHidden: true,
});
},
@ -304,16 +384,14 @@ Page({
}
});
}, 200);
},
//点击保存到相册
baocun:function(){
//点击保存到相册
baocun: function () {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
filePath: that.data.imagePathHb,
success(res) {
console.log('filePath',filePath)
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
@ -334,10 +412,10 @@ Page({
}
})
},
coloseHb(){
coloseHb() {
console.log(this.data)
this.setData({
maskHidden:false
maskHidden: false
})
}
})

37
pakageInfo/pages/article/detail/index.wxml
View File

@ -82,7 +82,7 @@
<view class="cu-bar foot input" style="bottom:{{inputBottom}}px" wx:if="{{momentDetail}}">
<view class="flex flex-center" style="height:{{100 + safeBottom}}rpx;padding-bottom: {{safeBottom}}rpx;"
wx:if="{{!focus}}">
<view class="search-form" style="border-radius: 12rpx;width:400rpx;margin-left: 32rpx" bindtap="showComment">
<view class="search-form" style="border-radius: 12rpx;width:330rpx;margin-left: 32rpx" bindtap="showComment">
<input placeholder="点击输入评论" disabled="true" adjust-position="{{false}}" focus="{{false}}"></input>
</view>
<view class="action" style="margin-right:24rpx">
@ -103,11 +103,11 @@
</button>
</view>
<!-- 生成海报点击图标 -->
<!-- <view class="roder-add flex flex-center">
<view class="roder-add flex flex-center">
<button bindtap="createNewImg" class="share-btn">
<text class="cuIcon-news text-black" style="font-size:27px;"></text>
</button>
</view> -->
</view>
</view>
<view style="padding:30rpx 10rpx 30rpx 30rpx;width:100%" wx:else>
<textarea id="content" maxlength="180" style="height:160rpx;width:100%" focus="{{focus}}" cursor-spacing="40"
@ -119,28 +119,11 @@
</view>
<!--生成海报 bindtap='baocun' -->
<view class='imagePathBox' hidden="{{maskHidden == false}}">
<image src="{{imagePathHb}}" class='shengcheng'></image>
<image src="{{imagePathHb}}" class='shengcheng'></image>
<!-- <view class="footSmalltextArea" bindtap='coloseHb'>
<!-- <view class='baocun'></view> -->
<view class='shengcheng2'>
<view class="topImg">
<image wx:if="{momentDetail.millPaperName}" src="/pakageInfo/assets/image/img_poster_header_has_title.png"
style="width:100%;height:100%"></image>
<image wx:else src="/pakageInfo/assets/image/im_poster_header_no_title.png" style="width:100%;height:100%"></image>
<view wx:if="{momentDetail.millPaperName}" class="titleTextArea"><text>{{momentDetail.millPaperName}}</text>
</view>
</view>
<view class="contentText">
<image src="/pakageInfo/assets/image/img_poster_bg.png" style="width:100%;height:100%"></image>
<view class="contentTextArea">
<view class="contentTextAreaTopTitle">
<text>{{momentDetail.title}}</text>
</view>
<view class="contentTextAreaMidContent">
<text>{{momentDetail.content}}</text>
</view>
</view>
</view>
<view class="footzt">
<view class="footImg1">
<image src="/pakageInfo/assets/image/img_poster_footer.png" style="width:100%;height:100%"></image>
@ -168,7 +151,7 @@
<view class="footSmalltext">微信</view>
</view>
</view>
<view class="footIcon" style="margin-left:15rpx" bindtap='onShareTimeline'>
<!-- <view class="footIcon" style="margin-left:15rpx" bindtap='onShareTimeline'>
<view class="footSmallIconArea">
<view class="footSmallIcon">
<image src="/pakageInfo/assets/image/pyqicon.png" style="width:100%;height:100%"></image>
@ -177,8 +160,8 @@
<view class="footSmalltextArea">
<view class="footSmalltext">朋友圈</view>
</view>
</view>
<view class="footIcon" style="margin-left:147rpx" bindtap='coloseHb'>
</view> -->
<view class="footIcon" style="margin-left:320rpx" bindtap='coloseHb'>
<view class="footSmallIconArea">
<view class="footSmallIcon">
<text class="cuIcon-close" style="font-size:62rpx"></text>
@ -193,6 +176,6 @@
</view>
</view>
<view class="canvas-box">
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px;" canvas-id="mycanvas" />
</view>
</view>
Write Preview
Loading…
Cancel
Save