### Canvas与图片压缩的知识点详解
#### Canvas的基本概念
Canvas是HTML5中一种新的元素，它提供了一块画布（canvas）供脚本语言（通常为JavaScript）进行图形操作。它允许开发者通过JavaScript中的API在网页上绘制图形、图表、照片等。利用Canvas进行图片压缩，是把图片绘制在画布上，然后通过调整画布的大小或者编码质量来实现对图片大小的控制。
#### Canvas的创建和使用
在HTML中使用`<canvas>`标签来创建Canvas元素，并通过JavaScript的API操作它。`getContext('2d')`方法是获取画布的二维渲染上下文，它是用来绘制2D图形的接口。
```javascript
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
```
#### 获取本地图片
使用HTML的`<input type="file">`标签可以提供一个文件输入控件，让访问者可以选择本地文件。通过JavaScript的`change`事件监听器来读取文件。
```html
<input type="file" id="choose-img" />
```
```javascript
var chooseImg = document.getElementById("choose-img");
chooseImg.onchange = function(e) {
var file = this.files[0];
// ...
};
```
#### 判断文件类型
通过`file.type`属性可以得到文件的MIME类型，这可以帮助我们验证用户选择的文件是否为图片。
```javascript
if(/image/.test(file.type)) {
// ...
} else {
result.innerHTML = '<span style="color:red;">文件类型有误！</span>';
}
```
#### 文件以Base64格式输出
`FileReader`对象的`readAsDataURL()`方法可以把文件读取为Data URL格式，这是一种将文件编码为URL的方案。这是一种简便的方式来处理图片。
```javascript
reader.readAsDataURL(file);
reader.onload = function() {
img.src = this.result;
document.body.insertBefore(img, chooseImg);
// ...
};
```
#### Canvas中绘制图片
创建一个Canvas元素，并设置其宽度和高度与图片相匹配。然后通过`drawImage`方法将图片绘制到画布上。
```javascript
var canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
```
#### 图片压缩
通过调整Canvas的`width`和`height`属性来减小图片的尺寸，也可以通过`toDataURL`方法来指定图片的输出质量，通过调整第二个参数来控制压缩比率。
```javascript
var rate = document.getElementById("rate").value || 100;
var imgUrl = canvas.toDataURL(file.type, rate / 100);
```
#### 画布的其他操作
虽然示例中没有详细说明，但Canvas还提供了丰富的绘图功能，比如可以设置背景色、绘制线条、图形、文字、使用各种样式和变换等。
#### 完整的图片压缩流程
1. 用户选择一张图片。
2. 程序判断图片类型是否正确。
3. 如果类型正确，将图片读取为Base64格式，并显示在页面上。
4. 创建一个与图片尺寸相同的Canvas画布，并在其中绘制图片。
5. 用户输入压缩比率，程序将图片按指定比率压缩。
6. 压缩后的图片以新格式输出，并在页面上显示。
#### 注意事项
Canvas压缩图片是一个有效的方法，但需要注意，压缩可能会导致图片质量的损失。在实际应用中，需要找到压缩和质量之间的平衡点。另外，对于大尺寸的图片，这个过程可能会消耗较多的内存和CPU资源，应该在服务器端处理更为适宜。
Canvas提供了强大的API来进行图片的处理和压缩，是前端开发中不可多得的图形处理工具。掌握Canvas的相关操作，对于提升网页的交互性和用户体验具有重要意义。
