如何显示长度超过2048的图片,并获取base64码

要做一个人脸融合功能,其中一张图片是玩家从手机相册中选取,但现在大多手机拍的照片宽度都超过2048了,显示不了,也转不了base64码,怎么处理这种情况?

注: 获取图片路径后,用这种方法转的base64
dataUrl(url, listener){

    let image = new Image();

    image.src = url;

    image.onload = ()=>{

        let canvas = document.createElement("canvas");

        let ctx = canvas.getContext("2d");

        canvas.width = image.width;

        canvas.height = image.height;

        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

        let base64Str = canvas.toDataURL("image/png");

        if(listener){

            listener(base64Str);

        }

    }

},

你这从方案上就直接走偏了,还搞球球. 自己不计算一下2048x2048图片转bs后会消耗多少内存?

实现就行,内存不在乎,哎,就是玩【狗头保命】

那遇到超大的图片怎么处理

等比缩小canvas到2048?

let {width: w, height: h} = image;
let ratio = Math.min(1, 2048 / w, 2048 / h);
canvas.width = Math.floor(w * ratio);
canvas.height = Math.floor(h * ratio);

遇到大图片 直接Image就加载不成功了 image.onload都进不去

那就只能加载rawdata自己解析图片了

能提供个相关知识点链接或者示例吗?没玩过这个,不太懂

类似于这个:
https://github.com/arian/pngjs