JavaScript图片数据转换

JavaScript图片数据转换

以下代码使用TypeScript书写，小幅度修改即可JavaScript使用

图片转换成Blob

Blob

    public saveToBlob(imgDom:HTMLImageElement):Blob{
        let canvas:HTMLCanvasElement = document.createElement('canvas');
        canvas.setAttribute('origin-clean','false');
        canvas.width = this.img.width;
        canvas.height = this.img.height;

        let context = canvas.getContext('2d');
        (context as any).filter = window.getComputedStyle(imgDom).filter;

        context.drawImage(imgDom, 0, 0, canvas.width, canvas.height);

        let aryURL = canvas.toDataURL("image/jpeg").split(",");
        let mine = aryURL[0].match(/:(.*?);/)[1];
        let  dataUrl = new Blob([toByteArray(aryURL[1])], {type: mine});

        return dataUrl;
    }

图片转换成Base64

Promise

    //压缩图片（使用了Promise）
    public static compress(img:HTMLImageElement, width, height, ratio = 0.95):Promise<any> {
        return new Promise((resolve, reject) => {
            let canvas, ctx, img64;

            canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);
    
            img64 = canvas.toDataURL("image/jpeg", ratio);
            resolve(img64);
        });
    }

base64转换成Buffer(Nodejs的api，ES6已添加）

Buffer

    public static base64ToBuffer(value:string):Buffer{
        let url = value.replace(/^data:image\/\w+;base64,/, "");
        let buffer = new Buffer(url, 'base64');
        return buffer;
    }