Canvas与图片压缩的示例代码

### 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的相关操作，对于提升网页的交互性和用户体验具有重要意义。