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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript+キャンバスで9マスのグリッドアプレットを作成する
  • JavaScript を使用した画像カット効果の例
  • JavaScript 画像切り取り効果(虫眼鏡)

<<:  Linux で FTP イメージ サーバーをインストールして展開する方法

>>:  MySQL トリガーの原理と使用例の分析

推薦する

MySQL 8.0.11 圧縮版のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0圧縮パッケージのインストール方法、詳細は次のとおりです知らせ:オペレーティング シ...

Vue ベースの円形スクロールリスト機能を実装する

注: 親コンテナーに高さと :data='Array' および overfolw:h...

Apache の一般的な仮想ホスト設定方法の分析

1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...

VUEをベースにしたシンプルな学生情報管理システムの実装

目次1. 主な機能2. 実装のアイデア3. コードの実装4. エフェクト表示V. 結論1. 主な機能...

CentOS 7.0 (mysql-5.7.21) で複数の MySQL インスタンスを起動する方法

設定手順Linux システム: CentOS-7.0 MySQL バージョン: 5.7.21 Lin...

Docker Compose で利用可能な環境変数の詳細な説明

Compose のいくつかの部分は、何らかの方法で環境変数を扱います。このチュートリアルは、必要な情...

HTMLタグのtarget属性の使用法

1: <a> タグを使用してページにリンクする場合、target 属性の役割は誰もが知っ...

Dockerを使用してMySQL 8.0をデプロイする方法の例

1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします(デフォ...

Debian ベースの Linux システム ソフトウェア インストール コマンドの詳細な説明 (推奨)

Debian の紹介Debian は、広い意味では、フリーなオペレーティング システムの作成に専念...

Windows 7 で Python 3.4 を使って MySQL データベースを使用する

Python 3.4でMySQLデータベースを使用する詳細なプロセスは次のとおりです。 Window...

JavaScript による省・市連携効果の実現

この記事では、省と都市間の連携効果を実現するためのJavaScriptの具体的なコードを参考までに共...

HTML 背景画像と背景色_PowerNode Java アカデミー

1. HTML 画像 <img> 1. <img> タグとその src 属性...

Linux parted ディスク パーティション実装手順の分析

fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...

Mysqlはフィールドスプライシングのための3つの関数を実装している

データをオペレーションにエクスポートする場合、フィールドの結合は避けられません。MySQL でこれが...

ウェブデザインに必須のツール: Firefox Web Developer プラグイン CSS ツールセットのチュートリアル

プラグインは Firefox ブラウザにインストールされます。 Web Developer プラグイ...