Rumah > hujung hadapan web > tutorial js > tangkapan skrin javascript jQuery plug-in imgAreaSelect penggunaan terperinci explanation_jquery

tangkapan skrin javascript jQuery plug-in imgAreaSelect penggunaan terperinci explanation_jquery

WBOY
Lepaskan: 2016-05-16 15:02:24
asal
2141 orang telah melayarinya

Untuk membolehkan pengguna menyesuaikan avatar peribadi, perlu menyediakan fungsi tangkapan skrin gambar yang dimuat naik Pada masa ini, banyak laman web, terutamanya laman web SNS, menyediakan fungsi sedemikian, yang sangat praktikal. Terdapat dua bentuk pelaksanaan utama, satu adalah tangkapan skrin kilat, dan satu lagi adalah tangkapan skrin javascript Kedua-dua kaedah mempunyai kebaikan dan keburukan mereka sendiri Mengenai tangkapan skrin Flash, anda boleh merujuk kepada fungsi muat naik avatar dalam program UcHome, tetapi ini tidak. topik yang ingin saya bincangkan. Fokus utama saya di sini ialah cara melaksanakan tangkapan skrin javascript, menggunakan pemalam imgAreaSelect jQuery untuk melaksanakan fungsi tangkapan skrin javascript avatar tersuai dengan mudah.

1. Penyediaan:
Dua fail JS
1. muat turun jquery.js: jquery.js
2. jquery.imgareaselect.js Muat Turun: jquery.imgareaselect.js[imgareaselect-0.6.2.zip]

2. Gunakan


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



//Avatar dinamik Dapatkan lebar, tinggi, jidar kiri dan jidar kanan kotak yang sedang dipilih

$('#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' 
}); 
} 
Salin selepas log masuk


//Muat avatar kecil

$(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')); 
}); 
Salin selepas log masuk



//Pemuatan awal

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


Tiga, hubungi

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


Menggunakan tangkapan skrin javascript di atas untuk mengembangkan boleh mencapai banyak fungsi dinamik Pemalam imgAreaSelect yang disediakan oleh jQuery sangat mudah untuk dipanggil Untuk aplikasi lain yang berkaitan, sila rujuk kepada: Contoh imgAreaSelect

Ia adalah sangat mudah untuk menggunakan pemalam jQuery imgAreaSelect untuk melaksanakan tangkapan skrin javascript Ia pada asasnya paparan imej dinamik, mendapatkan kedudukan imej sumber dan saiz kotak pilihan [lebar dan tinggi], dan dengan mudah menyedari javascript. fungsi tangkapan skrin.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan