jsは画像切り取り機能を実現する
|
この記事の例では、画像の切り取りを実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。
コード：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル>
.キューブ{
高さ: 0;
幅: 0;
位置: 絶対;
左: 0;
トップ:0;
ボックスのサイズ: 境界線ボックス;
背景色: ライトシーグリーン;
不透明度: .3;
z-index: 99; ポインターイベント: なし;
}
＃大きい{
境界線: 1px 黒一色;
高さ: 500px;
幅: 500ピクセル;
位置: 相対的;
背景画像: url("img/pixel.png");
行の高さ: 500px;
オーバーフロー: 非表示;
垂直位置合わせ: 中央;
テキスト配置: 中央;
フロート: 左;
}
#big>img{line-height: 500px; vertical-align: middle;
最大高さ: 100%;
最大幅: 100%;
ポインタイベント: なし;
}
.cv{
位置: 相対的;
フロート: 左; 境界線: 2px 実線 lightseagreen;
}
</スタイル>
<スクリプト>
count=0とします。c、b、d、p1、p2、cv、cx、img、pとします。
window.onload = 関数（）{
c = document.querySelectorAll(".cube");
b = document.getElementById("大きい");
cv = ドキュメント。getElementById("c");
cx = cv.getContext('2d');
img = 新しい画像();
d = b.querySelector("img");
画像を拡大
img.onload=関数(){
cx.drawImage(画像, 0,0,500,500,0,0,500,500);
p = img.width / b.querySelector("img").width;
コンソールにログ出力します。
}
p1={
x:0,
年:0
};
p2={
x:0,
年:0
};
b.addEventListener("クリック",関数(e){
カウント++;
if(count===1){
p1.x = e.offsetX;
p1.y = e.offsetY;
p2.x = e.offsetX;
p2.y = e.offsetY;
f2();
f4();
}
if(count===2){
p2.x = e.offsetX;
p2.y = e.offsetY;
描画メソッド
}
});
関数f1(){
c[0].style.height=p2.y+"px";
c[1].style.height=p2.y+"px";
c[2].style.height=p2.y+"px";
c[3].style.top=p2.y+"px";
c[4].style.top=p2.y+"px";
c[3].style.height=(p1.y-p2.y)+"px";
c[4].style.height=(p1.y-p2.y)+"px";
c[5].style.top=p1.y+"px";
c[6].style.top=p1.y+"px";
c[5].style.height=(b.offsetHeight-p1.y)+"px";
c[6].style.height=b.offsetHeight-p1.y+"px";
c[7].style.top=p1.y+"px";
c[7].style.height=(b.offsetHeight-p1.y)+"px";
}
関数f2(){
c[0].style.height=p1.y+"px";
c[1].style.height=p1.y+"px";
c[2].style.height=p1.y+"px";
c[3].style.top=p1.y+"px";
c[4].style.top=p1.y+"px";
c[3].style.height=(p2.y-p1.y)+"px";
c[4].style.height=(p2.y-p1.y)+"px";
c[5].style.top=p2.y+"px";
c[6].style.top=p2.y+"px";
c[5].style.height=(b.offsetHeight-p2.y)+"px";
c[6].style.height=b.offsetHeight-p2.y+"px";
c[7].style.top=p2.y+"px";
c[7].style.height=(b.offsetHeight-p2.y)+"px";
}
関数f3(){
c[0].style.width=p2.x+"px";
c[1].style.left=p2.x+"px";
c[1].style.width=(p1.x-p2.x)+"px";
c[2].style.left=p1.x+"px";
c[2].style.width=(b.offsetWidth-p1.x)+"px";
c[3].style.width=p2.x+"px";
c[4].style.left=p1.x+"px";
c[4].style.width=(b.offsetWidth-p2.x)+"px";
c[5].style.width=p2.x+"px";
c[6].style.left=p2.x+"px";
c[6].style.width=(p1.x-p2.x)+"px";
c[7].style.left=p1.x+"px";
c[7].style.width=(b.offsetWidth-p1.x)+"px";
}
関数f4(){
c[0].style.width=p1.x+"px";
c[1].style.left=p1.x+"px";
c[1].style.width=(p2.x-p1.x)+"px";
c[2].style.left=p2.x+"px";
c[2].style.width=(b.offsetWidth-p2.x)+"px";
c[3].style.width=p1.x+"px";
c[4].style.left=p2.x+"px";
c[4].style.width=(b.offsetWidth-p2.x)+"px";
c[5].style.width=p1.x+"px";
c[6].style.left=p1.x+"px";
c[6].style.width=(p2.x-p1.x)+"px";
c[7].style.left=p2.x+"px";
c[7].style.width=(b.offsetWidth-p2.x)+"px";
}
b.addEventListener("mousemove",関数(e){
if(count===1){
p2.x = e.offsetX;
p2.y = e.offsetY;
p2.y<p1.yの場合{
f1();
}それ以外{
f2();
}
p2.x<p1.xの場合{
f3();
}それ以外{
f4();
}
}
})
}
関数myDraw(){
cx.clearRect(0,0,500,500);
w=p1.x-p2.xとします。
w<0の場合{
w=-w;
}
ｗ*＝ｐ；
h=p1.y-p2.yとします。
h<0の場合{
h=-h;
}
h*=p;
p1.x<p2.xの場合{
p1.x = (p1.xb.querySelector ("img").offsetLeft) * p;
}それ以外{
p1.x = (p2.xb.querySelector ("img").offsetLeft) * p;
}
p1.y<p2.yの場合{
p1.y = (p1.yb.querySelector("img").offsetTop)*p;
}それ以外{
p1.y = (p2.yb.querySelector("img").offsetTop)*p;
}
cx.drawImage(画像,
p1.x、p1.y、
幅、高さ、0、0、500、500);
0 の場合
p1.y=0;
0 を返します。
p2.y=0;
}
</スクリプト>
</head>
<本文>
<div
id="big">
<!-- 8 div カバー-->
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<img src="img/katy2.jpg" alt=""/>
</div>
<div class="cv">
<キャンバスid="c" 高さ="500" 幅="500">
</キャンバス>
</div>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL外部キーの基本的な機能と使用方法の詳細な説明
>>: VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)
推薦する
折りたたまれたテーブル行要素のバグ
例を見てみましょう。コードは次の通り非常にシンプルです。コードをコピーコードは次のとおりです。 &l...
泡の小さな鋭角効果を実現するCSS
効果画像（境界線の色が薄すぎるので、{} で囲みます）： { }参考リンク Pure CSS バブル...
Linuxにソフトウェアをインストールするいくつかの方法の詳細な説明
1. RPM パッケージのインストール手順: 1. soft.version.rpm などの対応する...
HTMLページがincludeを使用してphpファイルをインポートした後に余分な空白行があります
インターネットで見つけた方法は効果的ですinclude によって導入されたフッター ファイルとヘッダ...
CSS カウンターを使用して数字の順序付きリストを美しく表示する方法
Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できる...
クラウド サーバー Ubuntu_Server_16.04.1 に MySQL をインストールしてリモート接続を有効にする方法
1. MySQLをインストールします。対応するソフトウェアをインストールするには、次の 3 つのコマ...
実行後にdocker nginxにアクセスできない問題の解決策
## 1最近、docker デプロイメントを学習しており、当初は nginx を docker 化す...
ページコードの変更の効率を向上させ、HTML言語のコア知識を習得します。
ウェブサイトを構築するとき、HTML 言語は重要ではないと思われるかもしれませんが、実際には、基本的...
MySQLプリコンパイル機能の詳細な説明
この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...
JavaScriptでカレンダー効果を素早く実装
この記事では、カレンダー効果を素早く実現するためのJavaScriptの具体的なコードを例として紹介...
WINDOWS での MYSQL のインストールに関する詳細なチュートリアル
1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...
MySQL の current_timestamp の落とし穴とその解決策を共有する
目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...
HiveメタデータをMySQLに設定するプロセス全体
Hiveのインストールディレクトリで、confディレクトリに入り、hive-site.xmlファイル...
Linuxで大きなファイルを素早くコピーする方法
データをコピーリモートでデータをコピーする場合、通常は rsync コマンドを使用しますが、小さなフ...
Redission-tomcatは、単一マシンから複数マシンへの展開を迅速に実装します。
序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...