提交

src/pages/us/canvas.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Image } from "@tarojs/components";
+/**
+ * 引入生命周期函数
+ * componentDidMount
+ */
+import Taro from "@tarojs/taro";
+
+import "./index.scss";
+
+class Canvas extends React.Component<any, any> {
+  static defaultProps = {};
+  #systemInfo = Taro.getSystemInfoSync();
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      height: 0,
+    };
+
+    // https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/6.jpg
+  }
+
+  componentDidMount = () => {
+    // 创建离屏 Canvas
+  };
+
+  getImageKf = (e: any) => {
+    this.setState({
+      height: (this.#systemInfo.screenWidth / e.detail.width) * e.detail.height,
+    });
+  };
+
+  render() {
+    // const {  } = this.props;
+    return (
+      <Image
+        style={`width: ${this.#systemInfo.screenWidth * 0.92}px;height: ${
+          this.state.height
+        }px;display: block;margin: 0 auto`}
+        showMenuByLongpress={true}
+        src="https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/us-kf.png"
+        onLoad={this.getImageKf}
+      />
+    );
+  }
+}
+
+export { Canvas };

src/pages/us/index.css

@@ -4,6 +4,17 @@
   position: relative;
 }
 
+.Us #myCanvas {
+  position: absolute;
+  z-index: -1;
+}
+
+.Us .login {
+  margin: 1em 0;
+  background-color: #91725D;
+  color: #FFF;
+}
+
 .Us .user {
   position: absolute;
   top: 235px;

src/pages/us/index.min.css

@@ -1 +1 @@
-.Us{width:100%;box-sizing:border-box;position:relative}.Us .user{position:absolute;top:235px;left:50%;transform:translateX(-50%);border-radius:50%;padding:0;width:200px;height:200px}.Us .user .userImg{width:200px;height:200px}.Us .main{padding:0 35px}.Us .main .us_cell{display:flex;font-size:28px;height:2em;line-height:2em;margin:0 0 16px 0}.Us .main .us_cell:last-child{margin-bottom:0}.Us .main .us_cell .right{flex-basis:80px;text-align:right}.Us .main .us_cell .left{flex:1}.Us .main .us_cell .left .text{vertical-align:middle;margin-left:5px}.Us .main .us_cell .img{width:36px;height:36px;vertical-align:middle}
+.Us{width:100%;box-sizing:border-box;position:relative}.Us #myCanvas{position:absolute;z-index:-1}.Us .login{margin:1em 0;background-color:#91725D;color:#fff}.Us .user{position:absolute;top:235px;left:50%;transform:translateX(-50%);border-radius:50%;padding:0;width:200px;height:200px}.Us .user .userImg{width:200px;height:200px}.Us .main{padding:0 35px}.Us .main .us_cell{display:flex;font-size:28px;height:2em;line-height:2em;margin:0 0 16px 0}.Us .main .us_cell:last-child{margin-bottom:0}.Us .main .us_cell .right{flex-basis:80px;text-align:right}.Us .main .us_cell .left{flex:1}.Us .main .us_cell .left .text{vertical-align:middle;margin-left:5px}.Us .main .us_cell .img{width:36px;height:36px;vertical-align:middle}

src/pages/us/index.scss

@@ -5,6 +5,11 @@
   box-sizing: border-box;
   position: relative;
 
+  #myCanvas {
+    position: absolute;
+    z-index: -1;
+  }
+
   .login {
     margin: 1em 0;
     background-color: $main-color-light;

src/pages/us/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, Image, Button } from "@tarojs/components";
+import { View, Text, Image, Button, Canvas } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 
 import "./index.scss";
@@ -23,6 +23,8 @@ class Us extends React.Component<any, any> {
     this.state = {
       height: 0,
       heightKf: 0,
+      Cwidth: 0,
+      Cheight: 0,
       userUrl: Taro.getStorageSync("userUrl") || "",
       userPhone: Taro.getStorageSync("userPhone") || "",
     };
@@ -54,23 +56,74 @@ class Us extends React.Component<any, any> {
       url: base.baseAPI + "/wx/getuserphonenumber?code=" + e.detail.code,
       method: "GET",
     }).then((res: any) => {
-      const { data: { code, data: { phoneInfo } }, statusCode } = res;
-      if (statusCode !== 200 || code !== 0) return Taro.showToast({
-        title: "获取手机号失败",
-        icon: "none",
-      });
+      const {
+        data: {
+          code,
+          data: { phoneInfo },
+        },
+        statusCode,
+      } = res;
+      if (statusCode !== 200 || code !== 0)
+        return Taro.showToast({
+          title: "获取手机号失败",
+          icon: "none",
+        });
       const { phoneNumber } = phoneInfo;
       this.setState({
-        userPhone: phoneNumber || ""
-      })
+        userPhone: phoneNumber || "",
+      });
       Taro.setStorageSync("userPhone", phoneNumber || "");
     });
   };
 
+  createImge = () => {
+    const ctx = Taro.createCanvasContext("myCanvas");
+
+    // 获取远程图片
+    Taro.getImageInfo({
+      src: "https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/6.jpg",
+    }).then((res: any) => {
+      const { width, height, path } = res;
+      this.setState({
+        Cwidth: width * this.#systemInfo.pixelRatio,
+        Cheight: height * this.#systemInfo.pixelRatio,
+      });
+      Taro.nextTick(() => {
+        ctx.drawImage(
+          path,
+          0,
+          0,
+          width * this.#systemInfo.pixelRatio,
+          height * this.#systemInfo.pixelRatio
+        );
+        //   ctx.setFillStyle("black");
+        //   ctx.setFontSize(36);
+
+        //   ctx.fillText("李勇利", 80, 80);
+        ctx.draw(false, () => {
+          Taro.canvasToTempFilePath({
+            canvasId: "myCanvas",
+            quality: 0.8,
+            success: (res: any) => {
+              Taro.previewImage({
+                urls: [res.tempFilePath],
+              });
+            },
+          });
+        });
+      });
+    });
+  };
+
   render() {
     // const {  } = this.props;
     return (
       <View className="Us">
+        <Canvas
+          id="myCanvas"
+          canvas-id="myCanvas"
+          style={`width: ${this.state.Cwidth}px;height: ${this.state.Cheight}px;`}
+        ></Canvas>
         <Button
           className="user"
           open-type="chooseAvatar"
@@ -80,8 +133,9 @@ class Us extends React.Component<any, any> {
         </Button>
 
         <Image
-          style={`width: ${this.#systemInfo.screenWidth}px;height: ${this.state.height
-            }px;`}
+          style={`width: ${this.#systemInfo.screenWidth}px;height: ${
+            this.state.height
+          }px;`}
           src="https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/us-top.png"
           onLoad={this.getImageSize}
         />
@@ -107,7 +161,7 @@ class Us extends React.Component<any, any> {
             </View>
           )}
           {this.state.userPhone && (
-            <View className="us_cell">
+            <View className="us_cell" onClick={this.createImge}>
               <View className="left">
                 <Image src={certificate} className="img"></Image>
                 <Text className="text">证书下载</Text>
@@ -130,8 +184,9 @@ class Us extends React.Component<any, any> {
           )}
         </InputBox>
         <Image
-          style={`width: ${this.#systemInfo.screenWidth * 0.92}px;height: ${this.state.heightKf
-            }px;display: block;margin: 0 auto`}
+          style={`width: ${this.#systemInfo.screenWidth * 0.92}px;height: ${
+            this.state.heightKf
+          }px;display: block;margin: 0 auto`}
           showMenuByLongpress={true}
           src="https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/us-kf.png"
           onLoad={this.getImageKf}