📜  将 base64 转换为图像 javascript (1)

📅  最后修改于: 2023-12-03 15:25:13.132000             🧑  作者: Mango

将 base64 转换为图像 Javascript

在网页开发中,经常需要将base64编码转换为图像进行展示,JavaScript提供了很方便的操作方法。以下是一个简单的JavaScript函数,可以将base64字符串转换为图片:

function base64ToImage(base64, name) {
    var img = new Image();
    img.src = base64;
    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = this.width;
        canvas.height = this.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
        var a = document.createElement('a');
        var event = new MouseEvent('click');
        a.download = name;
        a.href = canvas.toDataURL('image/png');
        a.dispatchEvent(event);
    }
}

该函数接收两个参数,第一个参数是base64字符串,第二个参数是保存的文件名。函数内部创建了一个图片对象,并在加载完毕后创建一个canvas元素并将图片绘制到canvas上面。最后将生成的图片保存为下载链接。

使用示例:

var base64Str = "data:image/png;base64,iVBORw0K........"; // base64字符串
var fileName = "image.png";  // 保存的文件名
base64ToImage(base64Str, fileName);

通过调用base64ToImage函数可以将base64字符串转换为图片并直接下载到本地。

可以看到,JavaScript非常方便地提供了转换base64字符串为图像的方法,为网页的开发提供了便利。