您正在使用IPV4(3.215.177.171)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
虚位以待
2021年 国庆节 7
2021年 重阳节 20
2022年 元 旦 99
2022年 春 节 130
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    js实现图片切割功能
    内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'titleTitle/titlestyle.cube{height:0;width:0;position:absolute;left:0;top:0;box-sizing:border-box;background-color:lightseagreen;opac......
    <!DOCTYPEhtml>

    <htmllang="en">

    <head>

    <metacharset="UTF-8">

    <title>Title</title>

    <style>

    .cube{

    height:0;

    width:0;

    position:absolute;

    left:0;

    top:0;


    box-sizing:border-box;

    background-color:lightseagreen;

    opacity:.3;

    z-index:99;pointer-events:none;

    }

    #big{

    border:1pxsolidblack;

    height:500px;

    width:500px;

    position:relative;

    background-image:url("img/pixel.png");

    line-height:500px;

    overflow:hidden;

    vertical-align:middle;

    text-align:center;

    float:left;

    }

    #big>img{line-height:500px;vertical-align:middle;

    max-height:100%;

    max-width:100%;

    pointer-events:none;

    }

    .cv{

    position:relative;

    float:left;border:2pxsolidlightseagreen;

    }

    </style>

    <script>

    letcount=0;letc,b,d,p1,p2,cv,cx,img,p;

    window.onload=function(){

    c=document.querySelectorAll(".cube");

    b=document.getElementById("big");

    cv=document.getElementById("c");

    cx=cv.getContext('2d');

    img=newImage();

    d=b.querySelector("img");

    img.src=d.src;

    img.onload=function(){

    cx.drawImage(img,0,0,500,500,0,0,500,500);

    p=img.width/b.querySelector("img").width;

    console.log(img);

    }

    p1={

    x:0,

    y:0

    };

    p2={

    x:0,

    y:0

    };

    b.addEventListener("click",function(e){

    count++;

    if(count===1){

    p1.x=e.offsetX;

    p1.y=e.offsetY;

    p2.x=e.offsetX;

    p2.y=e.offsetY;

    f2();

    f4();

    }

    if(count===2){

    p2.x=e.offsetX;

    p2.y=e.offsetY;

    myDraw();

    }

    });

    functionf1(){

    c[0].style.height=p2.y+"px";

    c[1].style.height=p2.y+"px";

    c[2].style.height=p2.y+"px";

    c[3].style.top=p2.y+"px";

    c[4].style.top=p2.y+"px";

    c[3].style.height=(p1.y-p2.y)+"px";

    c[4].style.height=(p1.y-p2.y)+"px";

    c[5].style.top=p1.y+"px";

    c[6].style.top=p1.y+"px";

    c[5].style.height=(b.offsetHeight-p1.y)+"px";

    c[6].style.height=b.offsetHeight-p1.y+"px";

    c[7].style.top=p1.y+"px";

    c[7].style.height=(b.offsetHeight-p1.y)+"px";

    }

    functionf2(){

    c[0].style.height=p1.y+"px";

    c[1].style.height=p1.y+"px";

    c[2].style.height=p1.y+"px";

    c[3].style.top=p1.y+"px";

    c[4].style.top=p1.y+"px";

    c[3].style.height=(p2.y-p1.y)+"px";

    c[4].style.height=(p2.y-p1.y)+"px";

    c[5].style.top=p2.y+"px";

    c[6].style.top=p2.y+"px";

    c[5].style.height=(b.offsetHeight-p2.y)+"px";

    c[6].style.height=b.offsetHeight-p2.y+"px";

    c[7].style.top=p2.y+"px";

    c[7].style.height=(b.offsetHeight-p2.y)+"px";

    }

    functionf3(){

    c[0].style.width=p2.x+"px";

    c[1].style.left=p2.x+"px";

    c[1].style.width=(p1.x-p2.x)+"px";

    c[2].style.left=p1.x+"px";

    c[2].style.width=(b.offsetWidth-p1.x)+"px";

    c[3].style.width=p2.x+"px";

    c[4].style.left=p1.x+"px";

    c[4].style.width=(b.offsetWidth-p2.x)+"px";

    c[5].style.width=p2.x+"px";

    c[6].style.left=p2.x+"px";

    c[6].style.width=(p1.x-p2.x)+"px";

    c[7].style.left=p1.x+"px";

    c[7].style.width=(b.offsetWidth-p1.x)+"px";

    }

    functionf4(){

    c[0].style.width=p1.x+"px";

    c[1].style.left=p1.x+"px";

    c[1].style.width=(p2.x-p1.x)+"px";

    c[2].style.left=p2.x+"px";

    c[2].style.width=(b.offsetWidth-p2.x)+"px";

    c[3].style.width=p1.x+"px";

    c[4].style.left=p2.x+"px";

    c[4].style.width=(b.offsetWidth-p2.x)+"px";

    c[5].style.width=p1.x+"px";

    c[6].style.left=p1.x+"px";

    c[6].style.width=(p2.x-p1.x)+"px";

    c[7].style.left=p2.x+"px";

    c[7].style.width=(b.offsetWidth-p2.x)+"px";

    }

    b.addEventListener("mousemove",function(e){

    if(count===1){

    p2.x=e.offsetX;

    p2.y=e.offsetY;

    if(p2.y<p1.y){

    f1();

    }else{

    f2();

    }


    if(p2.x<p1.x){

    f3();

    }else{

    f4();

    }


    }

    })


    }

    functionmyDraw(){

    cx.clearRect(0,0,500,500);

    letw=p1.x-p2.x;

    if(w<0){

    w=-w;

    }

    w*=p;

    leth=p1.y-p2.y;

    if(h<0){

    h=-h;

    }

    h*=p;

    if(p1.x<p2.x){

    p1.x=(p1.x-b.querySelector("img").offsetLeft)*p;

    }else{

    p1.x=(p2.x-b.querySelector("img").offsetLeft)*p;

    }

    if(p1.y<p2.y){

    p1.y=(p1.y-b.querySelector("img").offsetTop)*p;

    }else{

    p1.y=(p2.y-b.querySelector("img").offsetTop)*p;

    }

    cx.drawImage(img,

    p1.x,p1.y,

    w,h,0,0,500,500);

    p1.x=0;

    p1.y=0;

    p2.x=0;

    p2.y=0;

    }

    </script>



    </head>

    <body>


    <div

    id="big">

    <!--8个div覆盖-->

    <divclass="cube"></div>

    <divclass="cube"></div>

    <divclass="cube"></div>

    <divclass="cube"></div>

    <divclass="cube"></div>

    <divclass="cube"></div>

    <divclass="cube"></div>

    <divclass="cube"></div>

    <imgsrc="img/katy2.jpg"alt=""/>

    </div>

    <divclass="cv">

    <canvasid="c"height="500"width="500">


    </canvas>

    </div>

    </body>

    </html>

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:实现切换隐藏与显示同时切换图标功能 下一篇:JS实现随机生成验证码
    发布日期:2021/9/1
    手机扫二维码直达本页
    发布时间:14:56:14
    点击:219
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS V6.0.1 Build 21.9.2(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021