在线拼接图片工具HTML源码资源-CSDN文库

共5个文件

js：3个

html：1个

css：1个

html

需积分: 17 137 浏览量 2023-03-05 14:48:24 上传评论收藏 82KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

在线拼接图片工具HTML源码.rar （5个子文件）

在线拼接图片工具HTML源码

combineImages.js 3KB

main.js 141KB

css

main.css 24KB

index.html 3KB

<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>在线拼图</title> <meta name="description" content="在线将多张图片拼接成一张图片。可用于健康码、行程码、核酸检测结果拼图等。"> <meta name="keywords" content=""> <link rel="icon" href="favicon.ico"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-transform"> <meta http-equiv="Cache-Control" content="no-siteapp"> <link rel="stylesheet" href="https://cdn.staticfile.org/egjs-flicking/4.5.1/flicking.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="w-full relative bg-[#fff] text-[#333333]"> <div class="max-w-6xl mx-auto relative pt-2 pb-8 px-4 md:px-8"> <h1 class="text-center text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-wide my-6">在线拼图</h1> <div class="flex justify-center items-center w-full mb-6"> <label for="select-imgs" class="flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer"> <div class="flex flex-col justify-center items-center pt-5 pb-6"> <svg class="mb-3 w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg> <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">点击选择多张图片</span></p> <p class="text-xs text-gray-500">PNG 或者 JPG</p> </div> <input type="file" id="select-imgs" multiple="" accept="image/*" class="hidden"> </label> </div> <button id="download" type="button" class="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 "> 下载图片 </button> <a href="https://www.dkewl.com/" > <button id="download" type="button" class="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 "> </button></a> <canvas id="mycanvas" class="max-w-full mx-auto my-6"></canvas> </div> <div id="content"> <h2>功能介绍</h2> <p>在线将多张图片拼接成一张图片，并导出下载。无需本地安装软件。</p> <ul> <li>下载时，使用日期时间作为文件名，规避图片文件名相同造成的覆盖问题；也能省去一部覆盖确认操作<br> </li> <li>多语言支持<br> </li> </ul> <h2>使用场景</h2> <ul> <li>家庭多人核酸检测报告截图合成一张图片，方便上传到学校在线统计文档。<br> </li> <li>健康码、行程码、核酸检测历史、疫苗接种历史，多图合并成一张图片。<br> </li> </ul> </div> </div> </div> <script type="text/javascript" src="js/combineImages.js"></script> </div> </div> <script src="js/main.js" crossorigin="anonymous"></script> </body></html>

评论收藏

内容反馈