前端base64转png图片，生成透明背景

对于前端将base64转换为透明背景的PNG图片，你可以使用以下步骤实现：

1. 将base64的数据转换为Blob对象。
2. 创建一个Image对象，并将Blob对象的URL赋给它。
3. 创建一个Canvas对象，并设置其宽度和高度与Image对象相同。
4. 获取Canvas的上下文对象。
5. 绘制透明背景。
6. 使用drawImage()方法将Image对象绘制到Canvas上。
7. 使用toDataURL()方法将Canvas上的图像转换为base64格式的透明背景PNG图片。

相关问题

base64转png图片

要将获取到的base64数据转为png格式的图片，可以按照以下步骤操作：
1. 使用base64模块的decodebytes方法将base64数据解码为二进制数据。
2. 使用open函数打开一个文件，以二进制写入模式（"wb"）打开。
3. 将解码后的二进制数据写入文件中。
4. 关闭文件。

具体代码如下：

import base64

# 假设获取到的base64数据为string
decoded = base64.decodebytes(string.encode("ascii"))
with open("XX.png", "wb") as fh:
    fh.write(decoded)

如果要将base64数据转为jpg格式的图片，只需要将文件名中的".png"改为".jpg"即可。

另外，如果要将本地图片转为base64数据，可以按照以下步骤操作：
1. 使用open函数打开本地图片文件，以二进制读取模式（"rb"）打开。
2. 使用read方法读取文件内容，得到二进制数据。
3. 使用base64模块的b64encode方法将二进制数据编码为base64数据。
4. 使用open函数打开一个文件，以二进制写入模式（"wb"）打开。
5. 将编码后的base64数据写入文件中。
6. 关闭文件。

具体代码如下：

import base64
import os

# 假设本地图片路径为r'photo path\xx.png'
with open(r'photo path\xx.png','rb') as pngfile:
    data = pngfile.read()
imgdata=base64.b64encode(data)
with open('xx.txt','wb') as fp:
    fp.write(imgdata)

前端png图片转base64

可以使用canvas将png图片转换为base64编码。具体步骤如下：

1. 创建一个Image对象，并将png图片的url赋值给它。
2. 等待Image对象加载完成，然后将它绘制到一个canvas上。
3. 使用canvas的toDataURL方法将canvas上的图像转换为base64编码。

以下是示例代码：

function pngToBase64(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const dataURL = canvas.toDataURL('image/png');
      resolve(dataURL);
    };
    img.onerror = reject;
    img.src = url;
  });
}

使用示例：

pngToBase64('https://example.com/image.png')
  .then(base64 => console.log(base64))
  .catch(error => console.error(error));