js base64 转png

在JavaScript中，可以使用Base64编码将图片转换为字符串，然后将其转换回PNG格式的图片。下面是一种常见的方法：

1. 首先，将PNG图片加载到JavaScript中。可以使用`<img>`标签或者通过AJAX请求获取图片数据。

2. 使用Canvas元素创建一个画布，并将图片绘制到画布上。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// 将图片绘制到画布上
ctx.drawImage(image, 0, 0); // image为图片对象或者图片URL

3. 使用Canvas的`toDataURL`方法将画布内容转换为Base64编码的字符串。

var base64String = canvas.toDataURL('image/png');

4. 最后，可以将Base64编码的字符串作为源，创建一个新的`<img>`标签来显示转换后的PNG图片。

var img = document.createElement('img');
img.src = base64String;
document.body.appendChild(img);

这样就完成了将Base64编码转换为PNG图片的过程。

相关问题

js base64转png

首先，你需要将 base64 字符串转换为二进制数据，然后将其保存为 PNG 文件。下面是一段 JavaScript 代码实现这个过程：

function base64ToPNG(base64String, fileName) {
  // 将 base64 字符串转换为二进制数据
  const byteCharacters = atob(base64String);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);

  // 创建并保存 PNG 文件
  const blob = new Blob([byteArray], { type: 'image/png' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
  URL.revokeObjectURL(url);
}

使用方法：

const base64String = '...'; // 替换为你的 base64 字符串
const fileName = 'image.png'; // 替换为你想要保存的文件名
base64ToPNG(base64String, fileName);

这段代码会将 base64 字符串转换为二进制数据，然后创建一个 Blob 对象，并将其保存为 PNG 文件。你也可以将这个代码封装成一个函数，以便于在你的项目中重复使用。

js实现svg base64转png base64

要将SVG Base64转换为PNG Base64，可以使用以下步骤：

1. 创建一个空的Image对象。
2. 将SVG Base64字符串赋值给Image对象的src属性。
3. 等待Image对象的onload事件触发。
4. 在onload事件处理程序中，创建一个Canvas对象，并将Canvas的宽度和高度设置为与Image对象相同。
5. 将Image对象绘制到Canvas上。
6. 使用Canvas的toDataURL方法将PNG Base64字符串提取出来。

以下是一个JavaScript函数，它接受SVG Base64字符串作为输入，并返回PNG Base64字符串：

function svgToPngBase64(svgBase64) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = 'data:image/svg+xml;base64,' + svgBase64;
    img.onload = function() {
      const canvas = document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const pngBase64 = canvas.toDataURL('image/png').split(',');
      resolve(pngBase64);
    };
    img.onerror = function(err) {
      reject(err);
    };
  });
}

调用此函数时，将SVG Base64字符串作为参数传递给它。它返回一个Promise对象，当PNG Base64字符串准备好时，Promise将被解析，并返回PNG Base64字符串。如果出现错误，Promise将被拒绝，并返回错误对象。