图片转换为base64

简介: 图片转换为base64

本地图片地址转换base64方法typeScript方法

const getBase64 = (url: string) => {
    return new Promise((resolve, reject) => {
      // 通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,避免了文档冗余和污染
      let Img = new Image();
      Img.src = url;
      Img.crossOrigin = 'Anonymous';
      Img.onload = () => { // 要先确保图片完整获取到,这是个异步事件
        let dataURL = '';
        let canvas = document.createElement('canvas'); // 创建canvas元素
        let width = Img.width; // 确保canvas的尺寸和图片一样
        let height = Img.height;
        canvas.width = width || 0;
        canvas.height = height || 0;
        let ctx = canvas.getContext('2d');
        if (ctx) ctx.drawImage(Img, 0, 0, width, height); // 将图片绘制到canvas中
        dataURL = canvas.toDataURL('image/jpeg'); // 转换图片为dataURL
        resolve(dataURL);
      };
    });
  }

调用:

let res = await getBase64('图片地址');
或者
getBase64('图片地址').then((thumbnail: any) => {
  //TODO
});
相关文章
|
前端开发 JavaScript 搜索推荐
流式服务器端渲染
流式服务器端渲染(Streaming Server-Side Rendering)是一项在Web开发中备受关注的技术,它结合了服务器端渲染(SSR)和流式数据传输的优势。通过将渲染的HTML内容逐步发送给客户端,流式SSR可以显著加快页面加载速度,提供更好的用户体验,并对搜索引擎优化产生积极影响。本篇博文将深入探讨流式SSR的工作原理、优点和缺点,以及适用的场景。此外,我们还将介绍在一些知名项目中如何应用流式SSR技术。无论是初学者还是有经验的开发人员,本篇博文都将帮助你快速掌握流式SSR的概念和应用,为你的Web项目带来更好的性能和用户体验。让我们一起深入研究这一令人兴奋的前端技术吧!
1285 0
|
JavaScript 前端开发 大数据
虚拟滚动是怎么做性能优化的?
虚拟滚动是怎么做性能优化的?
820 0
|
JavaScript 前端开发 容器
高性能渲染十万条数据不卡顿【虚拟滚动】
高性能渲染十万条数据不卡顿【虚拟滚动】
高性能渲染十万条数据不卡顿【虚拟滚动】
|
对象存储 图形学 索引
为何图片经过OSS缩略之后尺寸变大了?——影响不同格式图片文件大小的一些因素和实际示例
OSS提供了基本的图片处理功能和图片格式之间的转换功能,在实际使用过程中,很多用户使用OSS将原图缩略之后输出,在这个过程中也出现了很多用户询问为何缩略之后图片尺寸变大,本文主要通过一些示例解释了这种现象出现的原因和排查方法。
19971 2
|
9天前
|
人工智能 自然语言处理 文字识别
阿里云百炼Qwen3.7-Max简介:能力、优势、支持订阅计划参考
Qwen3.7-Max是阿里云百炼面向智能体时代推出的新一代旗舰模型,对标GPT-5.5、Claude Opus 4.7等闭源旗舰。该模型支持百万级token上下文窗口,具备顶级推理能力、多模态搜索与视觉理解增强、流式输出低延迟响应等核心优势,覆盖编程、办公、长周期自主执行等复杂场景。同时支持OpenAI接口兼容,便于系统快速迁移。用户可通过Token Plan团队或节省计划等订阅方式灵活调用,适合企业级高要求场景使用。
3745 18
阿里云百炼Qwen3.7-Max简介:能力、优势、支持订阅计划参考
|
10天前
|
人工智能 自然语言处理 供应链
|
16天前
|
人工智能 开发工具 iOS开发
Claude Code 新手完全上手指南:安装、国产模型配置与常用命令全解
Claude Code 是一款运行在终端环境中的 AI 编程助手,能够直接在命令行中完成代码生成、项目分析、文件修改、命令执行、Git 管理等开发全流程工作。它最大的特点是**任务驱动、终端原生、轻量高效、多模型兼容**,无需图形界面、不依赖 IDE 插件,能够深度融入开发者日常工作流。
3612 14
|
13天前
|
人工智能 Linux BI
国内用 Claude Code 终于不用翻墙了:一行命令搞定,自动接 DeepSeek
JeecgBoot AI专题研究 一键脚本:Claude Code + JeecgBoot Skills + DeepSeek 全平台接入 一行命令装好 Claude Code + JeecgBoot Skills + DeepSeek 接入,无需翻墙使用 Claude Code,支持 Wind
3021 7
国内用 Claude Code 终于不用翻墙了:一行命令搞定,自动接 DeepSeek