【报Bug】Uniappx Canvas的drawImage 本地文件uri不显示file:///开头

示例代码：

<template>  
    <view class="container">  
        <view style="display: flex;flex-direction: row;justify-content: space-around;">  
            <view @click="onClick('clear')">清空</view>  
            <view @click="onClick('undo')">撤消</view>  
            <view @click="onClick('save')">保存</view>  
        </view>  
        <view style="width: 750rpx ;height: 750rpx;">  
            <canvas id="myCanvas" @touchstart="startDrawing" @touchmove="draw" @touchend="endDrawing"  
                style="width: 100%; height: 100%;"></canvas>      
        </view>  
        <view style="flex-direction: row;height: 300upx;">  
            <scroll-view style="background-color: aliceblue; flex-direction: row;flex:5" direction="horizontal"  
                id="scrollViewImgList">  
                <view v-for="(item,index) in imgList" @click="clickItem(item,index)">  
                    <image :src="item" style="width: 100rpx;" mode="widthFix" />  
                </view>  
            </scroll-view>  
            <view style="flex:1;justify-content: center;align-items: center;height: 300upx;">  
                新增  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    import * as MCanvas from "@/uni_modules/czm-canvas"  
    type MImageData={  
        path:string,  
        imageData:ImageData  
    }  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                penColor: 'red',  
                canvasWidth: 0,  
                canvasHeight: 0,  
                penSize: 5,  
                url: '',  
                lastX: 0,  
                lastY: 0,  
                isDrawing: false,  
                openSmooth: true,  
                offsetTop: 0,  
                offsetLeft: 0,  
                canvas: null as UniCanvasElement | null,  
                canvasContext: null as CanvasContext | null,  
                ctx: null as CanvasRenderingContext2D | null,  
                imageSrc: 'file:///storage/emulated/0/Android/data/io.dcloud.uniappx/cache/uni-snapshot/1733203538080.png',  
                imgList: [] as Array<String>,  
                mImageList:[] as Array<MImageData>,  
                dpr:1  
            }  
        },  
        onLoad() {  
            uni.createCanvasContextAsync({  
                id: 'myCanvas',  
                component: this,  
                success: (context : CanvasContext) => {  
                    this.canvasContext = context;  
                    this.ctx = context.getContext('2d')!;  
                    this.canvas = this.ctx!.canvas;  
                    this.canvasWidth = this.canvas!.height;  
                    this.canvasHeight = this.canvas!.width;  
                    this.offsetTop = this.canvas!.offsetTop;  
                    this.offsetLeft = this.canvas!.offsetLeft;  
                    console.log("canvas success");  
                    // 处理高清屏 scale防止canvas获取的像素位置不对  
                    this.dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;  
                    console.log("dpr", this.dpr)  
                    this.canvas!.width = this.canvas!.offsetWidth * this.dpr;  
                    this.canvas!.height = this.canvas!.offsetHeight * this.dpr;  
                    this.ctx!.scale(this.dpr, this.dpr); // 仅需调用一次，当调用 reset 方法后需要再次 scale  
                },  
                fail(error : UniError) {  
                    console.log("create error", error.errMsg)  
                }  

            })  

        },  
        onReady() {  
        },  
        methods: {  
            clickItem(item:string,index:number){  
                this.clearCanvas();  
                //显示图片  
                console.log("item",item);  
                // console.log("imageData",this.mImageList[index].imageData);  
                // this.ctx!.putImageData(this.mImageList[index].imageData,0,0);  
                // let retstr=MCanvas.drawFileImg(item);  
                // console.log("retstr",retstr);  
                // MCanvas.getType(this.mImageList[index].imageData);  
                let width= 300;  
                let height=300;  
                console.log("this.canvasWidth,this.canvasHeight",this.canvasWidth+"---"+this.canvasHeight)  
                const image=new Image(width,height);  
                image.src="file://"+item;  
                image.setAttribute("mode","widthFix");  
                image.onload = () => {  
                  this.ctx!.drawImage(image,0,0,width,height);  
                }  
            },  
            //3个按钮点击处理  
            onClick(type : string) {  
                if (type == 'undo') {  

                }  
                if (type == 'save') {  
                    this.saveEleToFile()  
                }  
                if (type == 'clear') {  
                    this.clearCanvas()  
                }  
            },  
            saveEleToFile() {  
                this.canvas!.takeSnapshot({  
                    success: function (res) {  
                        // 打印截图文件临时路径  
                        console.log(res.tempFilePath)  
                        this.imageSrc = res.tempFilePath  
                        this.imgList.push(this.imageSrc);  
                        const imageData=this.ctx?.getImageData(0,0,this.canvasWidth,this.canvasHeight) as ImageData  
                        // console.log("imageData",imageData.data.buffer)  
                        const imageItem={path:this.imageSrc,imageData} as MImageData ;  
                        this.mImageList.push(imageItem);  
                        uni.getElementById("scrollViewImgList") as UniElement;  
                    },  
                    fail: function (res) {  
                        console.log(res)  
                        uni.showToast({  
                            icon: 'error',  
                            title: '截图失败'  
                        })  
                    }  
                } as TakeSnapshotOptions)  

            },  

            clearCanvas(){  
                this.ctx?.clearRect(0, 0, this.canvasWidth, this.canvasHeight)  
            },  
            //开始touch  
            startDrawing(e : UniTouchEvent) {  
                this.isDrawing = true;  
                const touchEvent = e.touches[0];  
                this.lastX = touchEvent.clientX - this.offsetLeft;  
                this.lastY = touchEvent.clientY - this.offsetTop;  
                this.ctx!.beginPath();  
            },  
            //touchmove  
            draw(e : UniTouchEvent) {  
                if (!this.isDrawing) return;  
                const touchEvent = e.touches[0];  
                const endx = touchEvent.clientX - this.offsetLeft;  
                const endy = touchEvent.clientY - this.offsetTop;  
                this.ctx?.moveTo(this.lastX, this.lastY)  
                this.ctx!.lineTo(endx, endy);  
                // console.log("endx", endx + ":" + endy)  
                this.ctx!.stroke();  
                this.lastX = endx;  
                this.lastY = endy;  
            },  
            //touchend  
            endDrawing() {  
                this.isDrawing = false;  
            }  
        }  
    }  
</script>  

<style>  

</style>

操作步骤：

uniappx项目 如果吧image.src="file://"+item; 这个改成网络图片可以显示 本地图片不能显示

预期结果：

需要本地图片也能显示并支持mode属性

实际结果：

本地图片不能显示