js實現圖片切割功能

阿新 • • 發佈：2021-09-02

本文例項為大家分享了實現圖片切割的具體程式碼，供大家參考，具體內容如下

js實現圖片切割功能

程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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: 1px solid black;
            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: 2px solid lightseagreen;
        }
    </style>
    <script>
        let count=0;let c,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=new Image();
            d=b.querySelector("img");
            img.src=d.src;
            img.onload=function(){
                cx.drawImage(img,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 .offswww.cppcns.com 
etX;
                    p2.y=e.offsetY;
                    f2();
                    f4();
                }
                if(count===2){
                    p2.x=e.offsetX;
                    p2.y=e.offsetY;
                    myDraw();
                 }
            });
            function f1(){
                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";
            }
            function f2(){
                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";
            }
            function f3(){
                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";
            }
            function f4(){
                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();
                     }
 
                 }
            })
 
        }
        function myDraw(){
            cx.clearRect(0,500);
            let w=p1.x-p2.x;
            if(w<0){
                w=-w;
            }
            w*=p;
            let h=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,AbcJJddOz 
           w,h,500);
            p1.x=0;
            p1.y=0;
            p2.x=0;
            p2.y=0;
        }
    </script>
 
 
</head>
<body >
 
<div
id="big">
    <!--    8個div覆蓋-->
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <img src="img/katy2.jpg" alt="js實現圖片切割功能"/>
</div>
<div class="cv">
    <canvas id="c" height="500" width="500">
 
    </canvas>
</div>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

js實現圖片切割功能

本文例項為大家分享了實現圖片切割的具體程式碼，供大家參考，具體內容如下

Vue.js實現圖片切換功能

本文例項為大家分享了vue.js實現圖片切換功能的具體程式碼，供大家參考，具體內容如下

viewer.js實現圖片預覽功能

viewer.js是實現圖片預覽的外掛庫，要在專案中使用它裡面的功能，首先要引入兩個檔案：

Python tkinter實現圖片標註功能(完整程式碼)

.tkinter tkinter是Python下面向tk的圖形介面介面庫，可以方便地進行圖形介面設計和互動操作程式設計。tkinter的優點是簡單易用、與Python的結合度好。tkinter在Python 3.x下預設整合，不需要額外的安裝操作；不足之

js實現帶搜尋功能的下拉框

本文例項為大家分享了Android九宮格圖片展示的具體程式碼，供大家參考，具體內容如下

js實現圖片實時時鐘

本文例項為大家分享了js實現圖片實時時鐘的具體程式碼，供大家參考，具體內容如下

js實現圖片上傳到伺服器和回顯

關於js實現圖片的上傳和回顯，曾經使用者的程式碼粘在這裡：樣式：這樣寫樣式的道理是給<input>標籤的父級設定一個背景圖，就是‘+\'那個背景圖，然後把<input>的寬高設定得跟父級一樣，且完全透明（注

原生JS實現留言板功能

本文例項為大家分享了JS實現留言板功能的具體程式碼，供大家參考，具體內容如下

純js實現無縫滾動功能程式碼例項

這篇文章主要介紹了純js實現無縫滾動功能程式碼例項,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JS實現圖片懶載入(lazyload)過程詳解

對於圖片較多的頁面，使用懶載入可以大幅提高頁面載入速度，提高使用者體驗。

JS端基於download.js實現圖片、視訊時直接下載而不是開啟預覽

專案中的附件列表，通常情況都需要提供下載、刪除的功能，功能本身沒有什麼要說的，都是基本功能，使用瀏覽器的的下載功能，也都是用window.open(url)，或者window.location.href=url的方式，url即為附件下載介面，瀏

原生JS實現匯率轉換功能程式碼例項

程式碼如下 html程式碼 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\" />