jsは画像切り取り機能を実現する

この記事の例では、画像の切り取りを実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        .キューブ{
            高さ: 0;
            幅: 0;
            位置: 絶対;
            左: 0;
            トップ:0;
 
            ボックスのサイズ: 境界線ボックス;
            背景色: ライトシーグリーン;
            不透明度: .3;
            z-index: 99; ポインターイベント: なし;
        }
        ＃大きい{
            境界線: 1px 黒一色;
            高さ: 500px;
            幅: 500ピクセル;
            位置: 相対的;
            背景画像: url("img/pixel.png");
            行の高さ: 500px;
            オーバーフロー: 非表示;
            垂直位置合わせ: 中央;
            テキスト配置: 中央;
            フロート: 左;
        }
        #big>img{line-height: 500px; vertical-align: middle;
            最大高さ: 100%;
            最大幅: 100%;
            ポインタイベント: なし;
        }
        .cv{
            位置: 相対的;
            フロート: 左; 境界線: 2px 実線 lightseagreen;
        }
    </スタイル>
    <スクリプト>
        count=0とします。c、b、d、p1、p2、cv、cx、img、pとします。
        window.onload = 関数（）{
            c = document.querySelectorAll(".cube");
            b = document.getElementById("大きい");
            cv = ドキュメント。getElementById("c");
            cx = cv.getContext('2d');
            img = 新しい画像();
            d = b.querySelector("img");
            画像を拡大
            img.onload=関数(){
                cx.drawImage(画像, 0,0,500,500,0,0,500,500);
               p = img.width / b.querySelector("img").width;
               コンソールにログ出力します。
            }
             p1={
                 x:0,
                 年:0
             };
            p2={
                x:0,
                年:0
            };
            b.addEventListener("クリック",関数(e){
                カウント++;
                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;
                    描画メソッド
                 }
            });
            関数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";
            }
            関数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";
            }
            関数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";
            }
            関数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",関数(e){
                if(count===1){
                    p2.x = e.offsetX;
                    p2.y = e.offsetY;
                     p2.y<p1.yの場合{
                        f1();
                     }それ以外{
                         f2();
                     }
 
                    p2.x<p1.xの場合{
                        f3();
                    }それ以外{
                        f4();
                     }
 
                 }
            })
 
        }
        関数myDraw(){
            cx.clearRect(0,0,500,500);
            w=p1.x-p2.xとします。
            w<0の場合{
                w=-w;
            }
            ｗ*＝ｐ；
            h=p1.y-p2.yとします。
            h<0の場合{
                h=-h;
            }
            h*=p;
            p1.x<p2.xの場合{
                p1.x = (p1.xb.querySelector ("img").offsetLeft) * p;
            }それ以外{
                p1.x = (p2.xb.querySelector ("img").offsetLeft) * p;
            }
            p1.y<p2.yの場合{
                p1.y = (p1.yb.querySelector("img").offsetTop)*p;
            }それ以外{
                p1.y = (p2.yb.querySelector("img").offsetTop)*p;
            }
            cx.drawImage(画像,
                p1.x、p1.y、
                幅、高さ、0、0、500、500);
            0 の場合
            p1.y=0;
            0 を返します。
            p2.y=0;
        }
    </スクリプト>
 
 
</head>
<本文>
 
<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=""/>
</div>
<div class="cv">
    <キャンバスid="c" 高さ="500" 幅="500">
 
    </キャンバス>
</div>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: