JS实现HTML图片到Canvas压缩上传

"JS HTML图片显示Canvas压缩功能" 这篇资源主要讲解了如何使用JavaScript（JS）和HTML结合Canvas实现图片的显示和压缩功能。对于前端开发来说，这是一个常见的需求，特别是在用户上传图片时，为了优化加载速度和节省服务器存储空间，通常会需要对图片进行压缩。 一、选择图片并显示 在HTML部分，我们看到一个`<input>`标签，类型为`file`，允许用户选择图片。当用户选择图片后，`onchange`事件触发`showImg`函数。这个函数首先获取用户选择的文件，然后创建一个新的`Image`对象，并设置其宽度为100像素。如果浏览器支持`window.URL.createObjectURL`方法（大部分现代浏览器都支持），则使用这个方法创建一个临时的URL来显示图片；如果不支持，如旧版Opera浏览器，就使用`FileReader`对象的`readAsDataURL`方法读取图片数据，并在加载完成后将图片插入到页面中。 二、使用canvas代码 Canvas是HTML5的一个重要特性，可以用于绘制图形和处理图像。在第二部分，虽然没有给出完整的代码，但我们可以推断接下来的步骤是利用Canvas进行图片的压缩。首先，我们需要创建一个`<canvas>`元素，并获取其`2D`绘图上下文。然后，我们可以将图片对象作为源，绘制到Canvas上，通过调整Canvas的宽度和高度来实现图片的等比例缩放。最后，使用`canvas.toDataURL`方法将Canvas的内容转换回一个data URL，这个URL表示的是压缩后的图片数据。 三、图片压缩 在Canvas上绘制图片后，可以通过调整Canvas的尺寸来压缩图片。例如，如果我们想要将图片压缩到原来的一半大小，可以先设置Canvas的宽度和高度为原图片的一半，然后再绘制图片。这样，即使图片数据不变，由于Canvas的尺寸减小，导出的data URL也会包含更小的图像数据，从而达到压缩效果。 四、考虑兼容性 在实际应用中，还需要考虑不同浏览器的兼容性问题。例如，某些老版本的浏览器可能不支持`createObjectURL`或`toDataURL`方法，这时需要使用`FileReader`的`readAsDataURL`来代替。同时，对于那些不支持`canvas`的浏览器，可能需要提供备选方案，如使用传统的图片上传方式。 总结，这个资源介绍了如何利用JavaScript和HTML的Canvas元素实现图片的显示和压缩功能，这对于前端开发者来说是非常实用的技能。通过选择图片、显示图片、使用Canvas进行等比例缩放以及处理兼容性问题，可以实现一个基本的图片压缩上传功能。在实际项目中，还可以进一步优化，比如添加错误处理、调整压缩质量、支持多张图片上传等功能。