图片压缩 + 自动居中裁剪

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1632
发帖：72 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/12/21 22:25:57

[ 第 1 楼 ]

<!doctype html><html lang="zh"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML模板</title>
<style type="text/css">
body{ margin: 0mm }
</style></head><body>
<input value="321" size="4" /> x <input value="210" size="4" />
<input type="button" value="裁剪图片" onclick="chooseFile()" /><br />
<script type="text/javascript">
function chooseFile() {
	var ipt = document.querySelectorAll("input");
	upImg(src => {
		document.body.appendChild(new Image).src = src;
	}, ipt[0].value, ipt[1].value);
}

function upImg(func, tw, th) {
	var p = document.createElement("p");
	p.innerHTML = "<input type=file multiple />";
	p.lastChild.onchange = function() { runGen(upAll(this.files)); };

function* upAll(files) {
		for(var x of files) {
			var file = yield* scaleImage(x);
			// yield uploadFile(file);
			func(URL.createObjectURL(file));
		}
	}

// 自动压缩图片
	function* scaleImage(file) {
		if(file.type.substr(0, 5).toLowerCase() != "image") return file;
		var img = new Image;
		var [ sw, sh ] = yield ok => {
			img.onerror = () => ok([ 0, 0 ]);
			img.onload = () => ok([ img.width, img.height ]);
			img.src = URL.createObjectURL(file);
		};
		if(!tw) tw = 1000;
		// 源宽度低于目标宽度，跳过压缩
		if(sw <= tw) return file;
		if(!th) th = tw * sh / sw;

var ss = img.width / img.height;
		var ts = tw / th;

var cvs = document.createElement("canvas");
		cvs.width = tw; cvs.height = th;
		var ctx = cvs.getContext("2d");

// 计算裁剪区域
		var rect = [ 0, 0, img.width, img.height ];
		if(ss > ts) {
			// 原图更宽
			rect[2] = img.width * ts / ss;
			rect[0] += (img.width - rect[2]) / 2;
		}
		else {
			// 原图更高
			rect[3] = img.height * ss / ts;
			rect[1] += (img.height - rect[3]) / 2;
		}

ctx.drawImage( img, ...rect, 0, 0, tw, th );

var bin = yield ok => cvs.toBlob(ok, file.type, 0.7);
		return new File([ bin ], file.name, { type: file.type });
	}

p.lastChild.click();
}

function runGen(gen, func, arg) {
	var res = gen.next(arg);
	if(res.done) return func && func(res.value);
	if("function" != typeof res.value) return runGen(gen, func, res.value);
	res.value(x => runGen(gen, func, x));
}
</script></body></html>

[您可以先修改代码再运行]

2023/9/27 22:33:22

IP：已设置保密