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

【组件】前端js HEIC/HEIF 转换为JPEG、PNG或GIF格式 苹果格式

news 2025/9/21 11:40:11

【组件】前端js HEIC/HEIF 转换为JPEG、PNG或GIF格式

Heic2any: Client-side conversion of HEIC/HEIF image files to JPEG,PNG, or GIF in the browser.icon-default.png?t=O83Ahttps://alexcorvi.github.io/heic2any/#demo

GitHub - alexcorvi/heic2any: Converting HEIF/HEIF image formats to PNG/GIF/JPEG in the browser

Demo

Heic2any: Client-side conversion of HEIC/HEIF image files to JPEG,PNG, or GIF in the browser.

代码  直接保存成html 本地运行即可看到效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HEIC to PNG Conversion</title><script src="https://cdn.jsdelivr.net/npm/heic2any"></script>
</head>
<body><h2>Upload HEIC Image and Convert to PNG</h2><input type="file" id="heicInput" accept="image/heic" /><br><br><div id="previewContainer"><h3>Converted Image Preview:</h3><img id="preview" style="max-width: 100%; height: auto;" /></div><script>document.getElementById('heicInput').addEventListener('change', function (event) {const file = event.target.files[0];if (!file) return;// 使用 FileReader 读取 HEIC 文件const reader = new FileReader();reader.onload = function (e) {const heicBlob = e.target.result;// 使用 heic2any 将 HEIC 转换为 PNGheic2any({blob: new Blob([heicBlob], { type: 'image/heic' }),toType: "image/png"}).then(function (resultBlob) {// 生成图片的 URL 并展示预览const previewImg = document.getElementById('preview');const url = URL.createObjectURL(resultBlob);previewImg.src = url;}).catch(function (error) {console.error("Error converting HEIC to PNG:", error);});};// 以二进制格式读取 HEIC 文件reader.readAsArrayBuffer(file);});</script>
</body>
</html>

相关文章：

【组件】前端js HEIC/HEIF 转换为JPEG、PNG或GIF格式 苹果格式

【组件】前端js HEIC/HEIF 转换为JPEG、PNG或GIF格式 Heic2any: Client-side conversion of HEIC/HEIF image files to JPEG,PNG, or GIF in the browser.https://alexcorvi.github.io/heic2any/#demo GitHub - alexcorvi/heic2any: Converting HEIF/HEIF image formats to PN…...

编程日记 2024/9/17 2:01:15

Vue3中slot插槽的几种使用实践

【1】默认插槽 父组件 <Category title"今日美食城市"><img :src"imgUrl" alt""> </Category>子组件 <div class"category"><h2>{{title}}</h2><slot>默认内容</slot> </div&g…...

编程日记 2024/9/17 2:00:13

SSH工具 MobaXterm的使用与快捷配置

软件下载/安装与链接服务器/本地虚拟机 文章目录 软件下载/安装与链接服务器/本地虚拟机软件下载软件安装使用软件链接非本地机器并设置用户密码我不想有确定密码的弹窗 其余便捷配置配置右键粘贴SSH链接设置 软件下载 如果你访问不了这个网址&#xff0c;可以评论区找博主或者…...

编程日记 2024/9/17 1:59:13

git 远程分支同步本地落后的有冲突的分支

如果你的本地分支已经修改了很多代码&#xff0c;但同时也已经落后于远程分支。这个时候你需要在主分支上拉最新的代码&#xff0c;然后切换到你的分支。 如主分支是 main &#xff0c;从分支是xing。 首先切换到子分支 $ git checkout xing 然后请求merge主分支main的代码 …...

编程日记 2024/9/17 1:58:12

如何基于Java解析国密数字证书

一、说明 随着信息安全的重要性日益凸显&#xff0c;数字证书在各种安全通信场景中扮演着至关重要的角色。国密算法&#xff0c;作为我国自主研发的加密算法标准&#xff0c;其应用也愈发广泛。然而&#xff0c;在Java环境中解析使用国密算法的数字证书时&#xff0c;我们可能…...

编程日记 2024/9/17 1:56:10

java实现系统文件管理

java实现系统文件管理 环境&#xff1a;jdk17springbootVueElementUI 背景&#xff1a;公司所做的项目需要别的系统向我们服务器上传文件&#xff0c;当我们需要查看这些文件什么时候上传的、文件数据是怎样的&#xff0c;只能去机房&#xff0c;排查问题效率较低&#xff0c;…...

编程日记 2024/9/17 1:55:09

pytorch快速入门（一）—— 基本工具及平台介绍

前言 该pytorch学习笔记应该配合b站小土堆的《pytorch深度学习快速入门教程》使用 环境配置&#xff1a;Anaconda Python编译器&#xff1a;pycharm、jupyter 两大法宝函数 dir&#xff08;&#xff09;&#xff1a;知道包中有什么东西&#xff08;函数 / 属性..…...

编程日记 2024/9/17 1:50:04

『功能项目』怪物的有限状态机【42】

本章项目成果展示 我们打开上一篇41项目优化 - 框架加载资源的项目&#xff0c; 本章要做的事情是按照框架的思想构建项目并完成怪物的自动巡逻状态&#xff0c;当主角靠近怪物时&#xff0c;怪物会朝向主角释放技能 首先新建脚本&#xff1a;BossCtrl.cs (通常把xxxCtrl.cs脚…...

编程日记 2024/9/17 1:49:03

【C++】模板进阶：深入解析模板特化

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与Queue 本章将…...

编程日记 2024/9/17 1:47:01

Python数据分析-世界上最富有的1000人

一、研究背景 随着全球化的加速发展和技术的进步&#xff0c;财富分配问题日益成为全球关注的焦点。财富的不平等现象日益明显&#xff0c;少数极富有的个人掌握了全球大部分的财富资源。了解全球最富有个人的财富分布及其背后的行业和国家因素&#xff0c;对于分析全球经济趋…...

编程日记 2024/9/17 1:43:29

CSS中隐藏滚动条的同时保留滚动功能

在CSS中&#xff0c;我们可以通过一些技巧来隐藏滚动条&#xff0c;同时保留滚动功能。以下是几种常用的方法和具体的实现步骤。 1. 使用 overflow 和 ::-webkit-scrollbar 这种方法适用于大多数现代浏览器。通过设置 overflow 属性启用滚动&#xff0c;同时利用 ::-webkit-s…...

编程日记 2024/9/17 1:41:27

我的标志：奇特的头像

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>与妖为邻</title><style>figu…...

编程日记 2024/9/17 1:39:24

中国空间计算产业链发展分析

2024中国空间计算产业链拆解 空间计算设备主要包括AR、VR、MR等终端设备。VR设备通常包括头戴式显示器&#xff08;VR头盔&#xff09;、手柄或追踪器等组件&#xff0c;用以完全封闭用户视野&#xff0c;营造虚拟环境体验。这些设备配备高分辨率显示屏、内置传感器和跟踪器。 …...

编程日记 2024/9/17 1:38:23

DAY14信息打点-JS 架构框架识别泄漏提取API 接口枚举FUZZ 爬虫插件项目

本课意义&#xff1a; 1.如何从表现中的JS提取价值信息 2.如何从地址中FUZZ提取未知的JS文件 3.如何从JS开放框架WebPack进行测试 一、JS 前端架构-识别&分析 在JS中寻找更多的URL地址&#xff0c;在JS代码逻辑&#xff08;加密算法、APIKey配置、验证逻辑&#xff09;中进…...

编程日记 2024/9/17 1:36:21

TS - tsconfig.json 和 tsconfig.node.json 的关系，如何在TS 中使用 JS 不报错

目录 1&#xff0c;前言2&#xff0c;二者关系2.1&#xff0c;使用 3&#xff0c;遇到的问题3.1&#xff0c;TS 中使用 JS 1&#xff0c;前言 通过 Vite 创建的 Vue3 TS 项目&#xff0c;根目录下会有 tsconfig.json 和 tsconfig.node.json 文件&#xff0c;并且存在引用关系…...

编程日记 2024/9/17 1:35:20

revisiting拉普拉斯模板

二维向量的二阶微分是Hessian矩阵&#xff0c;拉普拉斯算子是将两个独立的二阶微分求和&#xff0c;对二阶微分的近似。 我不认同冈萨雷斯的8邻域拉普拉斯模板。 MATLAB图像处理工具箱中fspecial函数’laplacian’参数给的拉普拉斯模板&#xff1a; 对于数字滤波器&#xff…...

编程日记 2024/9/17 1:34:18

深入分析计算机网络性能指标

速率带宽吞吐量时延时延带宽积往返时间RTT利用率丢包率图书推荐内容简介作者简介 速率 连接在计算机网络上的主机在数字信道上传送比特的速率&#xff0c;也称为比特率或数据率。 基本单位&#xff1a;bit/s&#xff08;b/s、bps&#xff09; 常用单位&#xff1a;kb/s&#x…...

编程日记 2024/9/17 1:31:15

pyflink 安装和测试

FPY Warning! 安装 apache-Flink # pip install apache-Flink -i https://pypi.tuna.tsinghua.edu.cn/simple/ Looking in indexes: https://pypi.tuna.tsinghua.edu.cn/simple/ Collecting apache-FlinkDownloading https://pypi.tuna.tsinghua.edu.cn/packages/7f/a3/ad502…...

编程日记 2024/9/17 1:30:13

《网络故障处理案例：公司网络突然中断》

网络故障处理案例&#xff1a;公司网络突然中断 一、故障背景 某工作日上午&#xff0c;一家拥有 500 名员工的公司突然出现整个网络中断的情况。员工们无法访问互联网、内部服务器和共享文件&#xff0c;严重影响了工作效率。 二、故障现象 1. 所有员工的电脑…...

编程日记 2024/9/17 1:29:12

JavaSE:9、数组

1、一维数组 初始化 import com.test.*;public class Main {public static void main(String [] argv){int a[]{1,2};int b[]new int[]{1,0,2};// int b[]new int[3]{1,2,3}; ERROR 要么指定长度要么大括号里初始化数据算长度int[] c{1,2};int d[]new int[10];} }基本类型…...

编程日记 2024/9/17 1:28:11

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/9/20 0:09:20

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/9/20 19:31:52

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/9/19 3:18:05

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/9/6 5:44:49

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/9/19 15:59:27

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/9/11 12:54:58

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/9/20 20:06:52

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/9/3 18:59:01

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/9/14 20:16:58

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/8/7 7:06:16