--小程序生成海报--

pages/article/detail/index.js

@@ -40,7 +40,8 @@ Page({
     form: {
       pageNum: 1,
       pageSize:15
-    }
+    },
+    maskHidden: false,
   },
   /**
    * 生命周期函数--监听页面加载
@@ -261,7 +262,7 @@ Page({
     return {
       title: this.data.momentDetail.title,
       path: 'pages/index/index?url=/pages/article/detail/index&key=id&value=' + this.data.momentDetail.id,
-      // imageUrl: imageUrl
+      // imageUrl: this.data.imagePath
     }
   },
   //分享至朋友圈
@@ -276,4 +277,52 @@ Page({
       imageUrl: imageUrl
     }
   },
+  createPoster(){
+
+  },
+  createNewImg() { 
+    var that = this;
+    var context = wx.createCanvasContext('mycanvas');
+    context.setFillStyle("red")
+    context.fillRect(0, 0, 375, 667)
+    var path = "/assets/image/def_image.png";
+    var path2 = "/assets/image/def_image.png";
+    var path3 = "/assets/image/def_image.png";
+    var path4 = "/assets/image/def_image.png";
+    var path5 = "/assets/image/def_image.png";
+    context.drawImage(path2, 126, 186, 120, 120);
+    // context.save(); // 保存当前context的状态
+
+    var name = 'hahahaha';
+    //绘制名字
+    context.setFontSize(24);
+    context.setFillStyle('#333333');
+    context.setTextAlign('center');
+    context.fillText(name, 185, 340);
+    context.stroke();
+   
+    context.draw();
+    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
+    setTimeout(function () {
+      wx.canvasToTempFilePath({
+        canvasId: 'mycanvas',
+        success: function (res) {
+          var tempFilePath = res.tempFilePath;
+          that.setData({
+            imagePath: tempFilePath,
+            canvasHidden:true,
+            maskHidden: true,
+          });
+        },
+        fail: function (res) {
+          console.log(res);
+        }
+      });
+    }, 200);
+  },
+  baocun(){
+    this.setData({
+      maskHidden:false
+    })
+  }
 })

pages/article/detail/index.wxml

@@ -74,7 +74,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:420rpx;margin-left: 32rpx" bindtap="showComment">
+		<view class="search-form" style="border-radius: 12rpx;width:440rpx;margin-left: 32rpx" bindtap="showComment">
 			<input placeholder="点击输入评论" disabled="true" adjust-position="{{false}}" focus="{{false}}"></input>
 		</view>
 		<view class="action" style="margin-right:24rpx">
@@ -93,6 +93,12 @@
 				<text class="cuIcon-share text-black" style="font-size:22px;"></text>
 			</button>
 		</view>
+		<!-- 生成海报点击图标  -->
+		<!-- <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 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" show-confirm-bar="{{false}}" adjust-position="{{false}}" bindinput="bindInput" placeholder="输入评论，最多180字" placeholder-style="color:#aaa" bindfocus="inputFocus" bindblur="inputBlur"></textarea>
@@ -100,4 +106,14 @@
 			<button class="cu-btn offer-btn" style="background-color: #008AFF" bindtap="submitComment">发表</button>
 		</view>
 	</view>
-</view>
+  <!--生成海报  -->
+    <!-- <view class='imagePathBox' hidden="{{maskHidden == false}}">
+      <image src="{{imagePath}}" class='shengcheng'></image>
+      <button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button>
+    </view>
+   <view hidden="{{maskHidden == false}}" class="mask"></view> 
+  <view class="canvas-box">
+      <canvas  style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas"/>
+  </view> -->
+</view>
+  

pages/article/detail/index.wxss

@@ -32,4 +32,29 @@
   height:32px;
   line-height: 32px
 }
-.share-btn::after{ border: none; }  
+.share-btn::after{ border: none; }  
+
+.shengcheng{
+  width: 87%;
+  height: 80%;
+  position: fixed;
+  top: 100rpx;
+  left: 50%;
+  margin-left: -44%;
+  z-index: 10;
+  margin-top: 2%;
+}
+.baocun{
+  display: block;
+  width: 87%;
+  height: 80rpx;
+  padding: 0;
+  line-height: 80rpx;
+  text-align: center;
+  position: fixed;
+  bottom: 90rpx;
+  left: 6%;
+  background: red;
+  color: white;
+  font-size: 32rpx;
+}