前端：图片局部放大

电商平台中经常看到，鼠标移动至产品图片会出现局部放大功能，很显然，这是前端开发的职责，那它到底是如何实现的呢？

我们今天根据此需求，做一案例来了解，还是老规矩，先来理思路：

一、这种功能实现方式还是挺多的，本文主要围绕两个方向进行探讨：

1、动态修改图片位置：以前开发过程中拿两张图片来处理，根据鼠标在产品图中的移动位置，确定偏移数据，从而操作另一张图片的位置，从而实现功能

2、canvas图片绘制

如上两种方法均可实现此功能，第一种没什么可说的，思路基本已阐明，在此我们主要分享如何用canvas来实现，canvas思路跟第一者有些相似，不同是的，第一种方法需要渲染两张图片，而canvas，只需要渲染一张图片即可，来吧！逐步进行

A、创建两个canvas画布，第一个渲染图片，第二个承载局部放大后的图片

B、添加鼠标移动监听，渲染实时图片

C、添加图片平滑功能（此功能为附加，可不用）

先看效果（左侧为原图，右图为局部放大图，根据自己需求设置放大参数）：

源码在文章末尾，如果对你有用还望点赞、关注、赞赏，产品嘛！其实也挺不错，有需要者可以入手，童叟无欺，万分感谢

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>canvas局部放大</title></head>
<body>    <p>        <canvas id="canvas"></canvas>        <canvas id="zoom"></canvas>    <div>        <label for="smoothbtn">            <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn" />            启用图像平滑        </label>    </div>    <input type="file" accept="image" id="file">

    </p>
</body><script>    const file = document.getElementById('file')    let url    file.addEventListener('change', e => {        url = URL.createObjectURL(e.target.files[0])        init()    })    function init() {        const img = new Image();        img.src = url        img.onload = function () {            draw(this);        };
        function draw(img) {            const canvas = document.getElementById("canvas");            canvas.width = 500            canvas.height = img.height            const ctx = canvas.getContext("2d");            ctx.drawImage(img, 0, 0);            img.style.display = "none";            const zoo = document.getElementById("zoom")            zoo.width = canvas.width            zoo.height = canvas.height            const zoomctx = zoo.getContext("2d");
            const smoothbtn = document.getElementById("smoothbtn");            const toggleSmoothing = function (event) {                zoomctx.imageSmoothingEnabled = this.checked;                zoomctx.mozImageSmoothingEnabled = this.checked;                zoomctx.webkitImageSmoothingEnabled = this.checked;                zoomctx.msImageSmoothingEnabled = this.checked;            };            smoothbtn.addEventListener("change", toggleSmoothing);
            const zoom = function (event) {                const x = event.layerX;                const y = event.layerY;                zoomctx.drawImage(                    canvas,                    Math.abs(x - 5),                    Math.abs(y - 5),                    10,                    10,                    0,                    0,                    canvas.width,                    canvas.height,                );            };
            canvas.addEventListener("mousemove", zoom);        }
    }</script>
</html>

原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/88430.html

前端：图片局部放大

相关推荐

如何解决连接apple id服务器时出错的问题？

电信屏蔽网站解决方法，怎么解除被电信屏蔽的网站设置

昆明网页设计

服务器回收的标准价格是多少？

发表回复