专栏首页小蔚记录js -- canvas img 封装

js -- canvas img 封装

鼠标 1.操作canvas 中的 img。 右键放大缩小,左键移动img。

   2.拖动input type= range 改变图片的透明度

html 代码

<!DOCTYPE html>
<html lang="en" oncontextmenu="doNothing()">
<head>
    <meta charset="UTF-8">
    <title>图片已中心店的坐标缩放</title>
    <style>
        #box1 {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
            float: left;
        }

        #box2 {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
            float: left;
            margin-left: 50px;
            box-sizing: border-box;
        }
    </style>
    <script type="text/javascript">function ss() {
        if (event.button == 2) {
            alert("aaaa");
        }
        document.onmousedown = ss;
    }</script>
</head>
<body>
<div>
    <div id="box1">
        <canvas id="cas1" width="500" height="300"></canvas>
    </div>
    <div id='box2'>
        <canvas id="cas2" width="500" height="300"></canvas>
    </div>
    <div style="clear: both"></div>
</div>
<input type="range" id="inp_d" value="0">
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="./index.js"></script>
</html>

js 代码

/**
 * Created by Administrator on 2018/7/6.
 */
function doNothing() {
    window.event.returnValue = false;
    return false;
}

var imgX = 0;
var imgY = 0;
var imgScale = 1;
var val = 0;
window.onload = function (event) {
    var count = [
        {cas2: 'cas1', box2: '#box1,#box2', path: './2.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./4.jpg,./5.jpg',inp_id:'#inp_d,#inp_d'},
        {cas2: 'cas2', box2: '#box1,#box2,',path: './3.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./5.jpg,./4.jpg',inp_id:'#inp_d,#inp_d'}
    ];
    for (var i = 0; i < count.length; i++) {
        getElement(count[i].cas2, count[i].box2, count[i].path, count[i].callback, count[i].scale,count[i].icon_img,count[i].inp_id)
    }
};

function getElement(cas_id, box_id, img_src, imgOnload_call, methods,icon_img,inp_id) {
    var canvas = document.getElementById(cas_id);
    var box = document.getElementById(box_id);
    var arr = box_id.split(',');
    var context = canvas.getContext('2d');
    var img = new Image();
    var img1 = new Image();
    var img1_arr = icon_img.split(',');
    img.src = img_src;
    for(var i = 0; i < img1_arr.length;i++){
        img1.src = img1_arr[i];
    }
    imgOnload_call(img, context, canvas, img1);
    methods(arr, canvas, context, img,img1);
    inp_methods(inp_id,context,canvas,img,img1)
}

function imgOnload_callbak(img,context,canvas,img1) {
    img.onload = function () {
        context.globalAlpha = 1.0;
        context.drawImage(img, 0, 0);
    };
    img1.onload = function (){
        setTimeout(function(){
            context.globalAlpha = 0;
            context.drawImage(img1,0,0,img1.width,img1.height,0,0,img1.width,img1.height);
        },50);
    }
}

function methods(elements, canvas, context, img,img1) {
    var img_y = 1;
    elements.forEach(function (item, i) {
        $(item).mousedown(function (event) {
            console.log(val);
            var e_btn = event.button;
            if (e_btn == 2) {
                var e_down_y = event.clientY;
                $(item).mousemove(function (event) {
                    var e_move_y = event.clientY;
                    if (e_move_y < e_down_y) {
                        img_y *= 1.01;
                    } else {
                        img_y /= 1.01;
                    }
                    e_down_y = e_move_y;
                    img_y = (img_y > 1) ? img_y : 1;
                    canvas.style.transform = "scale(" + img_y + "," + img_y + ")"
                });
                $(item).mouseup(function () {
                    $(item).unbind('mousemove');
                    $(item).unbind('mouseup');
                })
            }
            else if (e_btn == 0) {
                var e_drag_down = {
                    x: event.clientX,
                    y: event.clientY
                };
                $(item).mousemove(function (event) {
                    var e_drag_move = {
                        x: event.clientX,
                        y: event.clientY
                    };
                    var e_drag_distance = {
                        x: e_drag_move.x - e_drag_down.x,
                        y: e_drag_move.y - e_drag_down.y
                    };
                    e_drag_down = e_drag_move;
                    imgX += e_drag_distance.x;
                    imgY += e_drag_distance.y;
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.globalAlpha = 1.0;
                    context.drawImage(img, 0, 0, img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale);
                    context.globalAlpha = val;
                    context.drawImage(img1, 0, 0, img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale);
                });
                $(item).mouseup(function () {
                    $(item).unbind("mousemove");
                    $(item).unbind('mouseup');
                })
            }
        })
    })
}

function inp_methods(inp_id,context,canvas,img,img1){
    var inp_id_arr = inp_id.split(',');
    inp_id_arr.forEach(function(item,i){
        $(item).on('input propertychange',function(){
            val = $(item).val();
            val = ( val < 0.1)? 0.1 : val/100;
            context.clearRect(0,0,canvas.width,canvas.height);
            context.globalAlpha = 1.0;
            context.drawImage(img,0,0,img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale);
            context.globalAlpha = val;
            context.drawImage(img1,0,0,img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale);
        })
    });
}

有错误的地方,请大家帮忙 指正一下。谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js ---- 实现千位分隔符

    var num = 1234567; var string = num.toString(); var arr = string.split('').rev...

    小蔚
  • js --- 上传图片预览

    小蔚
  • es6 -- 透彻掌握Promise的使用,读这篇就够了

    Promise的重要性我认为我没有必要多讲,概括起来说就是必须得掌握,而且还要掌握透彻。这篇文章的开头,主要跟大家分析一下,为什么会有Promise出现。

    小蔚
  • 验证码去噪 分离背景 分离文字 最大类间方差

    用户1258909
  • 前端基础-Ajax判断用户名是否可用

    cwl_java
  • maven配置解析和最佳配置

    十毛
  • CentOS6.X 升级内核Kernel

    CentOS 6.X升级Kernel,方便安装Docker 升级方法 参考:http://elrepo.org/tiki/tiki-index.php ...

    shaonbean
  • Seay源代码审计系统的配置和安装

    2014年7月31日 Seay源代码审计系统2.1 时隔刚好一年之久,源代码审计系统再次更新,这次主要优化审计体验,优化了漏洞规则,算是小幅更新,原来使用者打开...

    Angel_Kitty
  • Winpe2.0 DIY(3)Aston

    这个外壳是要直接加入到pe中的,并不是在pe中装Aston,所以要对它进行调整,然后象其他的工具那样放到mount\Program Files下

    用户2398817
  • SEO丨网站内容多少与收录多少PY关系分析

    简单明了,直接从个人建站经历即可得知,当我们第一次接触网站的时候,百度搜索自己的网站,是空荡荡的一片,文章积累到一定程度时,一段时间停止更新后,收录量会上一个层...

    V站CEO-西顾

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动