当前位置: 首页 > news >正文

将图片转换成base64格式

1.先创建一个canvas对象,然后给canvas对象设置图片对象的宽高,再调用canvas的getContext获取2d上下文对象,再调用上下文对象的drawImage方法,再通过canvase对象的toDataURL方法,将图片转换成base64格式的字符串

2.将base64格式的字符串转化为图片

3.先创建Image对象,然后将图片的路径赋值给image对象,在图片加载的时候传入一个回调函数,调用转换base64的方法,然后在html中获取一个img对象设置它的src属性为base64格式的字符串就可以了

function getBase64Img(img){ //这个img是一个图片对象let canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;let ctx = canvas.getContext("2d");ctx.drawImage(img,0,0,img.width,img.height);let dataURL = canvas.toDataURL(ctx);retrun dataURL;
}//将base64转化为图片
let image = new Image();
image.src = "./1.jpb";
image.onload = function(){let base64 = getBase64Img(image);document.getElementById("a").setAttribute("src",bast64);
}

http://www.lryc.cn/news/465930.html

相关文章:

  • 征服ES(ElasticSearch)的慢查询实战
  • 如何才能从普通程序员转行AI大模型?
  • 【番外】软件设计师中级笔记关于数据库技术更新笔记问题
  • 【代码】约瑟夫问题——故事背景
  • 什么是事件冒泡和事件捕获
  • 高端优质建站公司具备哪些优势?2024高端建站公司哪家好
  • word删除空白页 | 亲测有效
  • YashanDB学习-服务启停
  • 在未排序的整数数组找到最小的缺失正整数
  • TCP连接管理机制:三次握手四次挥手
  • 1022. 宠物小精灵之收服
  • 人工智能生成内容(AI-Generated Content)
  • 深度学习:强化学习(Reinforcement Learning, RL)详解
  • C语言笔记20
  • 基于SSM+微信小程序的房屋租赁管理系统(房屋2)
  • selenium案例——爬取哔哩哔哩排行榜
  • HTML5教程(三)- 常用标签
  • 【HCIE-Datacom考试战报】2024-08-21 深圳 SRv6
  • 【京准电钟】“安全卫士”:卫星时空安全隔离防护装置
  • 优先级队列(2)_数据流中第k大元素
  • 【CSS】纯CSS Loading动画组件
  • rootless模式下istio ambient鉴权策略
  • 超详细的总结!最新大模型算法岗面试题(含答案)来了!
  • vmware-17pro全网最细安装教程(图文讲解,不需注册账户)
  • C/C++(二)C++入门基础
  • 人工智能发展:一场从“被教导”到“自我成长”的奇妙冒险
  • 企业级 RAG 全链路优化关键技术
  • 学习文档(5)
  • node.js下载安装以及环境配置超详细教程【Windows版本】
  • 08_实现 reactive