JavaScript图片转base64格式

2023-11-07

function changeBase64() {

            var imgSrc = './share.png'; // 图片本地路劲(写自己本地图片地址)

            var image = new Image()

            image.setAttribute('crossOrigin', 'anonymous') //支持跨域

            image.src = imgSrc

            image.onload = () => {

                var canvas = document.createElement("canvas")

                canvas.width = image.width

                canvas.height = image.height

                var ctx = canvas.getContext("2d")

                ctx.drawImage(image, 0, 0, image.width, image.height)

                var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase()

                var dataUrl = canvas.toDataURL("image/" + ext)

                var base64 = JSON.parse(JSON.stringify(dataUrl)) // 这里就是转化成的编码

                console.log(base64)

            }

        }

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript图片转base64格式 的相关文章

  • 将鼠标悬停时的鼠标光标更改为锚状样式

    如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标 我怎样才能做到这一点 假设你的div has an id myDiv 将以下内容添加到您的 CSS 中 这cursor pointer指定光标应与用于锚点 超链接 的手形图标
  • Eslint errorring 导入没有扩展名的 jsx

    我正在尝试在 es6 中导入 jsx 文件而不需要 jsx 扩展名 import LoginErrorDialog from LoginErrorDialogView Not import LoginErrorDialog from Log
  • 为什么 iife 在一个简单的例子中不起作用?

    我不明白为什么函数表达式调用不起作用并抛出错误 你能给我解释一下吗 var a function x alert x function a 1 谢谢大家 任务比我想象的要容易得多 这是因为 JS 将 IIFE 解析为函数的参数调用 这样做时
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • 【小甲鱼C语言】课后笔记第一章第一节——打印(printf)

    目录 1 打印 就是 输出 的意思 2 使用 GCC 编译程序 gcc 源代码 o 可执行文件 3 printf 是格式化输出函数 a 函数概要 b 函数原型 c 参数分析 d 返回值 e 演示 4 转义字符 5 反斜杠的奥义 6 课后习题
  • Qt自定义标题栏-移动窗口

    前情提要 众所周知 一个最简单的窗口也是有标题栏的 Windows默认提供的标题栏上有 图标 窗口标题 Min Max Close按钮 但是 这未免太过局限 高自由度的自定义是极客 Geek 精神不可或缺的一部分 如果你想在标题栏上增加 减
  • spring.jpa.hibernate.ddl-auto的配置

    spring jpa hibernate ddl auto 可以显式设置 spring jpa hibernate ddl auto 标准的Hibernate属性值有 none validate update create create d
  • mysql之 mysql 5.6不停机双主一从搭建(活跃双主一从基于日志点复制)

    环境说明 版本 version 5 6 25 log 主1库ip 10 219 24 25主2库ip 10 219 24 22从1库ip 10 219 24 26os 版本 centos 6 7已安装热备软件 xtrabackup 防火墙已
  • A template class for binding C++ to Lua

    A template class for binding C to Lua 标签 classc bindingconstructorluafunction 2006 09 09 15 50 1397人阅读 评论 0 收藏 举报 目录 htt
  • OpenMMLab-AI实战营第二期-人体关键点检测与MMPose

    人体关键点检测与MMPose 课程链接 https www bilibili com video BV1kk4y1L7Xb 这个课程的大致内容是介绍如何从给定的二维影像中恢复出人体的姿态 2D或者3D 大纲如下所示 基本上可以认为流程是 先
  • hadoop的DFSOutputStream

    当我们用命令 hadoop fs copyFromLocal localfile hdfs 将本地文件复制到HDFS时 其背后的复制过程是怎样的 本地文件通过什么方式传输到datanode上的呢 这里面很显然的是 1 文件在多个电脑之间进行
  • 基于clickhouse做用户画像,标签圈选

    clickhouse在做用户画像标签时 怎么去做圈选 表结构应该是怎么样的 我们应该怎么去处理 能够使其高性能的圈选 尽可能缩小其占用的存储空间 这个问题 我通过代码给大家做下的演示 先在hive中对数据预处理 最初表结构 create t
  • python/pta 7-42 纵横

    7 42 纵横 莫大侠练成纵横剑法 走上了杀怪路 每次仅出一招 这次 他遇到了一个正方形区域 由n n个格子构成 每个格子 行号 列号都从1开始编号 中有若干个怪 莫大侠施展幻影步 抢占了一个格子 使出绝招 横扫四方 就把他上 下 左 右四
  • 眼底图像血管增强与分割--(4)基于自适应对比度增强算法实现

    在 http blog csdn net piaoxuezhong article details 78385517 中介绍的自适应对比度增强算法 其基本原理是将图像分为低频背景和高频细节两部分 算法选择高频部分进行增益放大 这样就增强了细
  • 修复“net::err_cert_authority_invalid”错误

    1 背景 在请求接口时接口报错net err cert authority invalid 当您的浏览器无法验证您网站的SSL证书的有效性时 就会出现此问题 如果您尚未设置证书或为您的网站使用HTTP 不推荐 则不应遇到此错误 2 解决办法
  • 利用Python子进程关闭Excel自动化过程出现的弹窗

    利用Python进行Excel自动化操作的过程中 尤其是涉及VBA时 可能遇到消息框 弹窗 MsgBox 此时需要人为响应 否则代码卡死直至超时 1 2 根本的解决方法是VBA代码中不要出现类似弹窗 但有时我们无权修改被操作的Excel文件
  • python多线程编程: 使用互斥锁同步线程

    由于每个线程互相独立 相互之间没有任何关系 你干你的 我干我的 互相不干扰 如果要几个线程同时干一件事怎么办 由于互相不走动 如果一个线程已经做过了 另一个线程再去做 不就重复了吗 很容易乱套 现在假设这样一个例子 有一个全局的计数num
  • 如何在windows使用valgrind_如何在windows下使用f2py

    什么是f2py f2py是一个将fortran或者c程序转化成python可以调用的库的工具 它几乎和numpy同时出现 使用也相对比较方便 因此一直在numpy包中 在早期 f2py起到的作用类似于numba 你可以将程序的主要逻辑交给p
  • 从在线字典网站获取词汇释义:一个Python爬虫实战案例

    目录 目录 1 准备工作 2 分析网页结构 3 编写爬虫 4 提取单词信息 5 输出结果
  • css 渐变实现loading

    div class loading div
  • 基于FPGA的MCP4725驱动程序

    基于FPGA的MCP4725驱动程序 芯片资料 MCP4725是低功耗 高精度 单通道的12位缓冲电压输出数模转换器 Digital to Analog Convertor DAC 具有非易失性存储器 EEPROM 用户可以使用I2C接口命
  • 【机器学习】逻辑回归

    1 逻辑回归基础理论 逻辑回归 Logistic regression 又叫对数几率回归 是一个分类模型 主要进行二分类 在线性回归的基础上进行一个sigmoid变换 于是得到逻辑回归模型 逻辑回归输出值在 0 1 之间 直观含义是y 1的
  • js中事件绑定3种方法以及事件委托

    事件绑定 首先 我先来介绍我们平时绑定事件的三种方法 1 嵌入dom
  • JavaScript图片转base64格式

    function changeBase64 var imgSrc share png 图片本地路劲 写自己本地图片地址 var image new Image image setAttribute crossOrigin anonymous