在HTML5 Canvas中创建图像缩放器

于 2020-08-05 05:30:48 发布
阅读量204 收藏
点赞数
文章标签： js css html canvas less ViewUI
原文链接：https://www.script-tutorials.com/html5-canvas-image-zoomer/
版权
HTML5 canvas - Image zoomer
HTML5 canvas - Image zoomer

HTML5 canvas – Image zoomer. New interesting tutorial – I will show you how you can create nice and easy Image zoomer using HTML5. Main idea – to draw a picture on the canvas, add event handlers to mousemove, mousedown and mouseup (to move the enlarged area near mouse cursor while holding the mouse).

HTML5 canvas –图像缩放器。 新的有趣的教程–我将向您展示如何使用HTML5创建美观，便捷的图像缩放器。 主要思想-在画布上绘制图片，向mousemove，mousedown和mouseup添加事件处理程序(在按住鼠标的同时将放大的区域移到鼠标光标附近)。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the source files and lets start coding !

好的，下载源文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are html code of our color picker page

这是我们的颜色选择器页面的html代码

index.html (index.html)

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 canvas - Image zoomer | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <canvas id="panel" width="800" height="533"></canvas>
        </div>
        <footer>
            <h2>HTML5 canvas - Image zoomer</h2>
            <a href="https://www.script-tutorials.com/html5-canvas-image-zoomer/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 canvas - Image zoomer | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <canvas id="panel" width="800" height="533"></canvas>
        </div>
        <footer>
            <h2>HTML5 canvas - Image zoomer</h2>
            <a href="https://www.script-tutorials.com/html5-canvas-image-zoomer/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles

这是使用CSS样式

css / main.css (css/main.css)

*{
    margin:0;
    padding:0;
}
body {
    background-color:#bababa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    color:#000;
    margin:20px auto;
    position:relative;
    width:800px;
}
#panel {
    border:1px #000 solid;
    box-shadow:4px 6px 6px #444444;
    cursor:crosshair;
}


*{
    margin:0;
    padding:0;
}
body {
    background-color:#bababa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    color:#000;
    margin:20px auto;
    position:relative;
    width:800px;
}
#panel {
    border:1px #000 solid;
    box-shadow:4px 6px 6px #444444;
    cursor:crosshair;
}

步骤3. JS (Step 3. JS)

js / script.js (js/script.js)

// variables
var canvas, ctx;
var image;
var iMouseX, iMouseY = 1;
var bMouseDown = false;
var iZoomRadius = 100;
var iZoomPower = 2;
// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
    clear(); // clear canvas
    if (bMouseDown) { // drawing zoom area
        ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);
        ctx.globalCompositeOperation = 'destination-atop';
        var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);
        oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");
        oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");
        ctx.fillStyle = oGrd;
        ctx.beginPath();
        ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    }
    // draw source image
    ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
}
$(function(){
    // loading source image
    image = new Image();
    image.onload = function () {
    }
    image.src = 'images/image.jpg';
    // creating canvas object
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');
    $('#panel').mousemove(function(e) { // mouse move handler
        var canvasOffset = $(canvas).offset();
        iMouseX = Math.floor(e.pageX - canvasOffset.left);
        iMouseY = Math.floor(e.pageY - canvasOffset.top);
    });
    $('#panel').mousedown(function(e) { // binding mousedown event
        bMouseDown = true;
    });
    $('#panel').mouseup(function(e) { // binding mouseup event
        bMouseDown = false;
    });
    setInterval(drawScene, 30); // loop drawScene
});


// variables
var canvas, ctx;
var image;
var iMouseX, iMouseY = 1;
var bMouseDown = false;
var iZoomRadius = 100;
var iZoomPower = 2;
// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
    clear(); // clear canvas
    if (bMouseDown) { // drawing zoom area
        ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);
        ctx.globalCompositeOperation = 'destination-atop';
        var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);
        oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");
        oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");
        ctx.fillStyle = oGrd;
        ctx.beginPath();
        ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    }
    // draw source image
    ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
}
$(function(){
    // loading source image
    image = new Image();
    image.onload = function () {
    }
    image.src = 'images/image.jpg';
    // creating canvas object
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');
    $('#panel').mousemove(function(e) { // mouse move handler
        var canvasOffset = $(canvas).offset();
        iMouseX = Math.floor(e.pageX - canvasOffset.left);
        iMouseY = Math.floor(e.pageY - canvasOffset.top);
    });
    $('#panel').mousedown(function(e) { // binding mousedown event
        bMouseDown = true;
    });
    $('#panel').mouseup(function(e) { // binding mouseup event
        bMouseDown = false;
    });
    setInterval(drawScene, 30); // loop drawScene
});

What I doing: When we holding the mouse button and start moving it – variable bMouseDown become three. Then, in the main draw function we just going to check this variable and, in the case of the true, we’re just going to draw a new additional area with enlarged image (in a circle). After – pay attention to using of ‘globalCompositeOperation’. Using this method existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.

我正在做什么：当我们按住鼠标按钮并开始移动它时，变量bMouseDown变为3。 然后，在主绘制函数中，我们将检查此变量，如果为true，则将绘制一个新的具有放大图像的附加区域(以圆圈表示)。 之后–注意使用'globalCompositeOperation'。 使用此方法，仅将现有画布保留在与新形状重叠的位置。 新形状绘制在画布内容的后面。

现场演示

结论 (Conclusion)

Hope that today’s lesson was interesting for you. In result we got smart and rational solution for zooming of images. Great, isn’t it? I will be glad to see your thanks and comments. Good luck!

希望今天的课程对您很有趣。 结果，我们得到了一种智能且合理的图像缩放解决方案。 很好，不是吗？ 看到您的感谢和评论，我将非常高兴。 祝好运！

翻译自: https://www.script-tutorials.com/html5-canvas-image-zoomer/

cukengwei3786
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值