javascript 스크린샷 jQuery 플러그인 imgAreaSelect 사용법 자세한 설명_jquery

사용자가 개인 아바타를 맞춤 설정할 수 있도록 하려면 업로드된 사진의 스크린샷 기능을 제공해야 합니다. 현재 많은 웹사이트, 특히 SNS 웹사이트에서 이러한 기능을 제공하고 있어 매우 실용적입니다. 구현에는 크게 두 가지 형태가 있는데, 하나는 플래시 스크린샷이고 다른 하나는 자바스크립트 스크린샷입니다. 두 가지 방법 모두 장단점이 있습니다. 플래시 스크린샷에 관해서는 UcHome 프로그램의 아바타 업로드 기능을 참조할 수 있지만 이는 아닙니다. 제가 논의하고 싶은 주제는 jQuery의 imgAreaSelect 플러그인을 사용하여 사용자 정의 아바타 [아바타] 자바스크립트 스크린샷 기능을 쉽게 구현하는 자바스크립트 스크린샷을 구현하는 방법입니다.

1. 준비:
JS 파일 2개
1. jquery.js 다운로드: jquery.js
2. jquery.imgareaselect.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 }); 
}); 

셋, 전화

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

위의 자바스크립트 스크린샷을 사용하여 확장하면 많은 동적 기능을 얻을 수 있습니다. jQuery에서 제공하는 imgAreaSelect 플러그인은 호출하기가 매우 간단합니다. imgAreaSelect 예제

jQuery 플러그인 imgAreaSelect를 사용하여 자바스크립트 스크린샷을 구현하는 것은 매우 간단합니다. 기본적으로 동적 이미지 표시이며 소스 이미지의 위치와 선택 상자의 크기[너비 및 높이]를 가져오고 자바스크립트를 쉽게 구현합니다. 스크린샷 기능.