feat：canvas水印

components.d.ts

@@ -8,6 +8,8 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     NutButton: typeof import('@nutui/nutui-taro')['Button']
-    NutToast: typeof import('@nutui/nutui-taro')['Toast']
+    NutCell: typeof import('@nutui/nutui-taro')['Cell']
+    NutEmpty: typeof import('@nutui/nutui-taro')['Empty']
+    NutInput: typeof import('@nutui/nutui-taro')['Input']
   }
 }

src/app.config.ts

@@ -1,5 +1,6 @@
 export default defineAppConfig({
   pages: [
+    'pages/canvs/index',
     'pages/index/index',
     'pages/login/index'
   ],

src/pages/canvs/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: 'Canvs'
+})

src/pages/canvs/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <view class="index">
+    <nut-button type='warning' size="large" shape="square" @click="chooseImg">选择图片</nut-button>
+    <nut-button type='success' size="large" shape="square" @click="generateImg">导出图片图片</nut-button>
+
+    <nut-cell><canvas type="2d" id="watermarkCanvas" canvas-id="watermarkCanvas" /></nut-cell>
+  </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+export default {
+  name: 'Index',
+  setup() {
+    let canvas = null;
+    let canvasContext = null;
+    let canvasWidth = 0;
+    let canvasHeight = 0;
+    let ratio = 1;
+    let imageHeight = 0;
+    let imageWidth = 0;
+
+    const init = () => {
+      Taro.createSelectorQuery().select('#watermarkCanvas')
+        .fields({ node: true, size: true })
+        .exec(res => {
+          // Canvas 对象
+          canvas = res[0].node;
+          // 渲染上下文
+          canvasContext = canvas.getContext('2d');
+
+          // Canvas 画布的实际绘制宽高
+          canvasWidth = res[0].width;
+          canvasHeight = res[0].height;
+
+          // 初始化画布大小
+          Taro.getSystemInfo({
+            success(res) {
+              ratio = res.pixelRatio;
+            }
+          });
+          canvas.width = canvasWidth * ratio;
+          canvas.height = canvasHeight * ratio;
+          canvasContext.scale(ratio, ratio);
+        });
+    };
+
+    const chooseImg = function () {
+      Taro.chooseImage({
+        success(res) {
+          let tempFilePaths = res.tempFilePaths;
+          if (!tempFilePaths || tempFilePaths.length == 0) {
+            console.debug("异常");
+            return;
+          }
+
+          // 图片对象
+          const image = canvas.createImage();
+          // 图片加载完成回调
+          image.onload = ret => {
+            // 将图片绘制到 canvas 上
+
+            canvasContext.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+            imageWidth = image.width;
+            imageHeight = image.height;
+
+            canvasContext.fillStyle = "blue";
+            canvasContext.textBaseline = 'middle';
+            canvasContext.textAlign = 'center';
+            canvasContext.fillText('Hello World', 20, 20)
+          }
+          // 设置图片src
+          image.src = tempFilePaths[0];
+        }
+      })
+    };
+
+    // TODO 文字设置
+    // TODO 导出文件清晰度不对
+
+    const generateImg = () => {
+      Taro.canvasToTempFilePath({
+        canvas: canvas,
+        x: 0,
+        y: 0,
+        destHeight: imageHeight,
+        destWidth: imageWidth,
+        success: function (res) {
+          Taro.saveImageToPhotosAlbum({
+            filePath: res.tempFilePath,
+            success: function (ret) { }
+          })
+        }
+      })
+    };
+
+    init();
+
+    return {
+      chooseImg,
+      generateImg
+    };
+  }
+}
+</script>
+
+<style lang="scss">
+.index {
+  width: 100%;
+  height: 100%;
+  // background-color: antiquewhite;
+}
+</style>