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

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

news 2025/6/1 19:12:38

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

说说 Kotlin 中的 Any 与 Java 中的 Object 有何异同？

在 Kotlin 中 Any 类型和 Java 中的 Object 类都是所有类型的根类型。 1 基本定义 Kotlin 中的 Any 和 Any?&#xff1a; Any&#xff1a;是所有非空类型的根类型&#xff1b;Any?&#xff1a;是所有可空类型的根类型&#xff1b; Java 中的 Object&#xff1a; 是所有类…...

编程新知 2025/6/1 19:04:14

使用 Let‘s Encrypt 和 Certbot 为 Cloudflare 托管的域名申请 SSL 证书

一、准备工作 1. 确保域名解析在 Cloudflare 确保你的域名 jessi53.com 和 www.jessi53.com 的 DNS 记录已经正确配置在 Cloudflare 中&#xff0c;并且状态为 Active。 2. 安装 Certbot 在你的服务器上安装 Certbot 和 Cloudflare 插件。以下是基于 Debian/Ubuntu 和 Cent…...

编程新知 2025/6/1 17:10:17

安卓逆向篇LSP 模块HOOK 添加技术绕过检测算法解密逻辑验证

前置解释&#xff1a; 0 、 Magisk &#xff1a; 是当前 Android 社区用来获取 root 权限的主流方式开源工具 1 、 LSP 框架&#xff1a; XPosed 框架因只支持安卓 8 及以下&#xff0c;故高版本应使用 MagiskLSPosed 2 、 HOOK 技术&#xff1a; 钩子技术&…...

编程新知 2025/6/1 14:23:51

Spring Data Redis 实战指南

Spring Data Redis 核心特性 Spring Data Redis 是基于 Redis 的 NoSQL 内存数据结构存储解决方案，为 Spring 应用程序提供与 Redis 交互的高级抽象层。其核心架构设计体现了对现代应用需求的深度适配，主要技术特性可归纳为以下维度： 数据结构支持体系 作为多模型数据存储…...

编程新知 2025/6/1 9:19:42

【Java进阶】图像处理：从基础概念掌握实际操作

一、核心概念&#xff1a;BufferedImage - 图像的画布与数据载体 在Java图像处理的世界里&#xff0c;BufferedImage是当之无愧的核心。你可以将它想象成一块内存中的画布&#xff0c;所有的像素数据、颜色模型以及图像的宽度、高度等信息都存储在其中。 BufferedImage继承自…...

编程新知 2025/6/1 9:07:39

java/mysql/ES下的日期类型分析

mysql的timestamp和datetime mysql的TIMESTAMP类型内部存的是unix时间戳&#xff0c;可认为是一个32位的整型&#xff0c;它记录了1970.1.1以来的秒数。因为存储长度4字节的限制&#xff0c;所以有2038年限制。 DATETIME类型内部存的是long型&#xff0c;记录了1000.1.1以来的…...

编程新知 2025/6/1 8:31:13

Med-R1论文阅读理解-1

论文总结&#xff1a;Med-R1: Reinforcement Learning for Generalizable Medical Reasoning in Vision-Language Models 论文写了什么&#xff1f; 本文提出了一种名为 Med-R1 的新框架&#xff0c;旨在通过强化学习&#xff08;Reinforcement Learning, RL&#xff09;提升…...

编程新知 2025/6/1 4:48:11

Docker容器启动失败的常见原因分析

我们在开发部署的时候&#xff0c;用 Docker 打包环境&#xff0c;理论上是“我装好了你就能跑”。但理想很丰满&#xff0c;现实往往一 docker run 下去就翻车了。 今天来盘点一下我实际工作中经常遇到的 Docker 容器启动失败的常见原因&#xff0c;顺便给点 debug 的小技巧&a…...

编程新知 2025/6/1 3:44:44

在力扣刷题中触摸算法的温度

在代码的世界里&#xff0c;每一道力扣题目都是一扇通往未知的门。当我推开这些门&#xff0c;与内置求和函数、二进制位运算、辗转相减思想以及链表结构相遇时&#xff0c;才真正触摸到算法的温度 —— 那是一种理性与智慧交织的炽热&#xff0c;也是思维不断淬炼的滚烫。​ 最…...

编程新知 2025/5/31 22:02:36

麒麟系统 Linux（aarch64处理器）系统java项目接入海康SDK问题

1. 麒麟系统部署海康摄像头时的 JNA 链接错误&#xff0c; 海康提供的jna sdk版本太低&#xff0c;需升级版本4.5及以上&#xff0c;把集成的Structure 替换成以下类 public class SDK_Structure extends Structure {protected List<String> getFieldOrder() {List<St…...

编程新知 2025/5/31 21:21:07