H5 memanggil kamera untuk mengambil gambar dan mengompres kode contoh gambar

Penulis：Eve Cole Waktu Pembaruan：2025-02-21 16:48:02

Atur dokumen, cari kode instan untuk H5 untuk memanggil kamera untuk mengambil gambar dan mengompres gambar, dan memilah dan merampingkannya.

latar belakang

Baru -baru ini, saya ingin membuat halaman H5.

Titik fungsi utama dari ujung depan adalah:

Bagaimana menelepon kamera
Cara mengompres gambar
Gambar ke base64

H5 Call Camera/Album

Cara termudah untuk memanggil kamera adalah dengan menggunakan properti file input [kamera]:

 <input type = file capture = carera accept = image/*> // kamera <input type = file accept = gambar/*> // album

Kompatibilitas metode ini masih bermasalah. Saya mencari banyak solusi bagus di internet, dan saya hanya bisa terus menulis. Esensi Esensi

Kompresi gambar

Kompresi gambar digunakan untuk menggunakan FileReader dan <canvas> .

Objek Filereader memungkinkan aplikasi web untuk membaca konten file yang disimpan di komputer secara tidak sinkron, dan menggunakan file atau objek gumpalan untuk menentukan file atau data yang ingin Anda baca.

<Canvas> adalah elemen HTML yang dapat menggunakan skrip untuk menggambar grafik, yang dapat menggambar grafik dan animasi sederhana.

Kompresi gambar harus mengompres resolusi dan kualitas gambar. gambar.

 Var max_wh = 800; ; / Dataurl yang diperoleh melalui filerereader

Lalu ada kualitas mengompresi gambar. Buat tag <an Canvas> secara dinamis dan kemudian kompres gambar:

 VAR KUALITAS = 80; , 0, Image.Width, Image.Height);

Kemudian hasil mengunggah ke server dan menampilkan server, tetapi semuanya tidak begitu mulus. Esensi Esensi Setelah ponsel iOS dikompresi, gambar diputar secara tidak dapat dijelaskan dan terus menyelesaikan masalah.

Selesaikan rotasi gambar iOS

Kutipan pertama exif.js, dan dapatkan informasi arah foto melalui exif.getData dan exif.gettg.

 // file dapatkan exif.getData (file, function () {orientasi = exif.gettg (file, 'orientasi');});

Arti dari setiap nilai orientasi sesuai dengan ponsel iPhone untuk mengambil gambar:

Orientasi	menggambarkan
3	Pemotretan layar horizontal iPhone, pada saat ini tombol beranda ada di sebelah kiri, gambar berputar 180 derajat dibandingkan dengan posisi semula
6	Pemotretan iPhone secara vertikal, pada saat ini tombol beranda di bawah (arah ponsel), dan gambar dapat berputar 90 derajat dibandingkan dengan posisi semula.
8	IPhone memotret layar vertikal, pada saat ini tombol beranda di atas, dan gambar berputar 90 derajat searah jarum jam dibandingkan dengan posisi asli.

Setelah mendapatkan informasi arah gambar, operasi rotasi yang sesuai dibuat sesuai dengan nilai yang diperoleh.

 Sakelar (orientasi) {case 6: case 8: cvs.width = tinggi; pada saat ini tombol kandang pada kasus kiri 3: // 180 derajat ke konteks rotate kiri. Translate (lebar, tinggi); Normal mengambil arah ponsel) Kasus 6: Context.rotate (0,5 * Math.pi); 8: // Waktu terbalik Rotating 90 derajat konteks.rotate (-0.5 * Math.pi);

Kemudian unggah gambar dan temukan bahwa gambar di bawah iOS normal.

Kode lengkap diberikan di bawah ini:

 $ ('input [type = file]'). /I.test (file.type) {exif.getData (file, function () {orientation = exif.gettag (file, 'orientasi');}); max_wh = 800; Var Image = New Image (); ; 80; .height = lebar;} var context = cvs.getContext (2d); 180 derajat ke kiri Rotate Connect. Telepon.) counterclockwise.rotate (-0.5 * Math.pi); Image/JPEG ', PERTANYAAN/100); )}});

Di atas adalah semua isi artikel ini.