tangkapan skrin javascript jQuery plug-in imgAreaSelect penggunaan terperinci explanation_jquery

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; 

//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' 
}); 
} 

//Muat avatar kecil

$(document).ready(function () { 
$('<div><img  src="/static/imghwm/default1.png"  data-src="biuuu.jpg"  class="lazy"   style="max-width:90%" / alt="tangkapan skrin javascript jQuery plug-in imgAreaSelect penggunaan terperinci explanation_jquery" ></div>') 
.css({ 
float: 'left', 
position: 'relative', 
overflow: 'hidden', 
width: '100px', 
height: '100px' 
}) 
.insertAfter($('#biuuu')); 
}); 

//Pemuatan awal

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

Tiga, hubungi

<div class="container"> 
<p> 
<img  src="/static/imghwm/default1.png"  data-src="biuuu.jpg"  class="lazy"  id="biuuu" title="biuuu"   style="max-width:90%" / alt="tangkapan skrin javascript jQuery plug-in imgAreaSelect penggunaan terperinci explanation_jquery" > 
</p> 
</div> 

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.