JavaScript スクリーンショット jQuery プラグイン imgAreaSelect 使い方詳細説明_jquery

ユーザーが個人のアバターをカスタマイズできるようにするには、アップロードされた写真のスクリーンショット機能を提供する必要があり、現在、多くの Web サイト、特に SNS サイトではそのような機能が提供されており、非常に実用的です。実装には主に 2 つの形式があり、1 つは Flash スクリーンショット、もう 1 つは JavaScript スクリーンショットです。どちらの方法にも独自の長所と短所があります。Flash スクリーンショットについては、UcHome プログラムのアバター アップロード機能を参照してください。ここでの私の主な焦点は、jQuery の imgAreaSelect プラグインを使用してカスタム アバター [avatar] JavaScript スクリーンショット関数を簡単に実装する方法です。

1. 準備:
2 つの JS ファイル
1. jquery.js ダウンロード: jquery.js
2. jquery.imgaraselect.js ダウンロード: jquery.imgareaselect.js[imgareaselect-0.6.2.zip]

2.
を使用します

function preview(img, selection){ 
var scaleX = 100 / selection.width; 
var scaleY = 100 / selection.height; 

//ダイナミックアバター 現在選択されているボックスの幅、高さ、左枠、右枠を取得します

$('#biuuu + div > img').css({ 
width: Math.round(scaleX * 400) + 'px', 
height: Math.round(scaleY * 300) + 'px', 
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
}); 
} 

// 小さなアバターをロード

$(document).ready(function () { 
$('<div><img src="biuuu.jpg" style="position: relative;" /></div>') 
.css({ 
float: 'left', 
position: 'relative', 
overflow: 'hidden', 
width: '100px', 
height: '100px' 
}) 
.insertAfter($('#biuuu')); 
}); 

//初期ロード

$(window).load(function () { 
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
}); 

3、
に電話してください

<div class="container"> 
<p> 
<img id="biuuu" src="biuuu.jpg" title="biuuu" style="float: left; margin-right: 10px;" /> 
</p> 
</div> 

上記の JavaScript スクリーンショットを使用して展開すると、jQuery が提供する imgAreaSelect プラグインを呼び出すのが非常に簡単です。imgAreaSelect の例
を参照してください。
jQuery プラグイン imgAreaSelect を使用して JavaScript スクリーンショットを実装するのは非常に簡単で、基本的には動的な画像表示であり、ソース画像の位置と選択ボックスのサイズ [幅と高さ] を取得し、JavaScript を簡単に実現します。スクリーンショット機能。