Merge pull request #444 from xiaoyan428820/release-3.6.8-app

fix: 修改drawImage方法无法使用getImageInfo获取的path作为入参的问题
handsomeliuyang · Nov 24, 2023 · 1c6ed96 · 1c6ed96
2 parents c9e8076 + 26ae8ab
commit 1c6ed96
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 9 deletions.
diff --git a/examples/mini-program-example/src/pages/api/canvas/index.tsx b/examples/mini-program-example/src/pages/api/canvas/index.tsx
@@ -328,16 +328,67 @@ export default class Index extends React.Component {
           dWidth: 150,
           dHeight: 100,
         },
-        func: (apiIndex, data) => {
-          this.initCanvas(apiIndex, async () => {
-            context.beginPath()
-            context.drawImage(
-              'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
-              ...Object.values(data)
-            )
-            await context.draw()
-            TestConsole.consoleNormal('CanvasContext-drawImage success ', context)
+        func: async (apiIndex, data) => {
+          Taro.chooseImage({
+            success: (res) => {
+              Taro.getImageInfo({
+                src: res.tempFilePaths[0],
+                success: (res) => {
+                  this.initCanvas(apiIndex, async () => {
+                    context.beginPath()
+                    context.drawImage(
+                      res.path,
+                      ...Object.values(data)
+                    )
+                    await context.draw()
+                    TestConsole.consoleNormal('CanvasContext-drawImage success ', context)
+                  })
+                },
+                fail: (res) => {
+                  TestConsole.consoleNormal('getImageInfo fail', res)
+                },
+                complete: (res) => {
+                  TestConsole.consoleNormal('getImageInfo complete', res)
+                },
+              })
+            },
+            fail: (err) => {
+              TestConsole.consoleNormal('chooseImage fail:', err)
+            },
+            complete: (com) => {
+              TestConsole.consoleNormal('chooseImage complete', com)
+            },
           })
+          /**
+           * 通过downloadFile形式获取的路径的方式样例
+           * Taro.downloadFile({
+           *   url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
+           *   success: (res) => {
+           *     TestConsole.consoleNormal('downloadFile path:', res.tempFilePath)
+           *     this.initCanvas(apiIndex, async () => {
+           *       context.beginPath()
+           *       context.drawImage(
+           *         res.tempFilePath,
+           *         ...Object.values(data)
+           *       )
+           *       await context.draw()
+           *       TestConsole.consoleNormal('CanvasContext-drawImage success ', context)
+           *     })
+           *   }
+           * })
+           *
+           * 直接传入网络路径的方式样例
+           * this.initCanvas(apiIndex, async () => {
+           *   context.beginPath()
+           *   context.drawImage(
+           *     'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
+           *     imageResource,
+           *     ...Object.values(data)
+           *   )
+           *   await context.draw()
+           *   TestConsole.consoleNormal('CanvasContext-drawImage success ', context)
+           * })
+          */
         },
       },
       {

diff --git a/packages/taro-mpharmony/src/api/canvas/CanvasContext.ts b/packages/taro-mpharmony/src/api/canvas/CanvasContext.ts
@@ -316,6 +316,11 @@ export class CanvasContext implements Taro.CanvasContext {
   }
 
   drawImage (imageResource: string, ...extra: any[]): void {
+    // 如果是本地file://开头的文件路径，需要先转换为internal://开头的沙箱路径
+    if (imageResource.startsWith('file://')) {
+      // @ts-ignore
+      imageResource = native.copyFileToSandboxCache(imageResource).internalCachePath
+    }
     type TExtra = [number, number]
     this.enqueueActions(() => {
       // 需要转换为 Image