当前位置: 首页 > 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);
}

相关文章:

将图片转换成base64格式

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

征服ES(ElasticSearch)的慢查询实战

在 Elasticsearch(ES)中,进行大数据查询时,常常会由于多种因素而导致性能显著下降。接下来,我们将深入探讨几种常见情况及其相应的解决方案。 一、常见问题分析 深分页、大排序 大量数据扫描与多分片上的多次排序会严…...

如何才能从普通程序员转行AI大模型?

人工智能已经成为一个非常火的方向。作为一名普通的程序员,该如何转向AI大模型方向。以程序员为例,看看普通程序员如何开启AI大模型之路。 接下来给大家分享一下程序员转大模型的一些注意点: 作为一名程序员,在考虑转行至大模型领…...

【番外】软件设计师中级笔记关于数据库技术更新笔记问题

提问 由于软件设计师中级笔记中第九章数据库技术基础的笔记内容太多,我应该分几期发布呢?还是一期一次性发布完成。 如果分为一期发布,可能需要给我多一些时间,由于markdown格式有所差异,所以我需要部分进行修改与调…...

【代码】约瑟夫问题——故事背景

Hello!大家好,我是学霸小羊,今天先来讲讲约瑟夫问题的背景。 在古罗马时期,犹太历史学家约瑟夫斯领导犹太人反对罗马帝国的统治,并与罗马军队进行激烈的战斗。然而,在罗马军队的围困下,约瑟夫与…...

什么是事件冒泡和事件捕获

文章目录 1. 事件传播机制2. 事件冒泡(Event Bubbling)3. 事件捕获(Event Capturing)4. 事件冒泡和事件捕获的区别5. 阻止事件传播总结 事件冒泡和事件捕获是两种处理网页中事件传播的机制,特别是在 JavaScript 中处理…...

高端优质建站公司具备哪些优势?2024高端建站公司哪家好

从某种程度上讲,一个出色的建站公司需具备将无形的品牌价值巧妙转化为直观视觉元素的能力,这一转化过程极为考究,涵盖了设计的精细程度、色彩运用的巧妙以及空间布局的智慧,这些要素均不容忽视。 接下来考察网站的内容策划能力同…...

word删除空白页 | 亲测有效

想要删掉word里面的末尾空白页,但是按了delete之后也没有用 找了很久找到了以下亲测有效的方法 1. 通过鼠标右键在要删除的空白页面处显示段落标记 2. 在字号输入01,按ENTER(回车键) 3.成功删除了!!...

YashanDB学习-服务启停

YashanDB学习-服务启停 1、查看YashanDB 当前实例状态和数据库名称2、使用 yasboot 工具启停YashanDB3、服务器重启后无法通过yasboot命令运维管理数据库4、正常关闭数据库的方式 数据库安装过程中将实例自动切换成OPEN阶段,并创建名为yashandb的数据库。 1、查看Ya…...

在未排序的整数数组找到最小的缺失正整数

🎁👉点击进入文心快码 Baidu Comate 官网,体验智能编码之旅,还有超多福利!🎁 🔍【大厂面试真题】系列,带你攻克大厂面试真题,秒变offer收割机! ❓今日问题&am…...

TCP连接管理机制:三次握手四次挥手

🍑个人主页:Jupiter. 🚀 所属专栏:Linux从入门到进阶 欢迎大家点赞收藏评论😊 目录 连接管理机制三次握手三次握手的目的三次握手的步骤第一次握手第二次握手第三次握手注意: 为什么建立连接是三次握手&…...

1022. 宠物小精灵之收服

思路 双层dp 代码 #include <bits/stdc.h> using namespace std;const int N 1010, mod 1e9 7;int n, m, k, x, y, z, ans, t; int w[N], f[N][N];void solve() {cin >> n >> m >> k;for (int i 1; i < k; i ){cin >> x >> y;f…...

人工智能生成内容(AI-Generated Content)

此外&#xff0c;ALGC还在影视剧本创作、音乐创作、设计与创意、虚拟助手与聊天机器人、教育与培训、新闻报道与文学创作等领域发挥着重要作用。 三、技术架构 ALGC产业生态体系通常呈现为上中下三层架构&#xff1a; 四、优势与挑战 优势&#xff1a; 挑战&#xff1a; 一、…...

深度学习:强化学习(Reinforcement Learning, RL)详解

强化学习&#xff08;Reinforcement Learning, RL&#xff09;详解 强化学习是机器学习的一个重要分支&#xff0c;它涉及到智能体&#xff08;agent&#xff09;通过与环境&#xff08;environment&#xff09;的交互学习如何做出决策。在强化学习中&#xff0c;智能体在不断…...

C语言笔记20

指针运算 #include <stdio.h>int main() {char ac[] {0,1,2,3,4,5,6,7,8,9,};char *p ac;printf("p %p\n", p);printf("p1%p\n", p1);int ai[] {0,1,2,3,4,5,6,7,8,9,};int *q ai;printf("q %p\n", q);printf("q1%p\n", q1)…...

基于SSM+微信小程序的房屋租赁管理系统(房屋2)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的房屋租赁管理系统实现了有管理员、中介和用户。 1、管理员功能有&#xff0c;个人中心&#xff0c;用户管理&#xff0c;中介管理&#xff0c;房屋信息管理&#xff…...

selenium案例——爬取哔哩哔哩排行榜

案例需求&#xff1a; 1.使用selenium自动化爬虫爬取哔哩哔哩排行榜中舞蹈类的数据&#xff08;包括视频标题、up主、播放量和评论量&#xff09; 2.利用bs4进行数据解析和提取 3.将爬取的数据保存在本地json文件中 4.保存在excel文件中 分析&#xff1a; 1.请求url地址&…...

HTML5教程(三)- 常用标签

1 文本标签-h 标题标签&#xff08;head&#xff09;&#xff1a; 自带加粗效果&#xff0c;从h1到h6字体大小逐级递减一个标题独占一行 语法 <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5…...

【HCIE-Datacom考试战报】2024-08-21 深圳 SRv6

8月21日深圳考试战报&#xff08;SRV6&#xff09; 前言 大家好呀&#xff0c;我是来自誉天的学员---&#xff0c;我是今年4月份开始看集训、备考实验的&#xff0c;但是专业课比较多&#xff0c;又还有其他比赛&#xff0c;所以我刚开始的进度很慢&#xff0c;六月底才进入冲…...

【京准电钟】“安全卫士”:卫星时空安全隔离防护装置

【京准电钟】“安全卫士”&#xff1a;卫星时空安全隔离防护装置 【京准电钟】“安全卫士”&#xff1a;卫星时空安全隔离防护装置 当前&#xff0c;我国电力系统普遍采用北斗卫星或者GPS卫星授时来实现时间同步&#xff0c;但不加防护的授时装置存在卫星信号被干扰或欺骗的风险…...

FanControl终极指南:告别噪音,掌控你的PC风扇控制

FanControl终极指南&#xff1a;告别噪音&#xff0c;掌控你的PC风扇控制 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tren…...

STAR-CCM+物理场全览:从基础流动到前沿多物理场耦合

1. 流体与传热&#xff1a;STAR-CCM的仿真基石 流动与传热仿真是工程模拟中最基础也最常用的功能。在STAR-CCM中&#xff0c;这两个物理场就像盖房子的地基&#xff0c;后续所有高级功能都建立在这个基础之上。我刚开始接触CFD时&#xff0c;花了整整三个月时间专门研究这两个模…...

SOCD Cleaner终极指南:彻底解决游戏键盘方向冲突的免费开源神器

SOCD Cleaner终极指南&#xff1a;彻底解决游戏键盘方向冲突的免费开源神器 【免费下载链接】socd Key remapper for epic gamers 项目地址: https://gitcode.com/gh_mirrors/so/socd 还在为格斗游戏中同时按下W和S导致角色卡顿而烦恼吗&#xff1f;或者在射击游戏急停转…...

终极CoreCycler教程:简单三步完成CPU稳定性测试与优化

终极CoreCycler教程&#xff1a;简单三步完成CPU稳定性测试与优化 【免费下载链接】corecycler Script to test single core stability, e.g. for PBO & Curve Optimizer on AMD Ryzen or overclocking/undervolting on Intel processors 项目地址: https://gitcode.com/…...

终极免费Switch模拟器yuzu:解决电脑玩任天堂游戏的5大痛点

终极免费Switch模拟器yuzu&#xff1a;解决电脑玩任天堂游戏的5大痛点 【免费下载链接】yuzu 任天堂 Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/yu/yuzu 想在电脑上畅玩Switch游戏却总是遇到各种问题&#xff1f;yuzu模拟器作为全球最受欢迎的开源任…...

OpenCore Legacy Patcher终极指南:让老Mac免费运行最新macOS的完整教程

OpenCore Legacy Patcher终极指南&#xff1a;让老Mac免费运行最新macOS的完整教程 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher OpenCore Legacy Patcher是…...

等压雨幕原理在铝合金窗的应用

等压雨幕原理在铝合金窗的应用 摘要: 针对常见的样窗水密气密不达标,首先概述等压雨幕的作用原理,然后介绍其在铝合金门窗应用中的代表性细节。可以看出,控制框扇搭接处的间隙很重要,以及密封胶条合理设计选用的重要性。而且日系推拉采用等压设计的方式很值得借鉴。 关键…...

通达信数据解析终极指南:mootdx让金融数据获取变得如此简单

通达信数据解析终极指南&#xff1a;mootdx让金融数据获取变得如此简单 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 在金融数据分析和量化交易的世界里&#xff0c;获取准确、完整的市场数据是…...

Linuxbonding链路异常定位实战

Linuxbonding链路异常定位实战这是一篇面向中级 Linux 使用者的技术文章&#xff0c;主题聚焦在bonding链路&#xff0c;重点讨论链路聚合、冗余切换和接口状态。在真实生产环境中&#xff0c;bonding链路相关问题往往不会以单一错误形式出现&#xff0c;而是混杂在日志、权限、…...

3步掌握yfinance:从金融数据获取到智能分析的完整指南

3步掌握yfinance&#xff1a;从金融数据获取到智能分析的完整指南 【免费下载链接】yfinance Download market data from Yahoo! Finances API 项目地址: https://gitcode.com/GitHub_Trending/yf/yfinance yfinance是一个强大的Python库&#xff0c;能够轻松从Yahoo! F…...