DataURL, Blob, File, Image之间的关系与转换

最新推荐文章于 2024-10-15 14:41:55 发布

_miccretti

最新推荐文章于 2024-10-15 14:41:55 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/xmqywx/blog/2239907

本文详细介绍了一系列图片处理方法，包括使用canvas进行图片压缩，将图片转换为base64编码，以及从base64编码还原为图片。这些技术在移动端应用中特别有用，可以解决图片过大导致的上传问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

使用前景：

移动端上传拍照图片太大，使用canvas压缩后base64=>blob二进制表单文件=>ajax-POST上传

// canvas转dataURL：canvas对象、转换格式、图像品质
function canvasToDataURL(canvas, format, quality) {
    return canvas.toDataURL(format||'image/jpeg', quality||1.0);
}

// DataURL转canvas
function dataURLToCanvas(dataurl, cb){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function(){
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        cb(canvas);
    };
    img.src = dataurl;
}

// image转canvas：图片地址
function imageToCanvas(src, cb){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = src;
    img.onload = function (){
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        cb(canvas);
    };
}

    // canvas转image
    function canvasToImage(canvas){
        var img = new Image();
        img.src = canvas.toDataURL('image/jpeg', 1.0);
        return img;
    }

    // File/Blob对象转DataURL
    function fileOrBlobToDataURL(obj, cb){
        var a = new FileReader();
        a.readAsDataURL(obj);
        a.onload = function (e){
            cb(e.target.result);
        };
    }

    // DataURL转Blob对象
    function dataURLToBlob(dataurl){
        var arr = dataurl.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
    }

    // Blob转image
    function blobToImage(blob, cb){
        fileOrBlobToDataURL(blob, function (dataurl){
        var img = new Image();
            img.src = dataurl;
            cb(img);
        });
    }

    // image转Blob
    function imageToBlob(src, cb){
        imageToCanvas(src, function (canvas){
            cb(dataURLToBlob(canvasToDataURL(canvas)));
        });
    }

    // Blob转canvas
    function BlobToCanvas(blob, cb){
        fileOrBlobToDataURL(blob, function (dataurl){
            dataURLToCanvas(dataurl, cb);
        });
    }

// canvas转Blob
function canvasToBlob(canvas, cb){
	cb(dataURLToBlob(canvasToDataURL(canvas)));
}

// image转dataURL 
function imageToDataURL(src, cb){
	imageToCanvas(src, function (canvas){
		cb(canvasToDataURL(canvas));
	});
}

// dataURL转image，这个不需要转，直接给了src就能用 
function dataURLToImage(dataurl){
	var img = new Image();
	img.src = d;
	return img;
}

转载于:https://my.oschina.net/xmqywx/blog/2239907