js canvas拼图及压缩

最新推荐文章于 2024-07-15 16:32:01 发布

_freely

最新推荐文章于 2024-07-15 16:32:01 发布

阅读量340

点赞数

分类专栏： canvas js 文章标签： javascript html canvas

本文链接：https://blog.csdn.net/hbjiankely/article/details/119919702

版权

js 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

canvas

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript和HTML5的canvas API，将四张1920*1080的图片高效地拼接成一个宽度为7680像素、高度为1080像素的图像，同时探讨了图片压缩和下载的方法，包括Base64编码、JPEG质量调整及文件大小计算。

摘要由CSDN通过智能技术生成

使用canvas拼图

将多张图片绘制在canvas上

图片尺寸: 1920 * 1080 拼4张图 canvas: width = 1920 * 4 height = 1080

<canvas id="myCanvas" width="7680" height="1080"></canvas>
let canv = document.getElementById('myCanvas');
let ctx = canv.getContext('2d');
let imgSrc = [
		'http://beijing.aliyuncs.com/feature/20210825/0436a7fde9021c4703f1926a187962f3.jpg',
		'http://beijing.aliyuncs.com/feature/20210825/ca4ff6b4958d26345331850041e5f4bb.jpg',
		'http://beijing.aliyuncs.com/feature/20210825/d5a96cec96c8fe903a862e1d95597b26.jpg',
		'http://beijing.aliyuncs.com/feature/20210825/84f0d453b34030fc5234a7e1d09e5ea9.jpg'
]
var image = new Image();
image.crossOrigin = '';
let i = 0;
// onload方法是异步的，这里使用递归解决图片资源异步加载的问题
function fn(i) {
	if (i < imgSrc.length) {
		image.onload = function() {
			ctx.drawImage(image, i * 1920, 0);
			i++;
			fn(i);
		}
		image.src = imgSrc[i];
	}
}
fn(i);

效果图

在这里插入图片描述

获取图片的base64

// 由于onload异步加载图片资源，需要等到图片全部加载完成
// 使用promise处理异步问题
let p = new Promise((resolve) => {
	function fn(i) {
		if (i < imgSrc.length) {
			image.onload = function() {
				ctx.drawImage(image, i * 1920, 0);
				i++;
				fn(i);
			}
			image.src = imgSrc[i];
		} else {
			resolve();
		}
	}
	fn(i);
})
p.then(() => {
	let src1 = canv.toDataURL("image/jpeg");
	// 计算图片大小
	let strLength = src1.length;
	let fileLength = strLength - (strLength / 8) * 2;
	console.log((fileLength / 1024).toFixed(2)) // 944.47KB
});

图片压缩

// toDataURL第二个参数可以传入图片质量 0.1~1，通过此参数可以进行图片压缩
	canv.toDataURL("image/jpeg", 0.6);

image/jpeg类型，传入第二个参数可以进行压缩
image/png 类型，传入第二个参数无效，变通方法，改变绘制大小

<canvas id="canvas1" width="3840" height="540"></canvas>
let cv1 = document.getElementById('canvas1').getContext('2d');
let img = new Image();
img.onload = function() {
	// 第四个参数，第五个参数缩小一倍
	cv1.drawImage(img, 0, 0, 3840, 540);
	let href = document.getElementById('canvas1').toDataURL('image/png');
}
img.src = src1;

图片下载

let href = document.getElementById('canvas1').toDataURL('image/jpeg');
let linka = document.createElement('a');
linka.href = href;
linka.download = '拼图';
linka.click();
window.URL.revokeObjectURL(href);