当前位置: 首页 > 知识库问答 >
问题:

javascript - 本地 png 图片地址如何转base64?

公西岳
2023-05-04

/aaaaa/static/img/zhexian.41eafbf5.png 转 这种格式
data:image/png;base64,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

共有5个答案

胡昊
2023-05-04

图片转base64方法

 getBase64(imgUrl, callback) {
      let image = new Image();
      // 解决跨域问题
      image.setAttribute("crossOrigin", "anonymous");
      let imageUrl = imgUrl;
      image.src = imageUrl;
      // image.onload为异步加载
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        // eslint-disable-next-line no-undef
        context.drawImage(image, 0, 0, image.width, image.height);
        var quality = 0.8;
        // 这里的dataurl就是base64类型
        // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png,因为压缩成png后              base64的字符串可能比不转换前的长!
        let dataurl = canvas.toDataURL("image/jpeg", quality);
        callback ? callback(dataurl) : null; //调用回调函数
      };
 }

使用:

this.getBase64('./test.img', dataURL => {
      console.log(dataURL );
 })
宇文嘉勋
2023-05-04

你的图片是用户选取的嘛
试试这样
const fileInput = document.getElementById("fileInput");

const reader = new FileReader();

fileInput.onchange = (e) => {

reader.readAsDataURL(e.target.files[0]);

}

reader.onload = (e) => {

console.log(e.target.result);

}

商勇
2023-05-04

这种格式叫datauri

它的格式非常简单: data:[<mediatype>][;base64],<data>

了解它的格式之后你可以非常轻松的自己实现。例: https://stackoverflow.com/questions/7845892/create-data-uris-on-the-fly

方英耀
2023-05-04
// 把本地图片文件路径转换为 Base64 编码字符串
async function imageToBase64(imagePath) {
  const response = await fetch(imagePath);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}


imageToBase64('/aaaaa/static/img/zhexian.41eafbf5.png')
  .then((base64) => {
    console.log(base64); // 输出 Base64 编码字符串
  })
  .catch((error) => {
    console.error('Error converting image to base64:', error);
  });
傅明知
2023-05-04

创建一个img元素,监听img的onload事件,在onload事件中把图片渲染到canvas中,使用canvas转base64

可以参考:https://blog.csdn.net/wgh4318/article/details/126222541

 类似资料:
  • 问题内容: 我有使用地址的应用程序(它存储它们的时间很长),因此它只了解地址。 可以将地址转换为with 吗? 问题答案: 尽管IPv4地址范围具有等效的IPv6,但是您不能将所有IPv6地址都转换为IPv4-IPv6地址比IPv4地址更多。 解决此问题的唯一明智的方法是更新您的应用程序,以便能够理解和存储IPv6地址。

  • 所以有几个网站会为你计算你的链接本地ipv6地址,就像这里的这个。 尽管如此,它并没有给出任何有用的关于这个地址是如何计算的,也没有输入参数是什么。那么,如果一个人知道自己的ipv4地址、子网掩码和网关地址,计算链路本地ipv6地址的过程(或算法)是什么?我正在使用SCTP套接字做一个项目,该项目使用ISATAP网络隧道和LL ipv6地址用于构建ISATAP地址。

  • 页面代码中引用本地图片: 页面中的地址: 我想将 /src/assets/image/login/icon_login.png 变成 http://localhost:3000/src/assets/image/login/icon_login.png 应该如何配置? 我配置了vite里的base 没有效果

  • 我在服务器上执行如下命令: netstat -anp | grep 6379 查看redis的6379端口情况,结果如下所示: 上面的192.168.0.11是内网地址,41.92.250.40是公网地址(当然为了安全我这边是随便改了不是真实的地址) 阿某云买的服务器,上面有两个ip 41.92.250.40(公) 192.168.0.11(私有) 现在我对Local Address 本地地址还有

  • X2.2.0新增 sp_get_image_url($file,$style='') 功能: 转化数据库保存图片的文件路径,为可以访问的url 参数: $file: 数据库中保存的文件名 $style:样式(七牛) 返回: 类型string,图片可以访问的url 使用: $url = sp_get_image_url('portal/23232.png');

  • X2.2.0新增 sp_get_image_preview_url($file,$style='watermark') 功能: 获取图片预览链接 参数: $file: 数据库中保存的文件名 $style:样式(七牛) 返回: 类型string,图片预览链接 使用: $url = sp_get_image_preview_url('portal/23232.png');