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 環境を構築する手順 (画像とテキスト)
推薦する
Element-ui NavMenuサブメニューを使用して再帰的に生成する場合のエラーの詳細な説明
ナビゲーションバーのサブメニューを再帰的に生成すると、メニューは正常に生成できるが、マウスをホバーす...
DockerとVMwareの競合を解決する
1. Dockerの起動の問題:問題は解決しました: Hyper-V をオンにする必要があります (...
CSS3 フリップカード番号サンプルコード
今日会社から課題をもらったのですが、効果図は以下のとおりです。 どのような効果を実現したいかは特に決...
MySQLのFreeListメカニズムの詳細な説明
1. はじめにMySQL が起動すると、BufferPool が初期化されます。クエリ操作を実行する...
Vue+echarts で積み上げ棒グラフを実現
この記事では、積み上げ棒グラフを実装するためのVue+echartsの具体的なコードを参考までに紹介...
div の幅が width:100% に設定されていて、パディングまたはマージンが親要素を超えてしまう問題の解決方法
序文この記事では、div の幅を 100% に設定し、親要素を超えてパディングまたはマージンを設定す...
MySQL テーブルにおける非主キー列オーバーフロー監視の詳細な説明
今日もまた罠に落ちてしまいました。 私は以前MySQLの主キーオーバーフローに遭遇したことがあり、そ...
IDEA 2020.3.1 で Tomcat をデプロイし、最初の Web プロジェクトを作成するプロセスの詳細な説明
目次Tomcat の紹介Tomcat の展開Web プロジェクトの作成tomcatの設定プロジェクト...
MySQLインデックスの詳細
1. インデックスの原則インデックスは、列内の特定の値を持つ行をすばやく見つけるために使用されます。...
Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)
昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...
MySQL 学習ノート ヘルプ ドキュメント
システムヘルプを表示help contents mysql> ヘルプコンテンツ; ヘルプ カテ...
win10でのmysql5.7.21解凍バージョンのインストールチュートリアル
次のように、Win10でMysqlの解凍バージョンをインストールします。環境: win10 64ビッ...
vue-router のハッシュモードと履歴モードの違い
vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...
Gobangゲームを実現するためのjsキャンバス
この記事では、Gobangゲームを実装するためのキャンバスの具体的なコードを参考までに共有します。具...
Linux で Oracle データベースをバックアップするためのスケジュールされたタスクの設定に関するチュートリアル
1. データベースの文字セットを確認するデータベースの文字セットは、Linux で設定された環境変数...