この記事では、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 イメージ サーバーをインストールして展開する方法
MySQL 8.0圧縮パッケージのインストール方法、詳細は次のとおりです知らせ:オペレーティング シ...
注: 親コンテナーに高さと :data='Array' および overfolw:h...
1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...
目次1. 主な機能2. 実装のアイデア3. コードの実装4. エフェクト表示V. 結論1. 主な機能...
設定手順Linux システム: CentOS-7.0 MySQL バージョン: 5.7.21 Lin...
Compose のいくつかの部分は、何らかの方法で環境変数を扱います。このチュートリアルは、必要な情...
1: <a> タグを使用してページにリンクする場合、target 属性の役割は誰もが知っ...
1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします(デフォ...
Debian の紹介Debian は、広い意味では、フリーなオペレーティング システムの作成に専念...
Python 3.4でMySQLデータベースを使用する詳細なプロセスは次のとおりです。 Window...
この記事では、省と都市間の連携効果を実現するためのJavaScriptの具体的なコードを参考までに共...
1. HTML 画像 <img> 1. <img> タグとその src 属性...
fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...
データをオペレーションにエクスポートする場合、フィールドの結合は避けられません。MySQL でこれが...
プラグインは Firefox ブラウザにインストールされます。 Web Developer プラグイ...