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 トリガーの原理と使用例の分析

推薦する

Dockerfile 内の予約語命令の解析処理

目次1. Dockerfile とは何ですか? 2. Dockerfile構築プロセスの分析3. D...

ReactでuseStateを使用する詳細な例

使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...

一般的な XHTML タグの紹介

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

HTMLプログラミングタグとドキュメント構造の詳細な説明

HTML を使用してコンテンツをマークアップする目的は、Web ページにセマンティクスを与えることで...

有名なウェブサイトのロゴに使われている25種類のフォントのコレクション

この記事では、25 の有名な Web サイト (Google、Yahoo、Twitter、Digg ...

MySQLでデータベースのインストールパスを表示する方法

mysql コマンドを使用して、mysql のインストール パスを表示できます。 # 次の 2 つの...

MySQL でローカル ユーザーを作成し、データベース権限を付与する方法の例

序文MySQL をインストールすると、通常はスーパーユーザー root を作成します。多くの人がこの...

MySQL RouterはMySQLの読み取りと書き込みの分離を実装します

目次1. はじめに2. MySQLルーターを構成する2.1 MySQLルーターのインストール2.2 ...

JavaScript における Arguments オブジェクトの使用に関する詳細な説明

目次序文議論の基本概念議論の役割実パラメータと仮パラメータの数を取得する実際のパラメータ値を変更する...

JavaScript のカンマ式が含まれている場合について

JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...

トラフィックの多いウェブサイト向けのソリューション

まず、サーバーのハードウェアが現在のトラフィックをサポートするのに十分かどうかを確認します。通常の ...

CSS インライン スタイル、埋め込みスタイル、外部参照スタイルを使用する 3 つの方法

3 つの方法を使用する簡単な例は次のとおりです。インラインスタイル: <!doctypehtm...

MySQL 5.7 をインストールした後にコマンドライン ウィンドウを開くとクラッシュする問題の解決方法

序文最近、MySQL 5.7 をインストールしましたが、問題が見つかりました。コマンド ライン ウィ...

ウェブページのカラーマッチングスキルについての簡単な説明(フロントエンド開発者必読)

一般的に、Web ページの背景色は、より柔らかく、よりシンプルで、より明るく、暗いテキストとマッチし...

よく使われる HTML タグとその特徴の完全なリスト

まず、HTML タグのいくつかの特性を知っておく必要があります。 1. 「<keyword&g...