没有十年脑血栓做不出来这种跨平台设计

<template>  
    <view>  
        <image ref="logo" class="logo" src="/static/logo.png"></image>  
        <text>{{cxtInfo}}</text>  
        <text>{{text}}</text>  
     <view class="center">  
        <canvas id="canvas" class="center" style="width: 200px;height: 200px;border: 1px solid red;" ></canvas>  
     </view>  
         <button @click="draw()">测试</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                cxt : null as CanvasRenderingContext2D | null,  
                cxtInfo:{},  
                text:"",  
                title: 'Hello'  
            }  
        },  
        onReady() {  
             console.info("onReady")  
             uni.createCanvasContextAsync({  
              id: 'canvas',  
              component: getCurrentInstance()?.proxy,  
              success: (context : CanvasContext) => {  
                const canvasContext = context.getContext('2d')!;  
                const canvas = canvasContext.canvas;  
                let {offsetWidth,offsetHeight} = canvas;  

                // 处理高清屏逻辑  
                const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;  
                this.cxtInfo = {offsetWidth,offsetHeight,dpr}  
                canvas.width = canvas.offsetWidth * dpr;  
                canvas.height = canvas.offsetHeight * dpr;  
                canvasContext.scale(dpr, dpr); // 仅需调用一次，当调用 reset 方法后需要再次 scale  
                this.cxt= canvasContext;  
              }  
            })  
        },  
        onLoad() {  
            console.info("onLoad")  
        },  
        methods: {  
            draw(){  
                const cxt =this.cxt!;  
                cxt.beginPath();  
                cxt.lineWidth = 2;  
                cxt.arc(75, 75, 50, 0, Math.PI * 2, true);  
                cxt.stroke();  

                let img=this.$refs["logo"] as UniImageElement;  
                if(img==null){  
                     return;  
                }  

                console.info ("img ",img);  
                console.info ("img.attributes ",img.attributes);  
                console.info ("img.src ",img.src);  
                let attrs= img.attributes ;  
             console.info ("attrs.size ",attrs.size);  

                // #ifdef  WEB  
                for(let i=0;i< attrs.length ; i++){  
                     let attr = attrs[i];   
                    console.info ("img.attributes."+attr["name"],"=", attr["value"] );  
                }  
                // #endif  
                // #ifdef APP  
                  attrs.forEach((v,k)=>{  //web平台没有  
                     console.info ("img.attributes."+k,v);  
                   })  
                // #endif  

                console.info ("img type",typeof img);  
                console.info (img instanceof Image);  
                let lc= img.lastChild;  
                console.info ("lastChild is not null ",lc!=null);  

                let bcr=img.getBoundingClientRect();  
                console.info ("BoundingClientRect ",bcr);  
                if(img instanceof Image){//安卓   
                    this.text="Image"  
                    cxt.drawImage(img,50,50);  
                }else if(lc!=null && lc instanceof Image){//Web  
                    this.text="Image.lastChild"  
                    cxt.drawImage(lc,100,100);  
                }else{//IOS  
                    this.text="new Image"  
                    let image = new Image(bcr.width, bcr.height)  
                    image.onload=(  )=>{  
                        console.info("image onload ",typeof image)  
                        cxt.drawImage(image,0,0,100,100);  
                    }  
                    image.src = img.attributes.get("src") as string;  
                }  

            }  
        }  
    }  
</script>  

<style>  
    .logo {  
        height: 100px;  
        width: 100px;  
        margin: 100px auto 25px auto;  

    }  

    .title {  
        font-size: 18px;  
        color: #8f8f94;  
    text-align: center;  
    }  
    .center {  
        height: 100%;  
        flex: auto;  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
    }  
</style>

UniElement Extends UniElement  // {src:string ,....}  
Image  Extends UniElement    // {src : string }  

CanvasRenderingContext2D   
drawImage(imageResource: Image, sx: number, sy: number): void

Image 标签(UniElement )竟然和 Image 对象毫无关系
元素属性 attributes 对象 Map<string, any> 竟然无一方式可以跨平台遍历
且Image标签的src属性在不同平台所在位置还不一样
且对于 attributes ["src"],attributes .get("src") 两张写法竟然还不等价
lc instanceof Image 如何不在前面排除null 竟然会报错null is not an object (evaluating 'Object.getPrototypeOf(e)') 而不是直接返回false

二进制是每种语言基础中的基础文件读取 encoding 还给限制死了只能是 base64 utf-8 然后文档还一边说可以不写这操作就很魔幻