From 1e7f5ca10aaaa06d38b25915ff28849b98c7ca6a Mon Sep 17 00:00:00 2001
From: jixinbao <jixinbao@dcloud.io>
Date: Tue, 6 Aug 2024 15:50:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=20canvas=20createIma?=
 =?UTF-8?q?ge=20=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/canvas/canvas.test.js | 12 +++++++++---
 pages/component/canvas/canvas.uvue    | 27 +++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/pages/component/canvas/canvas.test.js b/pages/component/canvas/canvas.test.js
index 890fb836..6b06cef9 100644
--- a/pages/component/canvas/canvas.test.js
+++ b/pages/component/canvas/canvas.test.js
@@ -30,13 +30,19 @@ describe('Canvas.uvue', () => {
 
   })
   it("测试同步创建canvas上下文", async () => {
-   await page.callMethod('useAsync');
-   const element = await page.$('#testCanvasContext')
-   expect(await element.text()).toBe('true')
+    await page.callMethod('useAsync');
+    const element = await page.$('#testCanvasContext')
+    expect(await element.text()).toBe('true')
   })
   it('测试 canvasToDataURL', async () => {
     await page.callMethod('canvasToDataURL');
     const element = await page.$('#testToDataURLResult')
     expect(await element.text()).toBe('true')
   })
+  it('测试 createImage', async () => {
+    await page.callMethod('drawImageAPI');
+    await page.waitFor(500) // 加载图片
+    const element = await page.$('#testCreateImage')
+    expect(await element.text()).toBe('true')
+  })
 })
diff --git a/pages/component/canvas/canvas.uvue b/pages/component/canvas/canvas.uvue
index 5a889a86..b6703567 100644
--- a/pages/component/canvas/canvas.uvue
+++ b/pages/component/canvas/canvas.uvue
@@ -16,6 +16,12 @@
         <text>测试 ToDataURL 结果：</text>
         <text id="testToDataURLResult">{{testToDataURLResult}}</text>
       </view>
+
+      <view class="text-group">
+        <text>测试 createImage 结果：</text>
+        <text id="testCreateImage">{{testCreateImage}}</text>
+      </view>
+
       <!-- #ifdef WEB -->
       <button class="canvas-drawing-button" @click="canvasToBlob">canvasToBlob</button>
       <view>
@@ -27,6 +33,7 @@
         <text>canvasToDataURL:</text>
         <text>{{dataBase64.slice(0,22)}}...</text>
       </view>
+      <button @click="drawImageAPI">drawImage</button>
       <view style="padding: 8px 10px;">CanvasContext API 演示</view>
       <view class="grid-view">
         <view class="grid-item" v-for="(name, index) in names" :key="index">
@@ -70,6 +77,7 @@
         image: null as Image | null,
         // 仅测试
         testCreateCanvasContextAsyncSuccess: false,
+        testCreateImage: false
       }
     },
     onReady() {
@@ -86,6 +94,25 @@
       canvasToDataURL() {
         this.dataBase64 = this.canvas!.toDataURL()
       },
+      drawImageAPI() {
+        uni.createCanvasContextAsync({
+          id: 'canvas',
+          success: (res : CanvasContext) => {
+            this.context = res.getContext('2d');
+            this.clearCanvasRect()
+            // hidpi(this.context.canvas);
+            let image = res.createImage();
+            image.src = "../../static/logo.png"
+            image.onload = () => {
+              this.testCreateImage = true
+              this.context?.drawImage(image, 0, 0, 100, 100);
+            }
+          },
+          fail: (err : UniError) => {
+            console.log(err);
+          }
+        } as CreateCanvasContextAsyncOptions)
+      },
       useAsync() {
 
         // HBuilderX 4.25+
-- 
GitLab