diff --git a/examples/mini-program-example/src/pages/api/canvas/index.tsx b/examples/mini-program-example/src/pages/api/canvas/index.tsx index 19ddf5b141da..6d22cd927d02 100644 --- 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 index b1e41d82cbbe..a553d3d87e71 100644 --- 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