html5 js 获取图片颜色平均值

图片必须服务器设置跨域，项目是vue3的，本地启动可用

<template>
    <div>
        <h3>获取图片颜色平均值</h3>
        <!-- <button @click="getImgAverageColor">测试</button> -->
        <!-- <canvas id="drawcanvas" style="background-color: red;"></canvas> -->
        <div id="testBgBox">我是测试盒子，图片必须可跨域</div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
onMounted(()=>{
    let imgUrl='https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' //测试图片
    // let imgUrl='https://material.yxy91.com/avatar/169146562862348e5e8470fca30c0d50deac509a8430e.jpg' //测试图片
    // let imgUrl='https://images.tusiassets.com/workspace/imagetoimage/603722589067595268/d71a609695de77d6539f4567689e75d9.jpeg' //测试图片
    // let imgUrl='https://images.pexels.com/photos/18250553/pexels-photo-18250553.jpeg' //测试图片
    // let imgUrl='https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEJgbdZGGqs7ynVmiasIPXAA7MUZzE3prGR45youTgPRuPjneOznGwctqyxhrcWuBDgSj8BUvDAwPgQ/132' //测试图片
    // let imgUrl='https://images.pexels.com/photos/1557183/pexels-photo-1557183.jpeg' //测试图片
    // getImgAverageColor(imgUrl)
    getImgAverageColor(imgUrl)
})
const getImgAverageColor=(imgUrl)=>{
    // let drawcanvas=document.getElementById('drawcanvas')
    return new Promise((resolve,reject)=>{
        let drawcanvas=document.createElement('canvas')
        let clipCtx = drawcanvas.getContext("2d");
        let clipImg = document.createElement("img");
        clipImg.crossOrigin = "anonymous";
        clipImg.src = imgUrl
        clipImg.onerror= ()=>{
            reject('图片onerror')
        }
        clipImg.onload=()=>{
            let imgW=clipImg.width
            let imgH=clipImg.height
            if(imgW>=500 && imgH>=500){
                imgW=imgW/100
                imgH=imgH/100
            }
            drawcanvas.width=imgW
            drawcanvas.height=imgH
            clipCtx.drawImage(clipImg,0,0,imgW,imgH)
            // return
            let data = clipCtx.getImageData(0,0,imgW,imgH).data;
            var r = 0;
            var g = 0;
            var b = 0;
            var a = 0;
            var fxs = imgW * imgH;
            //获取所有的rgba的和
            for(var i = 0;i<data.length/4;i++) {
                r += data[i * 4];
                g += data[i * 4 + 1];
                b += data[i * 4 + 2];
                a += data[i * 4 + 3];
            }
            //获得平均值
            var rgba = 'rgba('+ parseInt(r/fxs) +','+ parseInt(g/fxs) +','+ parseInt(b/fxs) +','+ parseInt(a/fxs) +')';
            // console.log('data:',data)
            console.log('rgba:',rgba)
            document.getElementById('testBgBox').style.backgroundColor = rgba;
            resolve(rgba)
        }
    })
}
</script>