Rumah hujung hadapan web tutorial js 移动端图片上传旋转、压缩问题的解决方案

移动端图片上传旋转、压缩问题的解决方案

Oct 15, 2018 pm 05:20 PM
Muat naik imej Pemampatan imej Pusingan gambar Terminal mudah alih

本篇文章就给大家带来移动端图片上传旋转、压缩问题的解决方案。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

前言

在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片旋转了90度d的问题,包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题,横拍出来的照片就正常显示。因此,可以通过获取手机拍照角度来对照片进行旋转,从而解决这个问题。

Orientation

这个参数并不是所有图片都有的,不过手机拍出来的图片是带有这个参数的。

旋转角度 参数值
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');
});
Salin selepas log masuk

file 则是 input 文件表单上传的文件。上传的文件经过 fileReader.readAsDataURL(file) 就可以实现预览图片了,这方面不清楚的可以查看:HTML5 进阶系列:文件上传下载

旋转

旋转需要用到 canvas 的 rotate() 方法。

ctx.rotate(angle);
Salin selepas log masuk

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;
}
Salin selepas log masuk

第二步就通过 canvas.toDataURL() 方法来压缩照片质量。

canvas.toDataURL("image/jpeg", 1);
Salin selepas log masuk

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"></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>
Salin selepas log masuk

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程jQuery视频教程bootstrap教程

Atas ialah kandungan terperinci 移动端图片上传旋转、压缩问题的解决方案. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mengendalikan pemampatan imej semasa menyimpan imej jauh menggunakan PHP? Bagaimana untuk mengendalikan pemampatan imej semasa menyimpan imej jauh menggunakan PHP? Jul 15, 2023 pm 03:57 PM

Bagaimana untuk mengendalikan pemampatan imej semasa menyimpan imej jauh menggunakan PHP? Dalam pembangunan sebenar, kita selalunya perlu mendapatkan imej daripada rangkaian dan menyimpannya ke pelayan tempatan. Walau bagaimanapun, sesetengah imej jauh mungkin terlalu besar, yang memerlukan kami memampatkannya untuk mengurangkan ruang storan dan meningkatkan kelajuan pemuatan. PHP menyediakan beberapa sambungan berkuasa untuk mengendalikan pemampatan imej, yang paling biasa digunakan ialah perpustakaan GD dan perpustakaan Imagick. Pustaka GD ialah perpustakaan pemprosesan imej popular yang menyediakan banyak fungsi untuk mencipta, mengedit dan menyimpan imej. Berikut adalah kegunaan

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan putaran imej? Bagaimana untuk menggunakan JavaScript untuk mencapai kesan putaran imej? Oct 20, 2023 pm 07:09 PM

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan putaran imej? Dalam pembangunan web, kami sering menghadapi senario di mana kesan putaran imej perlu dicapai, seperti memaparkan imej putaran 360° produk, mencapai kesan karusel imej, dsb. JavaScript ialah bahasa skrip yang berkuasa yang boleh mencapai kesan putaran imej ini dengan mudah. Berikut akan memperkenalkan kaedah untuk mencapai kesan putaran imej berdasarkan JavaScript dan memberikan contoh kod khusus. Pertama, kami mencipta struktur HTML yang mudah

Langkah-langkah untuk melaksanakan muat naik dan paparan imej menggunakan rangka kerja CakePHP Langkah-langkah untuk melaksanakan muat naik dan paparan imej menggunakan rangka kerja CakePHP Jul 29, 2023 pm 04:21 PM

Langkah-langkah untuk melaksanakan muat naik dan paparan imej menggunakan rangka kerja CakePHP Pengenalan: Dalam aplikasi web moden, muat naik dan paparan imej adalah keperluan fungsian biasa. Rangka kerja CakePHP menyediakan pembangun dengan fungsi yang berkuasa dan alatan yang mudah, menjadikannya mudah dan cekap untuk memuat naik dan memaparkan imej. Artikel ini akan memperkenalkan anda kepada cara menggunakan rangka kerja CakePHP untuk memuat naik dan memaparkan imej. Langkah 1: Buat borang muat naik fail Pertama, kita perlu mencipta borang dalam fail paparan untuk pengguna memuat naik imej. Berikut adalah contoh

Applet WeChat melaksanakan fungsi muat naik imej Applet WeChat melaksanakan fungsi muat naik imej Nov 21, 2023 am 09:08 AM

Applet WeChat melaksanakan fungsi muat naik gambar Dengan perkembangan Internet mudah alih, applet WeChat telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Program mini WeChat bukan sahaja menyediakan pelbagai senario aplikasi, tetapi juga menyokong fungsi yang ditentukan oleh pembangun, termasuk fungsi muat naik imej. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi muat naik imej dalam applet WeChat dan memberikan contoh kod khusus. 1. Kerja persediaan Sebelum mula menulis kod, kita perlu memuat turun dan memasang alat pembangun WeChat dan mendaftar sebagai pembangun WeChat. Pada masa yang sama, anda juga perlu memahami WeChat

Selesaikan masalah titik berbilang sentuhan pada terminal mudah alih Vue Selesaikan masalah titik berbilang sentuhan pada terminal mudah alih Vue Jun 30, 2023 pm 01:06 PM

Dalam pembangunan mudah alih, kita sering menghadapi masalah sentuhan berbilang jari. Apabila pengguna menggunakan berbilang jari untuk meleret atau mengezum skrin pada peranti mudah alih, cara mengecam dan bertindak balas terhadap gerak isyarat ini dengan tepat ialah cabaran pembangunan yang penting. Dalam pembangunan Vue, kami boleh mengambil beberapa langkah untuk menyelesaikan masalah sentuhan berbilang jari pada terminal mudah alih. 1. Gunakan pemalam vue-touch vue-touch ialah pemalam gerak isyarat untuk Vue, yang boleh mengendalikan acara sentuhan berbilang jari dengan mudah pada bahagian mudah alih. Kami boleh memasang vue-to melalui npm

Gunakan uniapp untuk melaksanakan fungsi penggiliran imej Gunakan uniapp untuk melaksanakan fungsi penggiliran imej Nov 21, 2023 am 11:58 AM

Menggunakan uniapp untuk melaksanakan fungsi putaran imej Dalam pembangunan aplikasi mudah alih, kita sering menghadapi senario di mana imej perlu diputar Contohnya, sudut perlu dilaraskan selepas mengambil foto, atau kesan yang serupa dengan putaran kamera selepas mengambil gambar. foto tercapai. Artikel ini akan memperkenalkan cara menggunakan rangka kerja uniapp untuk melaksanakan fungsi penggiliran imej dan memberikan contoh kod khusus. uniapp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js, yang boleh membangunkan dan menerbitkan aplikasi untuk iOS, Android, H5 dan platform lain secara serentak. Dilaksanakan dalam uniapp

Cara menggunakan operasi gerak isyarat mudah alih dalam projek Vue Cara menggunakan operasi gerak isyarat mudah alih dalam projek Vue Oct 08, 2023 pm 07:33 PM

Cara menggunakan operasi gerak isyarat mudah alih dalam projek Vue Dengan populariti peranti mudah alih, semakin banyak aplikasi perlu menyediakan pengalaman interaktif yang lebih mesra pada terminal mudah alih. Operasi gerak isyarat ialah salah satu kaedah interaksi biasa pada peranti mudah alih, yang membolehkan pengguna menyelesaikan pelbagai operasi dengan menyentuh skrin, seperti meluncur, mengezum, dsb. Dalam projek Vue, kami boleh melaksanakan operasi gerak isyarat mudah alih melalui pustaka pihak ketiga Perkara berikut akan memperkenalkan cara menggunakan operasi gerak isyarat dalam projek Vue dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan yang istimewa

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi muat naik imej Cara menggunakan PHP dan Vue untuk melaksanakan fungsi muat naik imej Sep 25, 2023 pm 03:17 PM

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi muat naik imej Dalam pembangunan web moden, fungsi muat naik imej adalah keperluan yang sangat biasa. Artikel ini akan memperkenalkan secara terperinci cara menggunakan PHP dan Vue untuk melaksanakan fungsi muat naik imej, dan memberikan contoh kod khusus. 1. Bahagian hadapan (Vue) Pertama, anda perlu mencipta borang untuk memuat naik imej pada bahagian hadapan. Kod khusus adalah seperti berikut:&lt;template&gt;&lt;div&gt;&lt;inputtype="fil

See all articles