Contoh Kode Implementasi Fungsi Avatar Kustom Canvas

Bos mengatakan kepada saya dua hari yang lalu bahwa fungsi avatar khusus di situs web resmi harimau diimplementasikan oleh Flash. Jadi izinkan saya menggunakan kanvas untuk mengimplementasikan fitur yang sama, hehe, baru saja mempelajari kanvas, jadi saya siap setuju (sebenarnya, Anda tidak setuju jika Anda belum mempelajarinya, hahahahaha ~)

Alamat git: https://github.com/ry928330/portraitdiy

• Seret kotak kecil di sebelah kiri, atau mouse ditempatkan di sudut kanan bawah bingkai persegi kecil. hak.
• Masukkan tinggi tinggi, sesuaikan ukuran yang Anda butuhkan untuk menyesuaikan, dan saat ini hanya mendukung gambar avatar yang sama dengan ketinggian yang sama.

Karena Anda harus mengambil tangkapan layar dari area tempat gambarnya, Anda harus membuat kanvas dan menutupi area tempat gambarnya. Di sini, kami memberikan fungsi untuk membuat kanvas posisi yang sama berdasarkan nama kelas elemen di DOM, dan menutupinya pada elemen DOM asli:

 Fungsi CreateCanVasByClassName (TAG) {var canvasinitialwidth = $ ('.' + Tag) .width (); Left -$ ('.' + Tag) .parent ('. Portraitcontainer'). PROTRAITCONTING '). (). Kiri = // ClearCanvasobj.top = Top; : 'Canvas', Lebar: Canvasinitialwidth, Tinggi: CanvasinitialHeight}); Var appendele = $ ('. Portraitcontainer'). , CanvasInitight);

Dengan kanvas ini, Anda dapat beroperasi dengan nakal di area tempat gambar Anda berada. Pertama, turunkan seluruh area untuk menggambar bayangan hitam ringan, dan kemudian hapus warna di area kotak kecil awal. Kemudian tambahkan mousedown, mouseMove, acara mouseUp ke seluruh halaman.

 Function mousemovefunc (event) { / * Bertindak pada acara * / var newmousex = event.clientx -clearcanvasobj.left; Clearcanvasobj.width && nowmousey> = clearcanvasobj.ysstart && nowmousey <= clearcanvasobj.ysstart + clearcanvasobj.heigh) anvasarea = true; > = Clearcanvasobj.xstart + clearcanvasobj.width -10) && (nowmousex <= clearcanvasobj.xstart + clearcanvasobj.width + 10) && ey> = clearcanvasobj.ysstart + clearcanBasobj.height -10) & (nowmouse nowmouse.ysstart + clearcanBasobj.height -10) & (nowmoUsey Clearcanvasobj.height + 10) {clearcanvasobj.iscanvasarea = true; .cursor = 'default';} var Outdomwidth = $ (. Imgcontainer). ; , clearcanvasobj.ysstart) ry_ctx.fillrect (clearcanvasobj.xstart, clearc anvasobj.ystart, = XDistance; lebar)> = OutdomWidth) {clearCanvv). ('2', clearcanvasobj.xstart, clearcanvasobj.ystart) ry_ctx.clearrect (clearcanvasobjj .xstart. asobj. Lebar, ClearCanvasobj.height, ImageUrl) ClearCanvasobj.mousex = Event ; xStart + clearcanvasobj.width> = outricomwidth) {clearcanvasobj.width = outerdomwidth -clearcanvasob.xstart; Earcanvasobj.ystart; Tinggi = Outerdomheight -ClearCanvasobj.ystart;} if (clearcanvasobj.width <= 10) {clearcanvasobj.width = 10;} if (clearcanvasobj.heigh <= 10) {clearcanobsoB J.height = 10;} ry_ctx.clum.claRcanB. xStart, clearcanvasobj.ystart, clearcanvasobj.width, clearcanvasobj.height); vasobj.mousey = event.clienty;}}

Dalam fungsi tersebut, Anda perlu memperhatikan kondisi batas menyeret, satu adalah bahwa kotak tidak dapat diseret ke batas gambar di mana gambar berada; Bingkai terletak untuk mengubah gaya mouse. Selama proses seret, kami terus -menerus mencatatkan area di mana gerakan persegi bergerak (yaitu, bayangan menggambar terus menerus), dan kemudian disebut fungsi ClearRect di posisi baru untuk mengeluarkan kembali bingkai persegi kecil. Dalam proses seret atau peregangan, kami akan terus -menerus memanggil fungsi penghasilan. Kodenya adalah sebagai berikut:

 Fungsi Menghasilkan Memproduksi (ImageUrl, Kiri, Top, Lebar, Tinggi) {Var IMG = Image baru (); Foreach (function (it, index) {targetCanvas = document.geteLementById (item.class); targetctx.push (targetCanvas.getContext ('2d')); Targe tctx [index] .clearrect (0,0, item.width, item.head);

Mari kita bicara tentang peran fungsi ini. Karena Anda harus mengubah area di mana DOM terletak menjadi gambar sehingga Anda dapat menggunakan fungsi DrawImage untuk mencegat area yang Anda butuhkan. Jadi kami menggunakan fungsi perpustakaan HTML2Canvas untuk membicarakan gambar.

 Html2canvas (document.geteLementById ('imgcontainer'), {onrendered: function (canvas) {var imageUrl = canvastranstoimage (canavs); ...}) dapat vastranstoimage (canvas) {var imageurl = canvas.todat ');

Kemudian, Anda dapat memfasilitasi wadah kanvas di sebelah kanan.

Ketergantungan terkait: