无需插件、原生 JS + HTML2Canvas，轻松实现网页放大镜！

2023-05-12 20:34:09

原生 JavaScript 和 HTML2Canvas：释放网页放大镜的魅力

内容简介

放大大图、细节尽收眼底，网页放大镜已成为提升用户体验的利器。然而，市面上常见的实现方案依赖插件或第三方库，要么不够灵活，要么兼容性不佳。拒绝这些局限，本文将深入剖析如何利用原生 JavaScript 和 HTML2Canvas 轻松实现网页放大镜。

原生 JavaScript 和 HTML2Canvas 的优势

原生 JavaScript：

无需依赖任何插件或库，兼容性更佳，运行更稳定。

HTML2Canvas：

强大的 HTML 截图工具，可以将网页内容转换成 Canvas 元素，方便放大、缩小和移动。

实现步骤

引入 HTML2Canvas 脚本库

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

HTML 结构

<div id="magnifier">
    <canvas id="magnified-canvas"></canvas>
    <div id="magnifier-glass"></div>
</div>

CSS 样式

#magnifier {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#magnified-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#magnifier-glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border: 1px solid black;
    cursor: move;
}

JS 实现

const magnifier = document.getElementById('magnifier');
const magnifiedCanvas = document.getElementById('magnified-canvas');
const magnifierGlass = document.getElementById('magnifier-glass');

magnifier.addEventListener('mousemove', (e) => {
    const rect = magnifier.getBoundingClientRect();
    const glassRect = magnifierGlass.getBoundingClientRect();
    const x = e.clientX - rect.left - glassRect.width / 2;
    const y = e.clientY - rect.top - glassRect.height / 2;
    magnifierGlass.style.transform = `translate(${x}px, ${y}px)`;

    html2canvas(magnifier, {
        scale: 2,
        x: x,
        y: y,
        width: glassRect.width,
        height: glassRect.height,
        backgroundColor: null
    }).then((canvas) => {
        const context = magnifiedCanvas.getContext('2d');
        context.drawImage(canvas, 0, 0);
    });
});