脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 前端canvas图片等比例缩放

前端如何用canvas实现图片的等比例缩放

 更新时间：2024年11月28日 08:26:11   作者：鹤鸣的日常  
这篇文章主要介绍了如何使用HTML和JavaScript加载、读取、缩放和绘制图片到canvas上的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Image Resize</title>
</head>

<body>
    <input type="file" id="imageInput" accept="image/*">
    <div>
        <canvas id="canvasOriginal" style="border:1px solid #000;"></canvas>
        <canvas id="canvasResized" style="border:1px solid #000;"></canvas>
    </div>
    <script src="script.js"></script>
</body>

</html>

JavaScript代码

document.getElementById('imageInput').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
            const img = new Image();
            img.onload = function () {
                const originalCanvas = document.getElementById('canvasOriginal');
                const resizedCanvas = document.getElementById('canvasResized');
                const ctxOriginal = originalCanvas.getContext('2d');
                const ctxResized = resizedCanvas.getContext('2d');
                const originalWidth = img.width;
                const originalHeight = img.height;
                let width, height, scale;

                // 设置原始图片canvas尺寸
                originalCanvas.width = originalWidth;
                originalCanvas.height = originalHeight;
                // 绘制原始图片
                ctxOriginal.drawImage(img, 0, 0, originalWidth, originalHeight);

                // 计算缩放比例
                if (Math.max(originalWidth, originalHeight) > 1080) {
                    scale = 1080 / Math.max(originalWidth, originalHeight);
                } else {
                    scale = 1;
                }

                // 计算缩放后的尺寸
                width = originalWidth * scale;
                height = originalHeight * scale;

                // 设置缩放后的图片canvas尺寸
                resizedCanvas.width = width;
                resizedCanvas.height = height;
                // 绘制缩放后的图片
                ctxResized.drawImage(img, 0, 0, width, height);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

代码解释

1.加载图片： 使用  FileReader 读取用户选择的图片文件。

const reader = new FileReader();
reader.onload = function (e) {
    const img = new Image();
    img.onload = function () {
    
        // 处理代码逻辑        

    };
    img.src = e.target.result;
};
reader.readAsDataURL(file);

2.获取图片原始尺寸： 获取图片的原始宽度和高度。

const originalWidth = img.width;
const originalHeight = img.height;

3.计算缩放比例： 根据目标容器的尺寸和图片的原始尺寸计算缩放比例。

let width, height, scale;

if (Math.max(originalWidth, originalHeight) > 1080) {
    scale = 1080 / Math.max(originalWidth, originalHeight);
} else {
    scale = 1;
}

width = originalWidth * scale;
height = originalHeight * scale;

4.计算新的尺寸： 根据缩放比例计算新的宽度和高度。

const resizedWidth = originalWidth * scale;
const resizedHeight = originalHeight * scale;

5. 绘制图片： 使用drawImage方法绘制图片到canvas上。

// 使用canvas绘制原始图片。
originalCanvas.width = originalWidth;
originalCanvas.height = originalHeight;
ctxOriginal.drawImage(img, 0, 0, originalWidth, originalHeight);

// 使用canvas绘制缩放后的图片。

resizedCanvas.width = width;
resizedCanvas.height = height;
ctxResized.drawImage(img, 0, 0, width, height);

总结 

到此这篇关于前端如何用canvas实现图片的等比例缩放的文章就介绍到这了,更多相关前端canvas图片等比例缩放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript 中的数据类型Number

    JavaScript 中的数据类型Number

    这篇文章主要介绍了JavaScript 中的数据类型Number，Number 类型使用 IEEE 754 格式表示整数和浮点值，下文相关详细资料介绍，需要的小伙伴可以参考一下
    2022-04-04
  • 游戏人文件夹程序 ver 4.03

    游戏人文件夹程序 ver 4.03

    游戏人文件夹程序 ver 4.03...
    2006-07-07
  • 基于JQuery+HTML+JavaScript实现地图位置选取和地址模糊查询

    基于JQuery+HTML+JavaScript实现地图位置选取和地址模糊查询

    本文详细讲解了如何使用 JQuery+HTML+JavaScript 实现移动端页面中的地图位置选取功能,本文逐步展示了如何构建基本的地图页面,如何通过点击地图获取经纬度和地理信息,以及如何实现模糊查询地址并在地图上标注,感兴趣的小伙伴跟着小编一起来看看吧
    2024-07-07
  • JavaScript实现将Word文档解析成浏览器认识的HTML

    JavaScript实现将Word文档解析成浏览器认识的HTML

    这篇文章主要为大家详细介绍了如何使用JavaScript实现将Word文档解析成浏览器认识的HTML,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2024-02-02
  • Javascript学习笔记 delete运算符

    Javascript学习笔记 delete运算符

    关于javascript的delete运算符，MDN里有相关文档。以下是我的学习笔记，更多是要关注特殊情况的使用和注意点。
    2011-09-09
  • js+html5实现手机九宫格密码解锁功能

    js+html5实现手机九宫格密码解锁功能

    这篇文章主要为大家详细介绍了js+html5实现手机九宫格密码解锁功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • ES6新增数据结构WeakSet的用法详解

    ES6新增数据结构WeakSet的用法详解

    WeakSet和Set类似，同样是元素不重复的集合，它们的区别是WeakSet内的元素必须是对象，不能是其它类型。接下来通过本文给大家详细介绍ES6新增数据结构WeakSet的用法，感兴趣的朋友一起看看吧
    2017-08-08
  • javascript 日期相减-在线教程(附代码)

    javascript 日期相减-在线教程(附代码)

    这篇文章主要介绍了javascript 日期相减的实例讲解，附上代码供大家查看,需要的朋友可以参考下
    2017-08-08
  • 微信小程序图片上传功能的实现方法

    微信小程序图片上传功能的实现方法

    在编写小程序的项目过程中,难免会有需要上传图片,下面这篇文章主要给大家介绍了关于微信小程序图片上传功能的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • JS实现Excel文件与图片视频上传

    JS实现Excel文件与图片视频上传

    这篇文章主要为大家学习介绍了JavaScript如何实现Excel文件与图片视频上传，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-07-07

最新评论