在探讨如何使用canvas进行图片压缩之前，我们需要了解canvas是什么以及它如何工作。Canvas是一种在网页上绘制图形的HTML5元素，它能够让我们在网页中通过JavaScript实现丰富的图形和动画效果。通过JavaScript的Canvas API，我们可以直接操作像素级的内容，进而实现对图片的压缩。
### Canvas基础知识
在HTML中，一个`<canvas>`元素就是一个画布，它可以包含多种绘制图形的命令。对应的Canvas的JavaScript上下文环境（我们称之为Canvas 2D Context），提供了大量用于绘制图形的方法。
### 图片压缩原理
图片压缩是减少图片文件大小的过程，而在这个过程中我们希望尽量减少图片质量的损失。实现图片压缩，我们可以从调整图片的尺寸、改变图片的分辨率以及调整图片的编码质量这几个方面来入手。而在本例中，我们将通过调整图片尺寸来实现压缩。
### 示例代码解析
示例代码中，我们首先通过`<input type="file">`让用户提供要上传的图片。当用户选择了文件后，`onchange`事件被触发，然后我们通过`loadImg`函数处理这个文件。
```javascript
function loadImg(me) {
let img = document.querySelector('img');
let cvs = document.querySelector('canvas');
let file = me.files[0]; // 获取到文件对象
// ...
}
```
接下来，我们检查图片文件的大小。如果图片大于500KB，我们将使用`FileReader`对象将图片读取为Base64编码。
```javascript
if(file && (file.size / 1024 > 500)) {
let reader = new FileReader();
reader.readAsDataURL(file); // 转成base64编码
reader.onload = function(e) {
let naturalBase64 = e.target.result; // 获取base64编码，这是原图的
img.src = naturalBase64;
img.onload = function() {
let ratio = img.naturalWidth / img.naturalHeight; // 获取原图比例，为了等比压缩
cvs.width = 400;
cvs.height = cvs.width / ratio;
let ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // 画在canvas上
// 压缩后新图的base64
let zipBase64 = cvs.toDataURL();
}
}
}
```
在这段代码中，我们通过`drawImage`方法将图片绘制到canvas上。注意`drawImage`的参数，它定义了图片在canvas上的位置以及显示的尺寸。我们通过设置canvas的宽度，并保持图片的原始宽高比来实现图片的压缩。
`toDataURL`方法被用来获取压缩后的图片的Base64编码。这是canvas提供的一个便捷方法，它可以将画布中的内容转换为图片。
### 计算Base64编码大小
示例代码中也提供了一个计算Base64编码大小的函数`calcBase`。Base64编码的大小计算公式涉及到编码字符串的长度和编码后实际数据的大小。这个函数能够帮助我们了解压缩前后的数据量差异。
```javascript
function calcBase(baseStr) {
var tag = 'base64,';
baseStr = baseStr.substring(baseStr.indexOf(tag) + tag.length);
var eqTagIndex = baseStr.indexOf('=');
baseStr = eqTagIndex != -1 ? baseStr.substring(0, eqTagIndex) : baseStr;
var strLen = baseStr.length;
var fileSize = strLen - (strLen / 8) * 2;
console.log("文件大小:" + (fileSize / 1024).toFixed(1) + 'KB');
}
```
### 结论
本文示例向我们展示如何利用HTML5的Canvas元素和JavaScript来实现图片的压缩处理。通过调整图片尺寸，我们可以降低图片的文件大小，便于在需要将图片转为Base64格式后进行网络传输。这在移动应用开发中尤其有用，例如在进行身份证等重要文件上传的场景下，它能够减少传输数据量，加快传输速度，提升用户体验。同时，本文也提供了计算Base64编码文件大小的方法，帮助开发者了解压缩效果。对于需要进一步优化图片质量的场景，可以结合调整编码质量和分辨率，以达到最佳的压缩效果和图片质量平衡。
