前端怎么把base64转图片

你可以使用JavaScript中的DataURL和Canvas API将base64编码转换成图片。例如，使用以下代码可以将base64字符串转换为图像：

var img = new Image(); 
img.src = 'data:image/png;base64,iVBORw0KG...'; // base64字符串
document.body.appendChild(img);

另外，你也可以使用HTML5中的`<canvas>`元素和`toDataURL()`方法将图像保存为base64编码。以下是示例代码：

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);
    var base64String = canvas.toDataURL();
    console.log(base64String);
};

img.src = 'data:image/png;base64,iVBORw0KG...'; // base64字符串

相关问题

前端 base64转图片

可以使用以下代码将 base64 转换为图片：

function base64ToImage(base64String, filename) {
  var img = new Image();
  img.src = base64String;
  img.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL('image/png');
    var a = document.createElement('a');
    a.href = dataURL;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
}

使用方法：

var base64String = 'your base64 string';
var filename = 'your filename';
base64ToImage(base64String, filename);

其中，`base64String` 是要转换的 base64 字符串，`filename` 是要保存的文件名。该方法会将图片下载到本地。

前端base64转图片

前端可以通过使用JavaScript将Base64编码的图像数据转换为图片。以下是一个简单的示例代码：

// Base64编码的图像数据
var base64Data = "data:image/png;base64,iVBORw0KG...";

// 创建一个新的Image对象
var img = new Image();

// 设置Image对象的src为Base64编码的图像数据
img.src = base64Data;

// 等待图像加载完成后执行回调函数
img.onload = function() {
  // 在DOM中添加图像元素
  document.body.appendChild(img);
};

这段代码将Base64编码的图像数据赋值给一个新创建的Image对象的src属性，然后等待图像加载完成后将图像元素添加到DOM中。你可以根据需要修改代码来适应你的项目。