当前位置: 首页 > news >正文

前端 - 将非 jpeg 格式图片转为 jpeg 格式、压缩图片

目录

  • 将非 jpeg 格式图片转为 jpeg 格式
  • 压缩图片
  • 使用

将非 jpeg 格式图片转为 jpeg 格式

/common/compressImage/convertImage

// 思路是创建一个图片,将file等于这个图片,然后创建一个canvas图层 ,将canvas等比例缩放,
//然后用canvas的drawImage将图片与canvas合起来,然后在把canvas的base64转成file即可
export default function ConvertImage(file) {return new Promise((resolve, reject) => {const fileName = file.name.substring(0, file.name.indexOf('.'))let reader = new FileReader() //读取filereader.readAsDataURL(file)reader.onloadend = function (e) {let image = new Image() //新建一个img标签(还没嵌入DOM节点)image.src = e.target.result //将图片的路径设成file路径image.onload = function () {let canvas = document.createElement('canvas'),context = canvas.getContext('2d'),imageWidth = image.width,imageHeight = image.height,data = ''canvas.width = imageWidthcanvas.height = imageHeightcontext.drawImage(image, 0, 0, imageWidth, imageHeight)data = canvas.toDataURL('image/jpeg')var newfile = dataURLtoFile(data, fileName + '.jpeg')resolve(newfile)}}})
}
function dataURLtoFile(dataurl, filename) {// base64转file对象let arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime }) //转成了jpeg格式
}

压缩图片

/common/compressImage/compressorjs.js

import Compressor from 'compressorjs' // npm 下载包/*** @param image 图片* @param backType 需要返回的类型blob,file* @param quality 图片压缩比 0-1,数字越小,图片压缩越小* @returns*/
export default function ImageCompressor(image, backType, quality) {return new Promise((resolve, reject) => {new Compressor(image, {quality: quality || 0.6,success(result) {let file = new File([result], image.name, { type: image.type })if (!backType || backType === 'blob') {resolve(result)} else if (backType === 'file') {resolve(file)} else {resolve(file)}},error(err) {console.log('图片压缩失败---->>>>>', err)reject(err)},})})
}

使用

使用1:封装方法

async getUrl(file) {this.isShowLoading = true;for (let i = 0; i < file.length; i++) {let img = file[i];const fileType = img.name.substring(img.name.indexOf(".") + 1);// 判断文件是不是jpeg 不是jpeg的都转成jpegif (!["jpeg", "jpg"].includes(fileType)) {img = await ConvertImage(img); //转陈jpeg格式的file}let newImg = await ImageCompressor(img, "file", 0.6); //图片压缩// newImg 压缩后文件 File}
},

以上来源

使用2:不封装方法,直接用

<script>
// ...
import ImageCompressor from "../../common/compressImage/compressorjs.js";
import ConvertImage from "../../common/compressImage/convertImage";export default {name: "addCar",methods: {jszxszUpload(type) {uni.chooseImage({success: async (imageRes) => {let bool = true;if (imageRes.tempFiles[0].type) {if (!["image/jpeg", "image/jpg", "image/png", "image/heic"].includes(imageRes.tempFiles[0].type)) {bool = false;}} else {const imgTypeStr = "jpeg, jpg, png, heic";const type = imageRes.tempFilePaths[0].split(".")[1];if (imgTypeStr.indexOf(type.toLowerCase()) < 0) {bool = false;}}if (!bool) {uni.showLoading({title: "请上传 jpeg、jpg、png、heic 格式图片",icon: "none",});setTimeout(function () {uni.hideLoading();}, 2000);return;}let fileBase64 = "";//#ifdef H5/** ** 图片压缩 start ****/let img = imageRes.tempFiles[0];const fileType = img.name.substring(img.name.indexOf(".") + 1);if (!["jpeg", "jpg"].includes(fileType)) {img = await ConvertImage(img); // 转为 jpeg 格式的 file}let newImg = await ImageCompressor(img, "file", 0.6); //图片压缩/** ** 图片压缩 end ****/fileBase64 = await this.toBase64(newImg);//#endif//#ifdef MP-WEIXIN/** ** 图片压缩 start ****/let imgBlob = imageRes.tempFilePaths[0];const fileTypeBlob = imgBlob.name.substring(imgBlob.name.indexOf(".") + 1);if (!["jpeg", "jpg"].includes(fileTypeBlob)) {imgBlob = await ConvertImage(imgBlob); // 转为 jpeg 格式的 file}let newImgBlob = await ImageCompressor(imgBlob, "blob", 0.6); //图片压缩/** ** 图片压缩 end ****/fileBase64 = await this.downloadAndConvert(newImgBlob);//#endif// ... 以 base64 格式上传图片 fileBase64},});},// 文件转base64toBase64(file) {return new Promise((resolve, reject) => {const fileReader = new FileReader();fileReader.onload = (e) => {resolve(e.target.result);};fileReader.readAsDataURL(file);fileReader.onerror = () => {reject(new Error("文件流异常"));};});},},
};
</script>

相关文章:

前端 - 将非 jpeg 格式图片转为 jpeg 格式、压缩图片

目录 将非 jpeg 格式图片转为 jpeg 格式压缩图片使用 将非 jpeg 格式图片转为 jpeg 格式 /common/compressImage/convertImage // 思路是创建一个图片&#xff0c;将file等于这个图片&#xff0c;然后创建一个canvas图层 &#xff0c;将canvas等比例缩放&#xff0c; //然后用…...

随着 ChatGPT 凭借 GPT-4V(ision) 获得关注,多模态 AI 不断发展

原创 | 文 BFT机器人 在不断努力让人工智能更像人类的过程中&#xff0c;OpenAI的GPT模型不断突破界限GPT-4现在能够接受文本和图像的提示。 生成式人工智能中的多模态表示模型根据输入生成文本、图像或音频等各种输出的能力。这些模型经过特定数据的训练&#xff0c;学习底层模…...

Zookeeper-JavaApI操作

JavaApI操作 JavaApI操作1) Curator 介绍2) Curator API 常用操作a) 建立连接与CRUD基本操作b) Watch事件监听c) 分布式锁c.1) 介绍c.2) Zookeeper分布式锁原理c.3) 案例&#xff1a;模拟12306售票 JavaApI操作 1) Curator 介绍 Curator 是 Apache ZooKeeper 的Java客户端库。…...

Vue2.0打包指定路由前缀

【1】修改vue.config.js 如下修改publicPath: module.exports {publicPath:/concert,lintOnSave: false }【2】修改router/index.js base指定路由前缀&#xff1a; const router new VueRouter({mode: history,base: /concert, //指定路由前缀// base: process.env.BASE_…...

[vxe-table] 合并行后滚动错位

使用vxe-table的属性:span-method合并行&#xff0c;之后下拉后会错位 原因&#xff1a;缺少配置 scroll-y"{enabled: false}"参考&#xff1a; vxe-table合并行后错位...

动态规划:05不同路径

动态规划&#xff1a;05不同路径 62. 不同路径 五部曲 确定dp数组含义&#xff1a;到达第i&#xff0c;j位置的路径条数为d[i][j] 确定递归公式&#xff1a;d[i][j]d[i-1][j]d[i][j-1] 我们发现&#xff0c;想要到d[i][j]&#xff0c;只能从d[i-1][j]或者d[i][j-1]达到 dp数…...

html与css知识点

html 元素分类 块级元素 1.独占一行&#xff0c;宽度为父元素宽度的100% 2.可以设置宽高 常见块级元素 h1~h6 div ul ol li dl dt dd table form header footer section nav article aside 行内元素 1.一行显示多个 2.不能设置宽高&#xff0c;宽高由元素内容撑开 常见行内…...

spring boot simple类型cache使用

注意&#xff1a;这里用的不是 redis 的缓存&#xff0c;simple 的缓存默认用的是 java 的 ConcurrentHashMap&#xff0c; 单纯的 simple 缓存&#xff0c;只需要引入下面的 pom 依赖即可&#xff1a;spring-boot-starter-cache <dependency><groupId>org.springf…...

springboot-aop-redis-lua 实现的分布式限流方案

1.自定义限流注解 Target({ElementType.METHOD, ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) Inherited Documented public interface Limit {/*** 名字*/String name() default "";/*** key*/String key() default "";/*** Key的前缀*/String…...

C++ realloc()用法及代码示例

C realloc()用法及代码示例 C 中的realloc() 函数重新分配先前分配但尚未释放的内存块。realloc() 函数重新分配先前使用 malloc() 、 calloc() 或 realloc() 函数分配但尚未使用 free() 函数释放的内存。如果新大小为零&#xff0c;则返回的值取决于库的实现。它可能会也可能…...

【Go】gin框架生成压缩包与下载文件

在没有加入下面这串代码之前&#xff0c;下载的压缩包一直为空。遂debug了两个小时。。。 可以在服务端本地创建压缩包。单独将服务端本地的压缩包发送给客户端也是没问题的。但是两个合起来&#xff0c;客户端接收到的压缩包内容就为空了。 期间也尝试了 zipFile.Close() zipW…...

iOS 面试题以及自我理解答案

1、简述push原理&#xff0c;push的证书和其他的有什么不一样&#xff1f; 第 一阶段&#xff1a;BeejiveIM服务器把要发送的消息、目的iPhone的标识打包&#xff0c;发给APNS。 第二阶段&#xff1a;APNS在自身的已注册Push服务 的iPhone列表中&#xff0c;查找有相应标识的iP…...

vue实现自定义滚动条

vue实现自定义滚动条 具体效果如下&#xff0c;这边我用的rem单位&#xff0c;比例是1:40&#xff0c; 先写下页面布局&#xff0c;把原生的滚动条给隐藏掉&#xff0c;给自定义的滑块增加transition: marginLeft 1s linear;可以使左边距过度的更顺滑 .top-box-2::-webkit-scr…...

基于Qt C++的工具箱项目源码,含命令行工具、桌面宠物、文献翻译、文件处理工具、医学图像浏览器、插件市场、设置扩展等工具

一、介绍 1. 基本信息 完整代码下载地址&#xff1a;基于Qt C的工具箱项目源码 TBox是一款基于Qt C的工具箱。用户可以自行选择安装所需的工具&#xff08;以插件的形式&#xff09;&#xff0c;将TBox打造成专属于自己的效率软件。TBox基本界面展示如下&#xff1a; 2. 使用…...

C# AnimeGANv2 人像动漫化

效果 项目 下载 可执行程序exe下载 源码下载 其他 C# 人像卡通化 Onnx photo2cartoon-CSDN博客...

gateway接口参数加解密

上篇介绍了多种加解密的使用java加密使用 本篇主要介绍在gateway网关中使用对参数解密和返回数据进行加密的操作 原理 下面使用的是AES加密 SHA1withRSA加签 1-用户使用拿到的AES秘钥和RSA私钥。对数据进行加密和加签 2-进行验签和时间的检验 3-将解密的数据返回到具体的调用…...

WorkPlus定制化的局域网会议软件,提供安全稳定的会议体验

在现代商业环境中&#xff0c;迅速而高效的沟通是企业成功的关键要素之一。而在传统的会议模式下&#xff0c;时间成本和地理限制往往给企业带来不小的困扰。针对这一问题&#xff0c;WorkPlus推出了一款创新的局域网会议软件——WorkPlus Meet&#xff0c;旨在为企业创造高效的…...

干货|小白也能自制电子相册赶紧码住~

你是否想拥有一个独一无二的电子相册&#xff0c;却又苦于不知道如何下手&#xff1f;今天教你一个简单的方法&#xff0c;即使你是小白&#xff0c;也能轻松自制电子相册&#xff01; 一、选择合适的工具 首先&#xff0c;你需要选择一个合适的工具来制作电子相册。有很多工具…...

docker之Harbor私有仓库

目录 一、什么是Harbor 二、Harbor的特性 三、Harbor的构成 1、六个组件 2、七个容器 四、私有镜像仓库的上传与下载 五、部署docker-compose服务 把项目中的镜像数据进行打包持久数据&#xff0c;如镜像&#xff0c;数据库等在宿主机的/data/目录下&#xff0c; 一、什么…...

服务器上部署python脚本

1.查看服务器上的python是否自带&#xff0c;一般都自带 2.将本地脚本上传到服务器 3.直接运行一下脚本看报什么错误 代码错误&#xff0c; 将f删除后报别的错误 上面是未安装依赖的错误。我们安装一下依赖 下面是编码的解决 #!/usr/bin/python # -*- coding: utf-8 -*- 先把…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...