提交

src/pages/us/canvas.tsx

@@ -1,48 +0,0 @@
-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.scss

@@ -1,13 +1,14 @@
 @import "..\\..\\app-let.scss";
 
 .Us {
-  width: 100%;
+  width: 750px;
+  overflow-x: hidden;
   box-sizing: border-box;
   position: relative;
 
   #myCanvas {
     position: absolute;
-    z-index: -1;
+    left: 150%;
   }
 
   .login {

src/pages/us/index.tsx

@@ -77,38 +77,45 @@ class Us extends React.Component<any, any> {
   };
 
   createImge = () => {
+    Taro.showLoading({
+      title: "下载中。。。"
+    });
     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;
+      const h = Number(((this.#systemInfo.windowWidth / width) * height).toFixed(2));
+      const rWidth = this.#systemInfo.windowWidth * this.#systemInfo.pixelRatio;
+      const rHeight = h * this.#systemInfo.pixelRatio;
       this.setState({
-        Cwidth: width * this.#systemInfo.pixelRatio,
-        Cheight: height * this.#systemInfo.pixelRatio,
+        Cwidth: rWidth,
+        Cheight: rHeight
       });
       Taro.nextTick(() => {
         ctx.drawImage(
           path,
           0,
           0,
-          width * this.#systemInfo.pixelRatio,
-          height * this.#systemInfo.pixelRatio
+          rWidth,
+          rHeight
         );
-        //   ctx.setFillStyle("black");
-        //   ctx.setFontSize(36);
-
-        //   ctx.fillText("李勇利", 80, 80);
+        ctx.setFillStyle("#91725D");
+        ctx.setFontSize(rWidth/20);
+        ctx.fillText("李勇利", rWidth*0.33, rHeight*0.4);
         ctx.draw(false, () => {
           Taro.canvasToTempFilePath({
             canvasId: "myCanvas",
             quality: 0.8,
             success: (res: any) => {
+              Taro.hideLoading();
+              Taro.showToast({title: "下载成功"})
               Taro.previewImage({
                 urls: [res.tempFilePath],
               });
             },
+
           });
         });
       });
@@ -133,9 +140,8 @@ 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}
         />
@@ -184,9 +190,8 @@ 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}