JS操作图片的核心是dom和canvas API。通过修改img标签的src属性可切换图片；设置width和height属性调整显示尺寸；利用onload和onerror事件监听加载状态并处理异常；使用Canvas进行像素级操作，如通过drawImage实现裁剪，getImageData和putImageData应用滤镜；结合FileReader读取文件并用readAsDataURL预览上传图片；利用canvas的toDataURL方法压缩图片，通过调节quality参数控制JPEG格式图片质量，实现前端图片压缩。
JS操作图片，核心在于利用DOM API和Canvas API。前者让你能控制html中的
<img alt="JS如何操作图片" >
标签，后者则提供了更强大的像素级别的操作能力。
解决方案
JS操作图片主要涉及以下几个方面：
-
改变图片源 (src)：这是最基本的操作，通过修改
<img alt="JS如何操作图片" >
标签的
src
属性来实现图片的切换或加载。
let imgElement = document.getElementById('myImage'); imgElement.src = 'new_image.jpg'; -
调整图片尺寸：可以通过设置
<img alt="JS如何操作图片" >
标签的
width
和
height
属性来改变图片的显示大小。
imgElement.width = 200; // 宽度设置为200像素 imgElement.height = 150; // 高度设置为150像素
-
使用Canvas进行高级操作：Canvas提供了像素级别的操作，可以实现图片裁剪、滤镜、旋转等高级功能。
let canvas = document.getElementById('myCanvas'); let ctx = canvas.getContext('2d'); let image = new Image(); image.onload = function() { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); // 例如：应用灰度滤镜 let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); let data = imageData.data; for (let i = 0; i < data.length; i += 4) { let avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; data[i + 1] = avg; data[i + 2] = avg; } ctx.putImageData(imageData, 0, 0); }; image.src = 'my_image.jpg'; -
监听图片加载事件：
<img alt="JS如何操作图片" >
标签的
onload
事件会在图片加载完成后触发，可以利用这个事件来执行一些操作，例如调整图片大小、添加动画效果等。
imgElement.onload = function() { console.log('图片加载完成'); // 在这里执行一些操作 }; -
处理图片错误：
<img alt="JS如何操作图片" >
标签的
onerror
事件会在图片加载失败时触发，可以利用这个事件来显示一个默认图片或提示用户。
imgElement.onerror = function() { console.log('图片加载失败'); imgElement.src = 'default_image.jpg'; // 显示默认图片 };
如何使用JS实现图片的裁剪功能？
利用Canvas可以实现图片的裁剪。首先，将图片绘制到Canvas上，然后使用
drawImage()
方法的其他参数来指定裁剪区域。
let canvas = document.getElementById('myCanvas'); let ctx = canvas.getContext('2d'); let image = new Image(); image.onload = function() { // 裁剪区域：(sx, sy, sWidth, sHeight) let sx = 50; // 裁剪起始X坐标 let sy = 50; // 裁剪起始Y坐标 let sWidth = 100; // 裁剪宽度 let sHeight = 100; // 裁剪高度 // 目标区域：(dx, dy, dWidth, dHeight) let dx = 0; // 绘制起始X坐标 let dy = 0; // 绘制起始Y坐标 let dWidth = 100; // 绘制宽度 let dHeight = 100; // 绘制高度 canvas.width = dWidth; canvas.height = dHeight; ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); }; image.src = 'my_image.jpg';
这段代码会将
my_image.jpg
中从(50, 50)开始，宽高为100×100的区域裁剪出来，并绘制到Canvas上。
JS如何实现图片上传前的预览？
图片上传前的预览功能通常使用
FileReader
API来实现。 首先监听
<input type="file">
元素的
change
事件，当用户选择文件后，读取文件内容并将其显示在
<img alt="JS如何操作图片" >
标签中。
<input type="file" id="fileInput"> <img id="previewImage" src="#" alt="预览图片" style="max-width:90%"> <script> let fileInput = document.getElementById('fileInput'); let previewImage = document.getElementById('previewImage'); fileInput.addEventListener('change', function(e) { let file = e.target.files[0]; if (file) { let reader = new FileReader(); reader.onload = function(e) { previewImage.src = e.target.result; previewImage.style.display = 'block'; // 显示图片 } reader.readAsDataURL(file); // 读取文件内容 } else { previewImage.src = '#'; previewImage.style.display = 'none'; // 隐藏图片 } }); </script>
这段代码中，
readAsDataURL()
方法会将文件读取为Base64编码的字符串，然后将其设置为
<img alt="JS如何操作图片" >
标签的
src
属性，从而实现图片的预览。
如何使用JS实现图片的压缩？
图片的压缩也可以使用Canvas API来实现。 首先将图片绘制到Canvas上，然后使用
toDataURL()
方法将Canvas内容转换为Data URL，并指定压缩质量。
let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); let image = new Image(); image.onload = function() { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); // 压缩质量：0.0 ~ 1.0，值越小压缩率越高 let quality = 0.7; let compressedDataURL = canvas.toDataURL('image/jpeg', quality); // compressedDataURL 就是压缩后的Data URL console.log('压缩后的Data URL:', compressedDataURL); // 可以将 compressedDataURL 发送到服务器 }; image.src = 'my_image.jpg';
toDataURL()
方法的第二个参数是压缩质量，取值范围为0.0到1.0，值越小压缩率越高，图片质量越低。 注意，这种方法只适用于JPEG格式的图片。 对于PNG格式的图片，压缩效果可能不明显。
