当前位置: 首页 > 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;并且增加了很多用…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...