vue3+ts 中实现压缩图片、blob 转 base64

news/2024/7/9 23:57:00 标签: vue.js, 前端框架, 前端, typescript, vue

压缩图片

1.npm 安装 image-compressor.js

2.引入 import ImageCompressor from 'image-compressor.js'

3.使用

const compressImage = async (file: any) => {
  var imageCompressor = new ImageCompressor()
  return new Promise((resolve, reject) => {
    imageCompressor
      .compress(file, { quality: 0.8, maxHeight: 100, maxWidth: 100 })
      .then((result) => {
        resolve(result)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

// 这个方法是异步的,使用时记得
const afterRead = async (res: any) => {
     let file = await compressImage(files)
}

blob 转 base64,(同样也是异步的)

const blobToBase64 = (blob: any) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => {
      resolve(reader.result)
    }
    reader.onerror = reject
    reader.readAsDataURL(blob)
  })
}


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

相关文章

UV机-理光G5六彩一白一光油配置

UV机-理光G5六彩一白一光油配置

Go interface基础

接口类型是对其它类型行为的概括与抽象。通过使用接口,我们可以写出更加灵活和通用的函数,这些函数不用绑定在一个特定的类型实现上。 很多面向对象的语言都有接口这个概念,Go 语言的接口的独特之处在于它是隐式实现。换句话说,对…

WEB前端人机导论实验-实训3超链接与多媒体文件应用

1.项目1 设计简易灯箱画廊 A.题目要求: 编程实现简易灯箱画廊,鼠标单击任一个图像超链接,在底部浮动框架中显示大图像,效果如下的页面。 B.思路: (1)CSS样式: a.在样式中对body元素进行居中…

python中none的替换方法:pandasnumpy

none的替换方法: 1.pandas # 将缺失的id值替换为None merged_df[id].fillna(None, inplaceTrue) #这行代码使用了Pandas库中的fillna方法,对DataFrame中的id列进行了填充操作。具体来说,它将该列中的缺失值用字符串None进行填充&#xff0c…

通用图形处理单元GPGPU计算管线(General Purpose computation on Graphics Processing Units)介绍

文章目录 GPGPU计算管线一、引言二、GPGPU计算模型2.1 数据并行性2.2 计算密集型 三、GPGPU计算管线3.1 管线(Pipeline)概述3.2 计算管线结构输入阶段执行阶段输出阶段 3.3 计算管线优化内存优化计算优化 四、代码示例五、结论 GPGPU计算管线 一、引言 …

test Property-based Testing-02-jqwik Java的属性驱动测试框架入门介绍

拓展阅读 开源 Auto generate mock data for java test.(便于 Java 测试自动生成对象信息) 开源 Junit performance rely on junit5 and jdk8.(java 性能测试框架。性能测试。压测。测试报告生成。) jqwik jqwik的发音类似于 “jay quick” [ˈdʒeɪkwɪk]。 jqwik的主要…

如何让GPT/GPT4成为你的编程助手?

详情点击链接:如何让GPT/GPT4成为你的编程助手? 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析,AI画图,图像识别,文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Claude2二…

Python | 三、函数

函数的形参和实参(对应卡码网11题句子缩写) 除非实参是可变对象,如列表、字典和集合,则此时形参会复制实参的地址,即此时二者指向同一个地址,因此在函数内对形参的操作会影响到实参除这种情况外&#xff0…