html 文件系统(五)

js生成缩略图,并下载。

照例还是上demo。
大家再server上跑下就可以看到效果。

<script>
/**
 * 
 * 按比例生成缩略图。
 * 可自行修改比例
 */
function generateThumbnail(original, scale) {
	var canvas = document.createElement("canvas")
	canvas.width = original.width * scale
	canvas.height = original.height * scale
	canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height);
	document.body.appendChild(canvas)
	return canvas.toDataURL("image/png");
}

function download(url, downloadName) {
	var a = document.createElement("a");
	a.href = url;
	a.download = downloadName;
	a.click();
}

function process() {
	var image = document.getElementsByTagName("img")[0];
	download(generateThumbnail(image, 1/5), "a.jpg");
}
</script>

<img src="Chrysanthemum.jpg" onclick="process();">
</img>


猜你喜欢

转载自blog.csdn.net/myliveisend/article/details/20365653