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格式 的相关文章

随机推荐

  • 【小甲鱼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