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

前端上传heic图片转jpe格式并展示

  • 各大浏览器对 HEIC 格式图片的支持情况,包括上传和显示的支持度
浏览器版本HEIC 上传HEIC 显示
Chrome版本 85 及以上支持不支持
Firefox所有版本支持不支持
Safari版本 11 及以上支持支持
Edge版本 18 及以上支持不支持
Opera所有版本支持不支持
IE不支持不支持不支持
  • 安装
npm install heic2any
  • 封装的方法
// 上传至阿里服务器
import heic2any from 'heic2any';
const uploadFile1 = function(file, fileImport) {const hide = Message({iconClass: "el-icon-loading",duration: 0,dangerouslyUseHTMLString: true,message: '<span style="margin-left:10px">上传中...</span>'});return new Promise((resolve, reject) => {let env = storage.get('env') || null;if (!env || !env.expiration || new Date().getTime() >= env.expiration) {request(aliyunUrl, 'get', {}).then(res => {const { accessKeyId, accessKeySecret, securityToken, expiration } = res.data.data;env = {region: 'oss-cn-hangzhou',accessKeyId: accessKeyId,accessKeySecret: accessKeySecret,stsToken: securityToken,expiration: expiration,//过期时间bucket: ossUrl, //文件名称secure: true,};storage.set('env', env)uploadFile2(file, fileImport, hide).then(res => {resolve(res)})})} else {uploadFile2(file, fileImport, hide).then(res => {resolve(res)})}})
};
const uploadFile2 = async function(file, fileImport, hide) {// 检测heic格式图片 转换成jpg格式再上传至服务器if (file && file.type === 'image/heic') {try {const blob = await heic2any({blob: file,toType: 'image/jpeg',});file = new File([blob], `${file.name.split('.')[0] || 'image'}.jpg`, { type: 'image/jpeg' })} catch (e) {Message.error("上传失败!");}}let env = storage.get('env') || null;var client = new OSS.Wrapper(env)let type = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()let storeAs = '',time = new Date().getTime()let fileName = file.name.substring(0, file.name.lastIndexOf('.'))var reg = new RegExp(',', 'g')fileName = fileName.replace(reg, '')if (fileImport) {//文件导入账户特殊处理storeAs = `sasspc/upload/${Math.floor(Math.random() * 150)}_${time}${type}`} else {storeAs = `sasspc/upload/${Math.floor(Math.random() * 150)}_${time}${type}`}return new Promise((resolve, reject) => {client.multipartUpload(storeAs, file).then((res) => {let fileUrl = 'https://' + ossUrl + res.namelet params = {};params.url = fileUrlparams.name = file.name;resolve(params)return}).catch((err) => {Message.error("上传失败!");reject();return}).finally(() => {hide.close()})});
};

相关文章:

前端上传heic图片转jpe格式并展示

各大浏览器对 HEIC 格式图片的支持情况&#xff0c;包括上传和显示的支持度 浏览器版本HEIC 上传HEIC 显示Chrome版本 85 及以上支持不支持Firefox所有版本支持不支持Safari版本 11 及以上支持支持Edge版本 18 及以上支持不支持Opera所有版本支持不支持IE不支持不支持不支持 …...

VMware虚拟机-设置系统网络IP、快照、克隆

1.设置网络IP 1.点击右上角开关按钮-》有线 已连接-》有线设置 2.手动修改ip 3.重启或者把开关重新关闭开启 2.快照设置 快照介绍&#xff1a; 通过快照可快速保存虚拟机当前的状态&#xff0c;后续可以使用虚拟机还原到某个快照的状态。 1.添加快照(需要先关闭虚拟机) 2.在…...

指纹识别概念解析

目录 1. 指纹是物证之首 1.1 起源于中国 1.2 发展于欧洲 1.3 流行于全世界 2. 指纹图像 3. 指纹特征 4. 指纹注册 5. 指纹验证 6. 指纹辨识 1. 指纹是物证之首 指纹识别技术起源于中国、发展于欧洲、流行于全世界。自20世纪以来&#xff0c;指纹在侦破刑事案件、解决诉…...

图像处理神经网络数据预处理步骤的详细解释和分析

1. 尺寸调整&#xff08;Resizing&#xff09; 目的&#xff1a;神经网络通常需要固定尺寸的输入图像。通过统一图像尺寸&#xff0c;可以确保输入的一致性&#xff0c;使得网络能够正常处理。 方法&#xff1a;将所有输入图像调整为特定的尺寸&#xff08;例如224x224像素&a…...

音视频开发4-补充 FFmpeg 开发环境搭建 -- 在windows 上重新build ffmpeg

本节的目的是在windows 上 编译 ffmpeg 源码&#xff0c;这样做的目的是&#xff1a;在工作中可以根据工作的实际内容裁剪 ffmpeg&#xff0c;或者改动 ffmpeg 的源码。 第一步 &#xff1a;下载&#xff0c; 安装&#xff0c;配置 &#xff0c;运行 msys64 下载 下载地址&…...

第十二周笔记

微信小程序的自定义事件是指开发者可以自行定义并触发的事件&#xff0c;以实现特定的功能或逻辑。通过自定义事件&#xff0c;开发者可以更灵活地管理小程序的交互和数据流动&#xff0c;提升用户体验和开发效率。下面我将详细讲解微信小程序自定义事件&#xff0c;包括定义、…...

SketchUp v2024 v24.0.553 解锁版安装教程 (强大的绘图三维建模工具)

前言 SketchUp&#xff08;简称SU&#xff0c;俗称草图大师&#xff09;全球知名的三维建模软件&#xff0c;强大的绘图工具、建模渲染、扩展插件和渲染器模板、海量3D模型库及建模灯光材质渲染效果图&#xff0c;用于建筑师、城市规划专家、游戏开发等行业。 一、下载地址 …...

力扣题解记录

三元组队列、取出元组中的元素&#xff1a;腐烂的橘子...

Flutter 中的 ExpandIcon 小部件:全面指南

Flutter 中的 ExpandIcon 小部件&#xff1a;全面指南 Flutter 提供了一系列的动画图标&#xff0c;ExpandIcon 就是其中之一&#xff0c;它用于表示一个可以展开或收起的内容区域。这个小部件通常用于实现折叠列表、手风琴菜单或其他类似的UI元素。本文将为您提供一个全面的指…...

想转行程序员的朋友,有什么想问的在评论区随便问,我知道的都告诉你。

你想转行程序员吗&#xff1f; 我自己是法学院毕业后&#xff0c;通过2年的努力才转行程序员成功的。 我发现对于一个外行来说&#xff0c;找不到一个适合自己的方向&#xff0c;光靠努力在一个新的行业里成功异常艰难。即使你非常努力&#xff0c;但方向错了也会做大量的无用…...

Jenkins工具系列 —— 通过钉钉API 发送消息

文章目录 钉钉环境搭建使用钉钉API接口 发送消息机器人安全设置使用自定义关键词机器人安全设置使用加签方式 资料下载 钉钉环境搭建 在jenkins安装钉钉插件以及小机器人&#xff0c;这部分内容可参考&#xff1a;插件 钉钉发送消息 使用钉钉API接口 发送消息 机器人安全设置…...

MySQL--存储引擎

一、存储引擎介绍 1.介绍 存储引擎相当于Linux的文件系统&#xff0c;以插件的模式存在&#xff0c;是作用在表的一种属性 2.MySQL中的存储引擎类型 InnoDB、MyISAM、CSV、Memory 3.InnoDB核心特性的介绍 聚簇索引、事务、MVCC多版本并发控制、行级锁、外键、AHI、主从复制特…...

【经典文献】光-声立体成像:关于系统标定与三维目标重建

论文名称&#xff1a;《Opti-Acoustic Stereo Imaging: On System Calibration and 3-D Target Reconstruction》作者列表&#xff1a;Shahriar Negahdaripour, Hicham Sekkati, and Hamed Pirsiavash作者单位&#xff1a;美国迈阿密大学电气与计算机工程系&#xff0c;佛罗里达…...

弘君资本股市行情:股指预计保持震荡上扬格局 关注汽车、银行等板块

弘君资本指出&#xff0c;近期商场体现全体分化&#xff0c;指数层面上看&#xff0c;沪指一路震动上行&#xff0c;创出年内新高&#xff0c;创业板指和科创50指数体现相对较弱&#xff0c;依然是底部震动走势。从盘面体现上看&#xff0c;轮动依然是当时商场的主基调&#xf…...

看这两位东北圣女美吗?如何描写美女的大长腿?

看这两位东北圣女美吗&#xff1f;如何描写美女的大长腿&#xff1f; 最近署名为懂球娘娘的一篇描写东北圣女的文章火了&#xff0c;文中描述了海棠朵朵与辛芷蕾这两位娇媚动人的角色。其美艳动人的形象和魅力四溢的描写让人为之倾倒。 这种通过文字展现人物魅力的能力让人佩服…...

Linux相关指令

目录 1、输出重定向 2、追加重定向 3、输出重定向 4、more 5、less 6、head 7、tail 8、| (管道) 9、wc 10、与时间相关的指令 11、cal 12、find 13、grep 14、zip/unzip 1、输出重定向 在linux中&#xff0c;可以用echo向屏幕中输出字符串&#xff1a; 这是向屏幕…...

自建公式,VBA在Excel中解一元一次方程

自建公式,VBA在Excel中解一元一次方程 文章目录 前言一、运行效果图二、操作思路三、代码1.去除方程中未知数,将未知数转为“*0”2.计算方程中常数3.计算方程中未知数的系数一,先将未知数替换成“*1”4.计算方程中未知数的系数二5.计算方程得数前言 小学必考内容:一元一次…...

Linux-之 简易:Shell编程

1 为什么要学习Shell编程 对于JavaEE和Python程序员来说,工作的需要,你的老大会要求你编写一些Shel脚本进行程序或者是服务器的维护,比如编写一个定时备份数据库的脚本. 对于大数据程序员来说,需要编写Shell程序来管理集群 2 Shell是什么 Shell是一个命令行解释器&#xff…...

vue3的api风格

Vue的组件有两种不同的风格&#xff1a;组合式API 和 选项式API 选项式api 选项式API&#xff0c;可以用包含多个选项的对象来描述组件的逻辑&#xff0c;如&#xff1a;data&#xff0c;methods&#xff0c;mounted等。 组合式api setup&#xff1a;是一个标识&#xff0c;告…...

MySQL 开源到商业(五):开源 vs 养家糊口

前文提到&#xff0c;Oracle 收购了 Sun 之后&#xff0c;既没有像 Monty 预测的那样修改 MySQL 开源 License&#xff0c;也没有减少 MySQL 的研发投入。恰恰相反&#xff0c;Oracle 在持有 MySQL 知识产权的十几年里大幅提升了 MySQL 的工程质量&#xff0c;并且增加了很多用…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...