js将本地图装换为base64编码

news/2024/7/10 1:08:34 标签: javascript, 前端, js, vue

 主要代码:

javascript">    // 注意图片的,onload是异步的,如果要封装成工具函数,需要用promise包装一下
    imgToBase64(url) {
      return new Promise((resolve, reject) => {
        const image = new Image()
        image.src = url
        image.onload = () => {
          const canvas = document.createElement('canvas')
          canvas.width = image.naturalWidth // 使用 naturalWidth 为了保证图片的清晰度
          canvas.height = image.naturalHeight
          canvas.style.width = `${canvas.width / window.devicePixelRatio}px`
          canvas.style.height = `${canvas.height / window.devicePixelRatio}px`
          const ctx = canvas.getContext('2d')
          if (!ctx) {
            return null
          }
          ctx.drawImage(image, 0, 0)
          const base64 = canvas.toDataURL('image/png')
          return resolve(base64)
        }
        image.onerror = (err) => {
          return reject(err);
        }
      })
    },

调用方法:

javascript">           const imgUrl = require('D:\a.png');
          // const imgUrl = result.photo  // 如果是接口返回的文件路径,去掉require
           this.imgToBase64(imgUrl).then(res => {
                if (res) {
                  console.log('生成的base64图片', res)
                  result.photoBase64 = res
                }
              }).catch(err => {
                console.log('这里是错误', err);
              });

 


http://www.niftyadmin.cn/n/424009.html

相关文章

《高质量C/C++编程》读书笔记四

文章目录 C函数的高级特性函数重载的概念重载的起源重载是如何实现的当心隐式类型转换导致重载函数产生二义性 成员函数的重载、覆盖与隐藏重载与覆盖令人迷惑的隐藏规则隐藏存在的意义 参数的缺省值运算符重载概念不能被重载的运算符 函数内联 C函数的高级特性 对比于 C 语言的…

windows 服务程序和桌面程序集成(五)集成为一个EXE

系列文章目录链接: windows 服务程序和桌面程序集成(一)概念介绍windows 服务程序和桌面程序集成(二)服务程序windows 服务程序和桌面程序集成(三)UDP监控工具windows 服务程序和桌面程序集成&…

【Leetcode】 1071. 字符串的最大公因子

For two strings s and t, we say “t divides s” if and only if s t ... t (i.e., t is concatenated with itself one or more times). Given two strings str1 and str2, return the largest string x such that x divides both str1 and str2. Example 1: Input: s…

ORACLE数据库——SQL语句基础知识点2

ORACLE数据库 SQL语句基础知识点2 适合有SQL基础的人群。 禁止转载&#xff01; 基本语法 SELECT [*] <选择列表> [FROM] <表资源> [,…n] [WHERE] <行搜索条件> [GROUP BY] <分组表达式> [,…n] [HAVING] <组搜索条件> [ORDER B…

mock是什么?以及springboot中怎么使用mockMVC实现单元测试

目录 Mock是什么&#xff1f;Spring Boot中如何使用MockMVC实现单元测试&#xff1f;添加pom依赖创建测试案例 Mock是什么&#xff1f; Mock是一种测试模式&#xff0c;用于模拟或替代依赖项&#xff0c;以便测试程序的某些部分&#xff0c;而不是依赖于真实的外部系统或组件。…

软件工程全周期全过程20项文档模板,附下载。从《合同》到《需求规格说明书》到软件设计、开发、实施、验收、维护等全过程相关文档模板

软技工程全生命周期图 计算机软件研制产品的实现过程一般分为七个阶段&#xff1a; &#xff08;一&#xff09;──软件系统要求分析阶段&#xff0c;包括软件研制要求的确定、签订合同、软件设计和开发的策划&#xff1b; &#xff08;二&#xff09;──软件需求分析阶段&…

智能驾驶下半场!华锐捷/畅行智驾/木牛科技/奥迪威的答案是?

智能加速新周期&#xff0c;如何找准新方向&#xff1f;汽车产业链降本增效趋势下&#xff0c;对上游赛道包括芯片企业、传感器供应商带来什么影响&#xff0c;要如何应对&#xff1f; 智能驾驶下半场&#xff0c;高性价比、可拓展性、快速量产、规模化成为了关键词&#xff0…

汇川H5U计数器轴编程应用(高速计数和测速应用)

H5U编码器轴和脉冲轴相关应用测试请参看下面文章: H5U PLC本地脉冲轴和本地编码器轴测试_RXXW_Dor的博客-CSDN博客H5U PLC如何通过EtherCAT总线控制伺服运动,请参看下面的博客汇川H5U PLC通过EtherCAT总线控制SV660N和X3E伺服_RXXW_Dor的博客-CSDN博客。https://blog.csdn.n…