js 上传图片等比例缩放

Adelbert 1002@

已于 2023-09-04 16:12:00 修改

阅读量992

点赞数 1

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2023-09-04 15:27:00 首次发布

本文链接：https://blog.csdn.net/qq_40946635/article/details/132669867

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实际问题：

在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);
        // 将缩放后的图片转换为DataURL
        const 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;
      
      // 绘制图片到canvas
      ctx.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>