この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で FTP イメージ サーバーをインストールして展開する方法
目次1. Dockerfile とは何ですか? 2. Dockerfile構築プロセスの分析3. D...
使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...
<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...
HTML を使用してコンテンツをマークアップする目的は、Web ページにセマンティクスを与えることで...
この記事では、25 の有名な Web サイト (Google、Yahoo、Twitter、Digg ...
mysql コマンドを使用して、mysql のインストール パスを表示できます。 # 次の 2 つの...
序文MySQL をインストールすると、通常はスーパーユーザー root を作成します。多くの人がこの...
目次1. はじめに2. MySQLルーターを構成する2.1 MySQLルーターのインストール2.2 ...
目次序文議論の基本概念議論の役割実パラメータと仮パラメータの数を取得する実際のパラメータ値を変更する...
JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...
まず、サーバーのハードウェアが現在のトラフィックをサポートするのに十分かどうかを確認します。通常の ...
3 つの方法を使用する簡単な例は次のとおりです。インラインスタイル: <!doctypehtm...
序文最近、MySQL 5.7 をインストールしましたが、問題が見つかりました。コマンド ライン ウィ...
一般的に、Web ページの背景色は、より柔らかく、よりシンプルで、より明るく、暗いテキストとマッチし...
まず、HTML タグのいくつかの特性を知っておく必要があります。 1. 「<keyword&g...