实际问题：
在JavaScript中，可以使用HTML5的Canvas元素以及相关的API来实现图片等比例缩放成特定像素。如何在JavaScript中将上传的图片等比例缩放成特定像素？
1.canvas元素来缩放图片：
<!DOCTYPE html><html><head><title>图片等比例缩放示例</title></head><body><input type="file" id="uploadImage" accept="image/*"><canvas id="canvas"></canvas><script>const inputElement = document.getElementById("uploadImage");const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");inputElement.addEventListener("change", handleFileUpload);function handleFileUpload(event) {const file = event.target.files[0];const img = new Image();img.onload = function() {// 计算缩放后的宽度和高度const width = 200; // 目标宽度，这里设置为200像素const height = img.height * (width / img.width);// 设置canvas的宽度和高度canvas.width = width;canvas.height = height;// 在canvas上绘制等比例缩放后的图片ctx.drawImage(img, 0, 0, width, height);// 将缩放后的图片转换为DataURLconst dataURL = canvas.toDataURL("image/jpeg");// 显示缩放后的图片const imageElement = document.createElement("img");imageElement.src = dataURL;document.body.appendChild(imageElement);};// 读取上传的图片文件并设置img的src属性const reader = new FileReader();reader.onload = function(e) {img.src = e.target.result;};reader.readAsDataURL(file);}</script></body></html>
2.JavaScript原生方法：
<!DOCTYPE html><html><head><title>图片预览</title><style>#preview {width: 200px;height: 200px;border: 1px solid #ccc;display: flex;align-items: center;justify-content: center;}#preview img {max-width: 100%;max-height: 100%;object-fit: contain;}</style></head><body><h1>图片上传预览</h1><input type="file" id="upload" accept="image/*"><div id="preview"></div><script>window.addEventListener('DOMContentLoaded', function () {var uploadInput = document.getElementById('upload');var preview = document.getElementById('preview');uploadInput.addEventListener('change', function (event) {var file = event.target.files[0];var reader = new FileReader();reader.onload = function (e) {var imgUrl = e.target.result;var img = document.createElement('img');img.onload = function () {var ratio = img.width / img.height;var width, height;if (ratio > 1) {width = 200;height = 200 / ratio;} else {width = 200 * ratio;height = 200;}img.style.width = width + 'px';img.style.height = height + 'px';console.log(img)preview.innerHTML = '';preview.appendChild(img);};img.src = imgUrl;};reader.readAsDataURL(file);});});</script></body></html>
如果是为了大图片文件的像素修改特定像素上传到服务器，用以下方法：
<input type="file" id="upload" accept="image/*"><canvas id="preview" style="display:none;"></canvas><script>// JavaScript部分document.getElementById('upload').addEventListener('change', function(event) {var file = event.target.files[0];var reader = new FileReader();reader.onload = function(event) {var img = new Image();img.onload = function() {var canvas = document.getElementById('preview');var ctx = canvas.getContext('2d');var maxWidth = 300;var maxHeight = 100;var width = img.width;var height = img.height;// 计算缩放比例var scale = Math.min(maxWidth / width, maxHeight / height);// 根据比例计算新的宽度和高度var newWidth = width * scale;var newHeight = height * scale;// 设置canvas尺寸canvas.width = newWidth;canvas.height = newHeight;// 绘制图片到canvasctx.drawImage(img, 0, 0, newWidth, newHeight);// 获取缩放后的图片数据var resizedImageDataURL = canvas.toDataURL('image/jpeg');// 在此处添加上传代码，将resizedImageDataURL上传到服务器// 在此处添加预览代码，将resizedImageDataURL显示在页面上var previewImg = document.createElement('img');previewImg.src = resizedImageDataURL;document.body.appendChild(previewImg);};img.src = event.target.result;};reader.readAsDataURL(file);});</script>
如果觉得《js 上传图片等比例缩放》对你有帮助，请点赞、收藏，并留下你的观点哦！
