js 显示base64编码的二进制流网页图片

这里是JS显示base64编码的二进制流网页图片的完整攻略。

什么是Base64

Base64是一种基于64个字符的编码方式，通常用于在网络上传输二进制数据。Base64编码可以将任意二进制数据用文本表示，不但方便传输，而且可以避免一些特殊字符在传输过程中被转义。

显示Base64编码的图片

有时候我们需要用JS在网页中显示一张Base64编码的图片，可以通过以下步骤实现：

1. 获取Base64编码

首先，我们需要获取要显示的图片的Base64编码。可以通过以下代码将本地图片转换成Base64编码：

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var img = new Image();
img.src = "sample.png";
img.onload = function() {
    var base64 = getBase64Image(img);
    // base64即为获取到的Base64编码
}

其中，getBase64Image函数接受一个img对象，返回该对象所对应的Base64编码。

2. 显示图片

获取到Base64编码之后，我们可以通过以下方式在网页中显示图片：

<img src="data:image/png;base64,Base64编码" />

其中，data:image/png;base64,表示图片的MIME类型和Base64编码的前缀。需要注意的是，不同的图片类型可能需要使用不同的MIME类型。

下面是两个示例，演示如何将Base64编码的图片展示在网页中：

示例一

在网页中显示第一张图片：

var base64 = "/9j/4AAQSkZJRgABAgEASABIAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAH2QADABsAFQAkAB9hY3Nw..." // 假设这是获取到的Base64编码

var img = new Image();
img.src = "data:image/jpeg;base64," + base64;
document.body.appendChild(img);

示例二

在网页中显示第二张图片：

var base64 = "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0..." // 假设这是获取到的Base64编码

var img = document.createElement("img");
img.src = 'data:image/gif;base64,' + base64;
img.style.width = '100px';
document.body.appendChild(img);

以上步骤便是在网页中显示Base64编码的图片的完整攻略。