HTML制作一个给图片压缩的网页高质量图片压缩并保存到本地

最新推荐文章于 2024-04-14 23:17:04 发布
最新推荐文章于 2024-04-14 23:17:04 发布
阅读量459 收藏 11
点赞数 7
分类专栏： 博客原创 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songjiale1/article/details/135180214
版权

请各位自己创建index.html文件并将一下代码复制到文本中。配合下方下载的插件共同使用（插件需要和index.html文件放到同一个文件夹）

点我查看演示站
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>免费在线压缩图片 - 宋佳乐博客</title>
		<link href="./js/pic.css" rel="stylesheet">
		<link rel="stylesheet" href="dist/css/style.css">
		<script src="./js/scrollreveal.min.js"></script>
		<style>
			/* 删除上传按钮后面文字 */
			input[type="file"] {
			  color: transparent;
			}
			.inputstyle {
			    width: 144px;
			    height: 41px;
			    cursor: pointer;
			    font-size: 30px;
			    outline: medium none;
			    position: absolute;
			    filter: alpha(opacity=0);
			    -moz-opacity: 0;
			    opacity: 0;
			    left: 0px;
			    top: 0px;
			}
			
			display: inline-block;
				max-width: 750px;
			}
			select{
				border: solid 1px #888;
				border-radius: 5px;
				padding: 10px;
			}
			#fileinput{
				border: solid 1px #888;
				width: 500px;
				border-radius: 5px;
				padding: 10px;
			}
			#downloadBtn{
				background-color: #e6e6e6;
				border: solid 1px #e6e6e6;
				color: #FFF !important;
				display: inline-block;
				width: 150px;
				padding: 10px;
				border-radius: 5px;
				cursor: pointer;
				outline: none;
			}
		</style>
	</head>
	<body class="is-boxed has-animations">
		<div class="body-wrap boxed-container">
			<header class="site-header">
				<div class="container">
					<div class="site-header-large-bg"><span></span></div>
					<div class="site-header-inner">
						<div class="brand header-brand">
							<h1 class="m-0">
								<a href="#">
									<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
										<title>Holly</title>
										<defs>
											<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="logo-b">
												<stop stop-color="#A8A3F6" offset="0%" />
												<stop stop-color="#DAD8FF" offset="100%" />
											</linearGradient>
											<path d="M27.098 7.53l-9.441 9.44a8.084 8.084 0 0 0-.625.702 8 8 0 0 0 12.173 10.377l9.24-9.24A16.02 16.02 0 0 1 39 23c0 8.837-7.163 16-16 16S7 31.837 7 23 14.163 7 23 7c1.416 0 2.79.184 4.098.53z"
											 id="logo-a" />
											<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="logo-d">
												<stop stop-color="#DAD8FF" offset="0%" />
												<stop stop-color="#857DF3" offset="100%" />
											</linearGradient>
											<path d="M27.098 7.53l-9.441 9.44a8.084 8.084 0 0 0-.625.702 8 8 0 0 0 12.173 10.377l9.24-9.24A16.02 16.02 0 0 1 39 23c0 8.837-7.163 16-16 16S7 31.837 7 23 14.163 7 23 7c1.416 0 2.79.184 4.098.53z"
											 id="logo-c" />
										</defs>
										<g transform="translate(-7 -7)" fill="none" fill-rule="evenodd">
											<use fill="url(#logo-b)" transform="rotate(45 23 23)" xlink:href="#logo-a" />
											<use fill="url(#logo-d)" transform="scale(-1 1) rotate(45 0 -32.527)" xlink:href="#logo-c" />
										</g>
									</svg>
								</a>
							</h1>
						</div>
					</div>
				</div>
			</header>

			<main>
				<section class="hero">
					<div class="container">
						<div class="hero-inner">
							<div class="hero-copy">
								<div class="container-sm">
									<h1 class="hero-title h2-mobile mt-0 is-revealing">免费在线图片压缩</h1>
									<p class="hero-paragraph is-revealing">|无损压缩</p>
									<div>
										<div class="configuration">
											<span>压缩比例：</span>
											<select id="quality">
												<option value="0.8">20%</option>
												<option value="0.6">40%</option>
												<option value="0.4">60%</option>
												<option value="0.2">80%</option>
											</select>
											&nbsp;&nbsp;&nbsp;
											<span>最大宽度：</span>
											<select id="maxwidth">
												<option value="750">750</option>
												<option value="640">640</option>
												<option value="375">375</option>
												<option value="320">320</option>
											</select>
											px
										</div>
										<br />
									</div>
									<div class="hero-form newsletter-form field field-grouped is-revealing">
										<div class="control control-expanded">
											<div class=" button button-primary button-block button-shadow">
												<div class="">上传图片</div>
												<input type="file" class="inputstyle" multiple="multiple" id="fileinput" ref="input">
											</div>
										</div>
										<div class="control">
											<button type="button" id="downloadBtn" class=" button  button-block button-shadow">下载</button>
										</div>
									</div>
								</div>
								<div id="loading"></div>
								<br>
								<div id="imgbox" class="frbkw"></div>
							</div>
							<div class="hero-illustration">
								<div class="hero-squares hero-squares-1 is-revealing">
									<svg width="124" height="64" viewBox="0 0 124 64" xmlns="http://www.w3.org/2000/svg">
										<defs>
											<linearGradient x1="0%" y1="50%" x2="114.418%" y2="50%" id="squares-1-a">
												<stop stop-color="#6EFACC" offset="0%" />
												<stop stop-color="#6EFACC" stop-opacity="0" offset="100%" />
											</linearGradient>
										</defs>
										<path d="M0 0h4v4H0V0zm0 12h4v4H0v-4zm0 12h4v4H0v-4zm0 12h4v4H0v-4zm0 12h4v4H0v-4zm0 12h4v4H0v-4zM12 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM24 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM36 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM48 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM60 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM72 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM84 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM96 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4z"
										 fill="url(#squares-1-a)" fill-rule="evenodd" />
									</svg>
								</div>
								<div class="hero-squares hero-squares-2 is-revealing">
									<svg width="64" height="88" viewBox="0 0 64 88" xmlns="http://www.w3.org/2000/svg">
										<defs>
											<linearGradient x1="0%" y1="50%" x2="114.418%" y2="50%" id="squares-2-a">
												<stop stop-color="#6EFACC" offset="0%" />
												<stop stop-color="#6EFACC" stop-opacity="0" offset="100%" />
											</linearGradient>
										</defs>
										<path d="M80 574h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4z"
										 transform="rotate(90 359 279)" fill="url(#squares-2-a)" fill-rule="evenodd" />
									</svg>
								</div>
								<div class="hero-ball hero-ball-1 is-revealing">
									<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
										<defs>
											<radialGradient cx="56.15%" cy="27.43%" fx="56.15%" fy="27.43%" r="57.526%" gradientTransform="matrix(.5626 -.82673 .8022 .54591 .026 .589)"
											 id="ball-1-a">
												<stop stop-color="#F8F7FF" offset="0%" />
												<stop stop-color="#DAD8FF" offset="34.827%" />
												<stop stop-color="#9B95F3" offset="100%" />
											</radialGradient>
											<filter x="-500%" y="-500%" width="1000%" height="1000%" filterUnits="objectBoundingBox" id="dropshadow-ball-1">
												<feOffset dx="24" dy="24" in="SourceAlpha" result="shadowOffsetOuter" />
												<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter" result="shadowBlurOuter" />
												<feColorMatrix values="0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.22 0" in="shadowBlurOuter" />
											</filter>
										</defs>
										<circle cx="200" cy="200" r="200" fill="#FFF" fill-rule="evenodd" style="filter:url(#dropshadow-ball-1)" />
										<circle cx="200" cy="200" r="200" fill="url(#ball-1-a)" fill-rule="evenodd" />
									</svg>
								</div>
								<div class="hero-ball hero-ball-2 is-revealing">
									<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
										<defs>
											<radialGradient cx="56.15%" cy="27.43%" fx="56.15%" fy="27.43%" r="57.526%" gradientTransform="matrix(.5626 -.82673 .8022 .54591 .026 .589)"
											 id="ball-2-a">
												<stop stop-color="#F8F7FF" offset="0%" />
												<stop stop-color="#DAD8FF" offset="34.827%" />
												<stop stop-color="#9B95F3" offset="100%" />
											</radialGradient>
											<filter x="-500%" y="-500%" width="1000%" height="1000%" filterUnits="objectBoundingBox" id="dropshadow-ball-2">
												<feOffset dx="24" dy="24" in="SourceAlpha" result="shadowOffsetOuter" />
												<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter" result="shadowBlurOuter" />
												<feColorMatrix values="0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.22 0" in="shadowBlurOuter" />
											</filter>
										</defs>
										<circle cx="100" cy="100" r="100" fill="#FFF" fill-rule="evenodd" style="filter:url(#dropshadow-ball-2)" />
										<circle cx="100" cy="100" r="100" fill="url(#ball-2-a)" fill-rule="evenodd" />
									</svg>
								</div>
								<div class="hero-illustration-browser is-revealing">
									<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
										<defs>
											<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="browser-a">
												<stop stop-color="#F89595" offset="0%" />
												<stop stop-color="#EF5C5C" offset="100%" />
											</linearGradient>
											<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="browser-b">
												<stop stop-color="#FFDFB0" offset="0%" />
												<stop stop-color="#FFBB78" offset="100%" />
											</linearGradient>
											<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="browser-c">
												<stop stop-color="#83E78D" offset="0%" />
												<stop stop-color="#4BCA55" offset="100%" />
											</linearGradient>
											<filter x="-30%" y="-42.9%" width="184%" height="220%" filterUnits="objectBoundingBox" id="browser-d">
												<feOffset dx="24" dy="24" in="SourceAlpha" result="shadowOffsetOuter1" />
												<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
												<feColorMatrix values="0 0 0 0 0.866666667 0 0 0 0 0.905882353 0 0 0 0 0.937254902 0 0 0 0.56 0" in="shadowBlurOuter1"
												 result="shadowMatrixOuter1" />
												<feMerge>
													<feMergeNode in="shadowMatrixOuter1" />
													<feMergeNode in="SourceGraphic" />
												</feMerge>
											</filter>
											<linearGradient x1="19.946%" y1="72.147%" x2="73.772%" y2="18.374%" id="browser-e">
												<stop stop-color="#F8F7FF" offset="0%" />
												<stop stop-color="#DAD8FF" offset="100%" />
											</linearGradient>
											<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="browser-f">
												<stop stop-color="#DAD8FF" offset="0%" />
												<stop stop-color="#857DF3" offset="100%" />
											</linearGradient>
											<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="browser-g">
												<stop stop-color="#DAD8FF" offset="0%" />
												<stop stop-color="#CDCAFF" offset="100%" />
											</linearGradient>
											<linearGradient x1="94.808%" y1="-15.701%" x2="6.924%" y2="82.567%" id="browser-h">
												<stop stop-color="#5DFBD7" stop-opacity="0" offset="0%" />
												<stop stop-color="#5DFBD7" offset="100%" />
											</linearGradient>
											<linearGradient x1="1.733%" y1="-10.509%" y2="77.375%" id="browser-i">
												<stop stop-color="#6EFACC" stop-opacity="0" offset="0%" />
												<stop stop-color="#6EFACC" offset="100%" />
											</linearGradient>
											<linearGradient x1="92.458%" y1="5.866%" x2="0%" y2="100%" id="browser-j">
												<stop stop-color="#5DFBD7" offset="0%" />
												<stop stop-color="#5DFBD7" stop-opacity="0" offset="100%" />
											</linearGradient>
											<linearGradient x1="92.458%" y1="5.866%" x2="0%" y2="100%" id="browser-k">
												<stop stop-color="#5DFBD7" stop-opacity="0" offset="0%" />
												<stop stop-color="#5DFBD7" stop-opacity=".513" offset="48.724%" />
												<stop stop-color="#5DFBD7" stop-opacity="0" offset="100%" />
											</linearGradient>
											<linearGradient x1="92.458%" y1="5.866%" x2="0%" y2="100%" id="browser-l">
												<stop stop-color="#5DFBD7" stop-opacity="0" offset="0%" />
												<stop stop-color="#5DFBD7" stop-opacity=".513" offset="47.494%" />
												<stop stop-color="#5DFBD7" stop-opacity="0" offset="100%" />
											</linearGradient>
											<filter x="-23.1%" y="-21.8%" width="192.3%" height="187.3%" filterUnits="objectBoundingBox" id="browser-m">
												<feOffset dx="24" dy="24" in="SourceAlpha" result="shadowOffsetOuter1" />
												<feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
												<feColorMatrix values="0 0 0 0 0.866666667 0 0 0 0 0.905882353 0 0 0 0 0.937254902 0 0 0 0.56 0" in="shadowBlurOuter1"
												 result="shadowMatrixOuter1" />
												<feMerge>
													<feMergeNode in="shadowMatrixOuter1" />
													<feMergeNode in="SourceGraphic" />
												</feMerge>
											</filter>
											<linearGradient x1="100%" y1="50%" x2="-57.904%" y2="50%" id="browser-n">
												<stop stop-color="#DAD8FF" offset="0%" />
												<stop stop-color="#857DF3" offset="100%" />
											</linearGradient>
											<filter x="-500%" y="-500%" width="1000%" height="1000%" filterUnits="objectBoundingBox" id="dropshadow-1">
												<feOffset dy="16" in="SourceAlpha" result="shadowOffsetOuter" />
												<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter" result="shadowBlurOuter" />
												<feColorMatrix values="0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.22 0" in="shadowBlurOuter" />
											</filter>
										</defs>
										<g fill="none" fill-rule="evenodd">
											<rect width="800" height="450" rx="2" fill="#FFF" style="filter:url(#dropshadow-1)" />
											<rect width="800" height="450" rx="2" fill="#FFF" />
											<g>
												<path fill="#DDE7EF" d="M0 32h800v1H0z" />
												<circle fill="url(#browser-a)" cx="24" cy="16" r="4" />
												<circle fill="url(#browser-b)" cx="40" cy="16" r="4" />
												<circle fill="url(#browser-c)" cx="56" cy="16" r="4" />
											</g>
											<g filter="url(#browser-d)" transform="translate(505 196)" fill-rule="nonzero">
												<path d="M100 100l100-50.426L103.193.762a7.087 7.087 0 0 0-6.393 0L0 49.574 100 100z" fill="url(#browser-e)" />
												<path d="M199 90L99 139.875v-40L199 50v40z" fill="url(#browser-f)" />
												<path d="M100 139.875L0 90V50l100 49.875v40z" fill="url(#browser-g)" />
											</g>
											<g stroke-width="2">
												<path stroke="url(#browser-h)" d="M498.336 298.7l-62.117 30.105L194 208" transform="translate(169 54)" />
												<path d="M511.219 127.805L269 7" stroke="url(#browser-i)" transform="translate(169 54)" />
												<path d="M312 157.547L533.512 43" stroke="url(#browser-j)" transform="translate(169 54)" />
												<path d="M222 114.547L443.512 0" stroke="url(#browser-k)" transform="translate(169 54)" />
												<path d="M0 356.547L221.512 242" stroke="url(#browser-l)" transform="translate(169 54)" />
												<path d="M215 319.266L312.031 268" stroke="url(#browser-j)" transform="translate(169 54)" />
											</g>
											<g filter="url(#browser-m)" transform="scale(-1 1) rotate(45 -338.122 -406.594)" fill-rule="nonzero">
												<path d="M52 0L.511 70.268a2.668 2.668 0 0 0-.478 1.987 2.63 2.63 0 0 0 1.076 1.732L52 110V0z" fill="url(#browser-e)" />
												<path d="M103.49 70.27L52 0v110l50.89-36.011a2.637 2.637 0 0 0 1.077-1.732 2.669 2.669 0 0 0-.476-1.987z"
												 fill="url(#browser-n)" />
											</g>
										</g>
									</svg>
								</div>
								<div class="hero-ball hero-ball-3 is-revealing">
									<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
										<defs>
											<radialGradient cx="56.15%" cy="27.43%" fx="56.15%" fy="27.43%" r="57.526%" gradientTransform="matrix(.5626 -.82673 .8022 .54591 .026 .589)"
											 id="ball-3-a">
												<stop stop-color="#F8F7FF" offset="0%" />
												<stop stop-color="#DAD8FF" offset="34.827%" />
												<stop stop-color="#9B95F3" offset="100%" />
											</radialGradient>
											<filter x="-500%" y="-500%" width="1000%" height="1000%" filterUnits="objectBoundingBox" id="dropshadow-ball-3">
												<feOffset dx="24" dy="24" in="SourceAlpha" result="shadowOffsetOuter" />
												<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter" result="shadowBlurOuter" />
												<feColorMatrix values="0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.22 0" in="shadowBlurOuter" />
											</filter>
										</defs>
										<circle cx="40" cy="40" r="40" fill="#FFF" fill-rule="evenodd" style="filter:url(#dropshadow-ball-3)" />
										<circle cx="40" cy="40" r="40" fill="url(#ball-3-a)" fill-rule="evenodd" />
									</svg>
								</div>
								<div class="hero-ball hero-ball-4 is-revealing">
									<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
										<defs>
											<radialGradient cx="56.15%" cy="27.43%" fx="56.15%" fy="27.43%" r="57.526%" gradientTransform="matrix(.5626 -.82673 .8022 .54591 .026 .589)"
											 id="ball-4-a">
												<stop stop-color="#F8F7FF" offset="0%" />
												<stop stop-color="#DAD8FF" offset="34.827%" />
												<stop stop-color="#9B95F3" offset="100%" />
											</radialGradient>
											<filter x="-500%" y="-500%" width="1000%" height="1000%" filterUnits="objectBoundingBox" id="dropshadow-ball-4">
												<feOffset dx="24" dy="24" in="SourceAlpha" result="shadowOffsetOuter" />
												<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter" result="shadowBlurOuter" />
												<feColorMatrix values="0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.22 0" in="shadowBlurOuter" />
											</filter>
										</defs>
										<circle cx="20" cy="20" r="20" fill="#FFF" fill-rule="evenodd" style="filter:url(#dropshadow-ball-4)" />
										<circle cx="20" cy="20" r="20" fill="url(#ball-4-a)" fill-rule="evenodd" />
									</svg>
								</div>
								<div class="hero-ball hero-ball-5 is-revealing">
									<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<defs>
											<radialGradient cx="56.15%" cy="27.43%" fx="56.15%" fy="27.43%" r="57.526%" gradientTransform="matrix(.5626 -.82673 .8022 .54591 .026 .589)"
											 id="ball-5-a">
												<stop stop-color="#F8F7FF" offset="0%" />
												<stop stop-color="#DAD8FF" offset="34.827%" />
												<stop stop-color="#9B95F3" offset="100%" />
											</radialGradient>
											<filter x="-500%" y="-500%" width="1000%" height="1000%" filterUnits="objectBoundingBox" id="dropshadow-ball-5">
												<feOffset dx="24" dy="24" in="SourceAlpha" result="shadowOffsetOuter" />
												<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter" result="shadowBlurOuter" />
												<feColorMatrix values="0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.22 0" in="shadowBlurOuter" />
											</filter>
										</defs>
										<circle cx="12" cy="12" r="12" fill="#FFF" fill-rule="evenodd" style="filter:url(#dropshadow-ball-5)" />
										<circle cx="12" cy="12" r="12" fill="url(#ball-5-a)" fill-rule="evenodd" />
									</svg>
								</div>
							</div>
						</div>
					</div>
				</section>
			</main>

			<footer class="site-footer text-light">
				<div class="container">
					<div class="site-footer-inner">
						<ul class="footer-links list-reset">
							<li>
								<a href="http://www.songjiale.com"  target="_blank">宋佳乐博客</a>
							</li>
						</ul>
						<div class="footer-copyright">&copy; © 2022 宋佳乐 [ 2022博客 ] Cpyright © 2015-2022, 宋佳乐. All Rights Reserved <a href="http://www.songjiale.com/xcx/api" target="_blank" title="博客"></a></div>



			</footer>
		</div>

		<script src="dist/js/main.min.js"></script>
		<script src="dist/js/jszip.min.js"></script>
		<script src="dist/js/FileSaver.js"></script>
		<script src="dist/js/JCompressor.js"></script>
		<script>
			document.getElementById("fileinput").addEventListener("change", inputchange)

			function inputchange(_this) {
				var _this = this;
				var quality = document.getElementById("quality").value;
				var maxWidth = document.getElementById("maxwidth").value;
				var loadingDom = document.getElementById("loading");
				JCompressor(_this, {
					Quality: Number(quality),
					MaxWidth: Number(maxWidth),
					PreviewContainer: "imgbox",
					FileLoad: function(filedata) {
						_this.value = "";
					},
					NeedDownload: true,
					DownloadLoad: function(nextfn) {
						var btnDom = document.getElementById("downloadBtn");
						btnDom.style.color = "white";
						btnDom.style.borderColor = "#6a62f0";
						btnDom.style.backgroundColor = "#6a62f0";
						btnDom.onclick = function() {
							nextfn();
							btnDom.onclick = null;
							btnDom.style.color = "";
							btnDom.style.borderColor = "";
						}
					},
					ChangeBefore: function() {
						loadingDom.innerHTML = "处理中······";
					},
					ChangeAfter: function() {
						loadingDom.innerHTML = "";
					}
				})
			}
		</script>
	</body>
</html>

插件下载链接：https://pan.baidu.com/s/14GJ3BBkt5f2dY9yNPdUUmQ?pwd=u1b2
提取码：u1b2

宋佳乐
关注
专栏目录
网页设计Dreamweaver插入图片详细步骤解析.pdf
10-07
而“OK-***”则可能是一个超链接代码的一部分，用于将图片链接到某个网页地址。 需要注意的是，在使用Dreamweaver进行网页设计时，应当遵循网页设计的最佳实践，比如使用压缩过的图片以减小文件大小，提高网页加载...
PHP获取URL后缀（PHP获取当前URL中的参数值）
宋佳乐旗下博客
12-20 420
下面就针对CodeIgniter框架去掉url中的index.php来具体说说步骤：加载mod_rewrite.so模块，在httpd.conf中，将“LoadModule rewrite_module modules/mod_rewrite.so”前面的“#”去掉 开启url重写功能。网页后缀php有什么含义URL后缀名为“php”网页，而一般后缀名为“php”的文件都是PHP程序脚本文件，所以说网页URL后缀为“php”的网站，说明这个网站程序是由PHP这个语言写的。
HTML源码一个好看的音乐外链搜索程序带评论功能解析歌曲外链
宋佳乐旗下博客
12-23 550
一个二次开发的某够音乐搜索页面，HTML+PHP共同使用。实现提取歌曲外链直链，在线试听下载等功能。如有侵权请联系博主删除。
钟于 忠于 衷于 终于 ​​​ 【宋佳乐丨郭晓婷】官方博客发布
宋佳乐旗下博客
12-17 435
钟于 忠于 衷于 终于 ​​​
HTML纯代码实现H5软件自适应下载发布页面源码
宋佳乐旗下博客
01-06 713
实现纯代码无CSS布局直接实现自适应软件下载h5页面源码二次开源给大家共享。可以作为软件发布页面，有需要的小伙伴快来下载。
超好用的一款工具盒子实时共享全网免费API接口站长必备
宋佳乐旗下博客
12-11 123
共享全网免费API在线接口，自动生成适用于各平台端的嵌入代码。
六张彩色多边形PPT背景图片.zip
07-16
1. 解压缩文件，将JPG图片保存到本地。 2. 打开PowerPoint，创建或打开需要编辑的演示文稿。 3. 在新幻灯片或已有的幻灯片上，点击“设计”选项卡，选择“背景样式”，然后点击“填充”下的“图片或纹理填充”。 4. ...
三张创意水彩墨迹PPT背景图片.zip
07-15
对于需要制作高质量PPT的人来说，这样的网站是宝贵的参考资料库，可以获取到各种类型的背景图片、模板以及设计灵感。 至于"www.1ppt.com.html"，这可能是网站的主页面HTML文件，用户可以直接在本地浏览器中打开，...
一个功能强大的网页编辑器
01-25
文件上传功能则让用户能够将本地文件如图片、文档、视频等上传至服务器，并嵌入到网页中，增加了内容的多样性和互动性。 标签“网页在线编辑器”进一步明确了该编辑器的主要应用场景，它主要应用于需要用户直接在...
用HTML怎么写一个图片框来读取外链图片-宋佳乐博客
宋佳乐旗下博客
12-19 431
标签用于嵌入图片，src 属性指定了图片的链接地址，alt 属性用于提供图片的替代文本描述（当图片无法加载时显示）。你可以将 “https://example.com/image.jpg” 替换为你想要嵌入的实际图片链接。请确保你有合法的权限来使用和嵌入外部图片。此外，一些网站可能会实施限制或防止图片的外部链接，请确保你遵守相关的法律和政策。标签来嵌入外部链接的图片。在 HTML 中，你可以使用。
使用这三个HTML缩小工具削减文件大小
最新发布
m0_75280563的博客
04-14 1588
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
宋佳乐博客全站正版PHP源码下载丨自助建站源码丨音乐外链源码丨最新图床源码丨官方网站源码丨网页跳转源码丨云相册源码丨打包下载
宋佳乐旗下博客
12-24 1103
四：宋佳乐123自助建站系统演示地址：http://ssl.songjiale.com/%E5%BB%BA%E7%AB%99.PHP （演示图如下）五：音乐外链系统演示地址：http://ssl.songjiale.com/yinyue.php （演示图如下）六：图床系统演示地址：http://ssl.songjiale.com/tupian.php （演示图如下）演示网址：http://ssl.songjiale.com/苏小苏-登录/index.html。首页访问地址：域名/tupian.php。
在HTML中怎么读取其他网页中指定的文字-宋佳乐博客
宋佳乐旗下博客
12-19 462
请注意，嵌入其他网页的内容可能涉及到版权和法律问题，请确保你有合法的权限来嵌入该网页内容。另外，一些网站可能会实施反嵌入措施来防止其内容被嵌入到其他网站中，因此在实际使用中可能会遇到一些限制。在上面的代码中， 标签用于嵌入其他网页的内容，src 属性指定了要嵌入的网页的 URL，width 和 height 属性用于设置嵌入内容的宽度和高度。的 src 属性，你可以指定要嵌入的网页的 URL。在 HTML 中，你可以使用 标签来嵌入其他网页的内容。
前端将页面转换为图片保存至本地（html2canvas）
LFQP_的博客
02-14 1699
前端将页面转换为图片保存至本地（html2canvas）
宋佳乐郭晓婷美照再现IT博客平台
宋佳乐旗下博客
03-11 577
径直朝着那个位置走去，却看到了你，我就愣在那儿停顿了好久，然后你转过头来看到了我，你朝我笑，我鼓起勇气试着向你走近，却始终走不到那个位置，眼睁睁地看着你近在咫尺，却偏偏难以靠近，最后直到你消失不见。 我猛然醒来，睁眼，漆黑，宁静，我放空了几秒，然后才终于认清你已经离开我的事实。是啊，已经离开了。 都说，梦中梦到的人，是因为心底觉得离得好远，所以我才会想要在梦中再见见你，可是，在梦中你也离得我好...
html+js将文本和图片保存（下载）到本地技术
热门推荐
cnds123的专栏
01-01 1万+
本文介绍html+js将文本和图片保存（下载）到本地技术，先介绍html+js将文本内容保存到本地文件，再介绍html+js将图片内容保存到本地文件。
电视家停播风波：媒体变革与观众反响
宋佳乐旗下博客
12-18 405
在互联网的迅猛发展下，人们获取信息和娱乐的方式发生了翻天覆地的变化。然而，随着网络的便捷和智能设备的普及，尤其是智能手机和电脑的广泛应用，人们可以随时随地选择自己感兴趣的内容观看，这极大地丰富了观众的选择，也导致了电视观众的流失。尽管电视家承诺对于会员用户的费用将进行退款，但由于用户数量众多，退款的处理需要时间，这也引发了公众对于如何合法、便捷地观看电视节目的讨论。但电视家存在的问题是，它通过非法手段获取了IPTV等正版网络信号源，并在直播内容中插入广告，这使其陷入了版权和合规的问题。
在HTML中如何加入外链视频自动播放
宋佳乐旗下博客
12-19 2109
在上面的代码中，标签用于嵌入视频，src属性指定了视频的链接，controls属性允许用户控制视频的播放，autoplay属性让视频可以自动播放。你可以根据需要调整视频的高度和宽度，以及其他相关属性。请注意，外链视频的自动播放可能会受到一些因素的影响，例如网络延迟、浏览器设置等。因此，在实际应用中，你可能需要根据具体情况进行调整和测试。在HTML中，你可以使用标签来嵌入外链视频，并通过设置autoplay属性来实现视频的自动播放。
C#实现无损高质量图片压缩算法
"C#无损高质量压缩图片的实现代码" 在C#中，无损高质量压缩图片是一项关键任务，特别是在处理大量图像数据或者优化网站性能时。传统的图像压缩方法可能会牺牲图像的质量来减小文件大小，而无损压缩则旨在在不降低...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宋佳乐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值