移动端图片上传旋转、压缩的解决方案
前言
在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片旋转了90度d的问题,包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题,横拍出来的照片就正常显示。因此,可以通过获取手机拍照角度来对照片进行旋转,从而解决这个问题。
Orientation
这个参数并不是所有图片都有的,不过手机拍出来的图片是带有这个参数的。
旋转角度 | 参数值 |
---|---|
0° | 1 |
顺时针90° | 6 |
逆时针90° | 8 |
180° | 3 |
参数为 1 的时候显示正常,那么在这些横拍显示正常,即 Orientation = 1 的手机上,竖拍的参数为 6。
想要获取 Orientation 参数,可以通过 exif.js 库来操作。exif.js 功能很多,体积也很大,未压缩之前足足有 30k,这对手机页面加载来说是非常大影响的。而我只需要获取 Orientation 信息而已,所以我这里删减了 exif.js 库的一些代码,将代码缩小到几KB。
exif.js 获取 Orientation :
EXIF.getData(file, function() { var Orientation = EXIF.getTag(this, 'Orientation');});
file 则是 input 文件表单上传的文件。上传的文件经过 fileReader.readAsDataURL(file) 就可以实现预览图片了,这方面不清楚的可以查看:HTML5 进阶系列:文件上传下载
旋转
旋转需要用到 canvas 的 rotate() 方法。
ctx.rotate(angle);
rotate 方法的参数为旋转弧度。需要将角度转为弧度:degrees * Math.PI / 180
旋转的中心点默认都在 canvas 的起点,即 ( 0, 0 )。旋转的原理如下图:
旋转之后,如果从 ( 0, 0 ) 点进行 drawImage(),那么画出来的位置就是在左图中的旋转 90 度后的位置,不在可视区域呢。旋转之后,坐标轴也跟着旋转了,想要显示在可视区域呢,需要将 ( 0, 0 ) 点往 y 轴的反方向移 y 个单位,此时的起始点则为 ( 0, -y )。
同理,可以获得旋转 -90 度后的起始点为 ( -x, 0 ),旋转 180 度后的起始点为 ( -x, -y )。
压缩
手机拍出来的照片太大,而且使用 base64 编码的照片会比原照片大,那么上传的时候进行压缩就非常有必要的。现在的手机像素这么高,拍出来的照片宽高都有几千像素,用 canvas 来渲染这照片的速度会相对比较慢。
因此第一步需要先对上传照片的宽高做限制,判断宽度或高度是否超出哪个范围,则等比压缩其宽高。
var ratio = width / height;if(imgWidth > imgHeight && imgWidth > xx){imgWidth = xx;imgHeight = Math.ceil(xx / ratio);}else if(imgWidth < imgHeight && imgHeight > yy){imgWidth = Math.ceil(yy * ratio);imgHeight = yy;}
第二步就通过 canvas.toDataURL() 方法来压缩照片质量。
canvas.toDataURL("image/jpeg", 1);
toDataURL() 方法返回一个包含图片展示的 data URI 。使用两个参数,第一个参数为图片格式,默认为 image/png。第二个参数为压缩质量,在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。
总结
综合以上,例子的代码包括精简的exif.js库地址:file-demo
主要的核心代码如下:
<input type="file" id="files" ><img src="blank.gif" id="preview"> <script src="small-exif.js?1.1.11"></script><script>var ipt = document.getElementById('files'),img = document.getElementById('preview'),Orientation = null;ipt.onchange = function () {var file = ipt.files[0],reader = new FileReader(),image = new Image();if(file){EXIF.getData(file, function() { Orientation = EXIF.getTag(this, 'Orientation');}); reader.onload = function (ev) {image.src = ev.target.result; image.onload = function () {var imgWidth = this.width,imgHeight = this.height; // 控制上传图片的宽高if(imgWidth > imgHeight && imgWidth > 750){imgWidth = 750; imgHeight = Math.ceil(750 * this.height / this.width); }else if(imgWidth < imgHeight && imgHeight > 1334){imgWidth = Math.ceil(1334 * this.width / this.height); imgHeight = 1334; }var canvas = document.createElement("canvas"),ctx = canvas.getContext('2d'); canvas.width = imgWidth;canvas.height = imgHeight; if(Orientation && Orientation != 1){switch(Orientation){case 6: // 旋转90度canvas.width = imgHeight; canvas.height = imgWidth; ctx.rotate(Math.PI / 2); // (0,-imgHeight) 从旋转原理图那里获得的起始点ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight); break;case 3: // 旋转180度ctx.rotate(Math.PI); ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);break;case 8: // 旋转-90度canvas.width = imgHeight; canvas.height = imgWidth; ctx.rotate(3 * Math.PI / 2); ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);break; }}else{ctx.drawImage(this, 0, 0, imgWidth, imgHeight);}img.src = canvas.toDataURL("image/jpeg", 0.8); }}reader.readAsDataURL(file); }}</script>
Atas ialah kandungan terperinci 移动端图片上传旋转、压缩的解决方案. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Dengan pemampatan memori pada Windows 11, peranti anda akan tercekik walaupun dengan jumlah RAM yang terhad. Dalam artikel ini, kami akan menunjukkan kepada anda cara mendayakan atau melumpuhkan pemampatan memori pada Windows 11. Apakah pemampatan memori? Pemampatan memori ialah ciri yang memampatkan data sebelum menulisnya ke RAM, sekali gus menyediakan lebih banyak ruang storan padanya. Sudah tentu, lebih banyak data yang disimpan dalam memori fizikal diterjemahkan kepada operasi sistem yang lebih pantas dan prestasi keseluruhan yang lebih baik. Ciri ini didayakan secara lalai dalam Windows 11, tetapi jika ia tidak aktif entah bagaimana, anda boleh melumpuhkan atau mendayakannya semula. Bagaimana untuk membolehkan pemampatan memori dalam Windows 11? Klik bar carian, taip powershell dan klik

Saya mendapati bahawa pakej termampat yang dimuat turun dari laman web muat turun tertentu akan lebih besar daripada pakej termampat asal selepas penyahmampatan Perbezaannya ialah berpuluh-puluh Kb dan berpuluh-puluh Mb jika fail kecil, jika terdapat banyak fail, kos penyimpanan akan meningkat dengan banyak. Saya telah membuat beberapa kajian mengenainya dan boleh belajar daripadanya jika perlu. Tahap mampatan: 9-mampatan melampau Saiz kamus: 256 atau 384, semakin dimampatkan kamus, semakin perlahan perbezaan kadar mampatan lebih besar sebelum 256MB dan tiada perbezaan dalam kadar mampatan selepas 384MB: maksimum 273 Parameter: f=BCJ2, uji dan tambah kadar mampatan parameter akan lebih tinggi

Dengan kemunculan era digital, platform muzik telah menjadi salah satu cara utama untuk orang ramai memperoleh muzik. Namun, kadangkala apabila kita mendengar lagu, kita dapati tiada lirik yang sangat mengganggu. Ramai yang berharap lirik dapat dipaparkan ketika mendengar lagu untuk lebih memahami isi dan emosi lagu tersebut. QQ Music, sebagai salah satu platform muzik terbesar di China, turut menyediakan pengguna dengan fungsi memuat naik lirik, supaya pengguna dapat menikmati muzik dengan lebih baik dan merasai konotasi lagu tersebut. Berikut akan memperkenalkan cara memuat naik lirik pada QQ Music. pertama

Selagi komputer dilengkapi dengan kamera, ia boleh mengambil gambar, tetapi sesetengah pengguna masih tidak tahu bagaimana untuk mengambil gambar dan memuat naiknya Sekarang saya akan memberikan pengenalan terperinci kepada anda tentang kaedah mengambil gambar di komputer. supaya pengguna boleh memuat naik gambar di mana sahaja mereka mahu. Cara mengambil foto dan memuat naiknya pada komputer 1. Komputer Mac 1. Buka Finder dan klik aplikasi di sebelah kiri. 2. Selepas dibuka, klik aplikasi Kamera. 3. Hanya klik butang foto di bawah. 2. Komputer Windows 1. Buka kotak carian di bawah dan masukkan kamera. 2. Kemudian buka aplikasi yang dicari. 3. Klik butang foto di sebelahnya.

1. Buka Muzik Kugou dan klik pada gambar profil anda. 2. Klik ikon tetapan di penjuru kanan sebelah atas. 3. Klik [Muat Naik Muzik Berfungsi]. 4. Klik [Muat Naik Berfungsi]. 5. Pilih lagu dan klik [Seterusnya]. 6. Akhir sekali klik [Muat naik].

Kelajuan muat naik menjadi sangat perlahan? Saya percaya ini adalah masalah yang akan dihadapi oleh ramai rakan apabila memuat naik sesuatu pada komputer mereka Jika rangkaian tidak stabil semasa menggunakan komputer untuk memindahkan fail, kelajuan muat naik akan menjadi sangat perlahan. Di bawah, editor akan memberitahu anda bagaimana untuk menyelesaikan masalah kelajuan muat naik komputer yang perlahan. Apabila bercakap tentang kelajuan rangkaian, kita semua tahu bahawa kelajuan membuka halaman web, kelajuan muat turun, dan kelajuan muat naik juga sangat kritikal, terutamanya sesetengah pengguna sering perlu memuat naik fail ke cakera rangkaian, jadi kelajuan muat naik yang pantas sudah pasti akan menjimatkan. anda banyak wang. Kurang masa, apa yang perlu saya lakukan jika kelajuan muat naik perlahan? Di bawah, editor membawakan anda gambar dan teks tentang cara menangani kelajuan muat naik komputer yang perlahan. Bagaimana untuk menyelesaikan masalah kelajuan muat naik komputer yang perlahan Klik "Mula--Jalankan" atau "Kunci Tetingkap"?

Ramai rakan perlu merakam skrin untuk kerja pejabat atau memindahkan fail, tetapi kadangkala masalah fail yang terlalu besar menyebabkan banyak masalah berikut adalah penyelesaian kepada masalah fail yang terlalu besar, mari kita lihat. Apa yang perlu dilakukan jika fail rakaman skrin win10 terlalu besar: 1. Muat turun perisian Format Factory untuk memampatkan fail. Alamat muat turun >> 2. Masukkan halaman utama dan klik pilihan "Video-MP4". 3. Klik "Tambah Fail" pada halaman format penukaran dan pilih fail MP4 untuk dimampatkan. 4. Klik "Konfigurasi Output" pada halaman untuk memampatkan fail mengikut kualiti output. 5. Pilih "Kualiti dan Saiz Rendah" daripada senarai konfigurasi juntai bawah dan klik "OK". 6. Klik "OK" untuk melengkapkan import fail video. 7. Klik "Mula" untuk memulakan penukaran. 8. Selepas selesai, anda boleh

Apabila kita menggunakan perisian pejabat Word untuk pemprosesan dokumen, kita selalunya perlu memasukkan beberapa gambar dan bahan lain ke dalam dokumen Walau bagaimanapun, untuk mencapai susun atur yang cantik, kita juga perlu melakukan beberapa susun atur khas pada gambar, antaranya pemprosesan putaran pemprosesan tetapan taip yang paling asas, walau bagaimanapun, bagi sesetengah pendatang baru di tempat kerja yang baru bersentuhan dengan perisian pejabat Word, mereka mungkin tidak dapat memproses gambar dalam dokumen Word. Di bawah, kami akan berkongsi cara memutar gambar dalam Word. Kami berharap ia akan membantu dan memberi inspirasi kepada anda. 1. Mula-mula, kami membuka dokumen Word, dan kemudian klik butang Sisip-Gambar pada bar menu untuk memasukkan gambar rawak pada komputer untuk memudahkan operasi dan demonstrasi kami. 2. Jika kita ingin memutarkan imej, maka kita perlu
