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

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

news 2026/1/1 15:59:41

【组件】前端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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/12/31 14:00:19

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/12/25 2:11:21

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/12/29 15:41:43

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/12/21 1:00:15

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/12/21 15:18:36

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/12/21 5:00:07

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/12/31 21:09:53