JavaScript キャンバスで 9 マスのグリッドカットの効果を実現

この記事では、9グリッドカット効果を実現するためのキャンバスの具体的なコードを紹介します。具体的な内容は次のとおりです。

最初のページ表示

コードに直接

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        体 {
            テキスト配置: 中央;
        }
        
        キャンバス {
            境界線: 1px 実線;
        }
        
        .newcanvas {
            幅: 316ピクセル;
            高さ: 316px;
            マージン: 自動;
        }
        
        .newpohoto、
        .ダウンロード{
            幅: 300ピクセル;
            高さ: 40px;
            行の高さ: 40px;
            マージン: 自動;
            背景色: コーンフラワーブルー;
            境界線の半径: 5px;
            カーソル: ポインタ;
            マージン: 10px 自動;
            色: 白;
        }
    </スタイル>
</head>

<本文>
    <h3>キャンバスを使用して9グリッドカットの効果を実現する</h3>
    <div class="mycanvas">
        <キャンバス幅="300" 高さ="300" id="mycnavas"></キャンバス>
    </div>
    <div class="newpohoto">
        写真の切り取りを開始する</div>
    <div class="newcanvas">
        <キャンバス幅="100" 高さ="100" id="img1"></キャンバス>
        <キャンバス幅="100" 高さ="100" id="img2"></キャンバス>
        <キャンバス幅="100" 高さ="100" id="img3"></キャンバス>
        <キャンバス幅="100" 高さ="100" id="img4"></キャンバス>
        <キャンバス幅="100" 高さ="100" id="img5"></キャンバス>
        <キャンバス幅="100" 高さ="100" id="img6"></キャンバス>
        <キャンバス幅="100" 高さ="100" id="img7"></キャンバス>
        <キャンバス幅="100" 高さ="100" id="img8"></キャンバス>
        <キャンバス幅="100" 高さ="100" id="img9"></キャンバス>
    </div>
    <div class="ダウンロード">
        画像をダウンロード</div>
    <スクリプト>
         var canvas = document.getElementById("mycnavas"); //次に画像を配置します var cxt = mycnavas.getContext("2d");
        var img = 新しい画像();
        画像を拡大
        window.onload = 関数() {
            cxt.drawImage(img, 0, 0, 400, 300); //画像の位置を描画します} 
        var arr = []; //切り取った画像を配列に保存する document.getElementsByClassName("newpohoto")[0].onclick = function() {
            var q = 1;
            (var i = 0; i < 3; i++) の場合 {     
                (var j = 0; j < 3; j++) の場合 {
                    var data = cxt.getImageData(j * 100, i * 100, 400, 100); //「コピー」関数と同様 var img = document.getElementById("img" + q)
                    var newcxt = img.getContext("2d");
                    newcxt.putImageData(data, 0, 0); //「貼り付け」関数と同様 arr.push(console.log(img.toDataURL(q + ".png"))) //toDataURL() メソッドの 2 つのパラメーター: DataURL(type, encodingOptions) type は、image/png、image/jpeg、image/webp など、base64 エンコードに変換した後のイメージの形式を指定します。デフォルトは image/png 形式です。                                     
                    q++;
                    コンソールログ(arr)
                }
            }

        }
         //切り取った画像をダウンロードする var arr = [];
        document.getElementsByClassName('download')[0].onclick = function() {
            (var i = 0; i < 9; i++) の場合 {
                var a = document.createElement('a');
                a.download = 'img' + (i + 1);
                a.href = arr[i];
                ドキュメント本体に子要素を追加します。
                クリック();
            }
        }
    </スクリプト>

</本文>

</html>

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

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