這篇文章給大家分享的是有關(guān)JS中圖片處理與合成的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)從2013年創(chuàng)立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都網(wǎng)站建設(shè)、做網(wǎng)站網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元陸港做網(wǎng)站,已為上家服務(wù),為陸港各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575引言
圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需,想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中,也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。由于過去一段時(shí)間公司的業(yè)務(wù)需求,讓我在這方面積累了一些干貨,趁著年后這段時(shí)間總結(jié)成一系列文章與大家分享,希望能對(duì)各位努力中的前端童鞋帶來啟發(fā)和幫助
本系列分成以下4個(gè)部分:
基礎(chǔ)類型圖片處理技術(shù)之縮放與裁剪;
基礎(chǔ)類型圖片處理技術(shù)之圖片合成;
基礎(chǔ)類型圖片處理技術(shù)之文字合成;
算法類型圖片處理技術(shù);
通過這些積累,我封裝了幾個(gè)項(xiàng)目中常用的功能:
圖片合成: Example Git 圖片裁剪: Example Git 人像摳除: Example Git
嘮叨完這些老套路后,我們開始起飛!
首先,我這里將前端圖片處理暫且分成兩種類型:基礎(chǔ)類型 與 算法類型;
基礎(chǔ)類型的圖片處理技術(shù): 圖片縮放,旋轉(zhuǎn),添加邊框,圖片合成,拼圖等業(yè)務(wù)都屬于基礎(chǔ)類型的圖片處理,其區(qū)分點(diǎn)在于無需使用像素級(jí)別的算法,而是通過計(jì)算改變圖片的尺寸及位置等來改造圖片。例如常用的貼紙功能:
算法類型的圖片處理: 這類型的圖片處理復(fù)雜度較高,特點(diǎn)是通過像素級(jí)別算法對(duì)圖片的像素點(diǎn)進(jìn)行RGBA
通道值等進(jìn)行改造,例如我們使用photshop
或者美圖秀秀等工具對(duì)圖片進(jìn)行的 美顏 / 濾鏡 / 黑白 / 摳圖 / 模糊等操作,這類型的重點(diǎn)主要在于算法和性能層面。例如常用的妝容功能:
本系列首先從基礎(chǔ)類型處理開啟我們的旅程。基礎(chǔ)類型的圖片處理在實(shí)際項(xiàng)目中有著大量的使用場(chǎng)景,主要是運(yùn)用canvas
的能力來完成,不存在性能和兼容性問題,能夠達(dá)到線上運(yùn)行標(biāo)準(zhǔn)。我這里將基礎(chǔ)類型的圖片處理大致的分成以下幾種類型,這些類型基本能覆蓋日常所有業(yè)務(wù)場(chǎng)景:
圖片的縮放;
圖片的裁剪;
圖片的合成;
圖片與圖片的合成,例如貼紙,邊框,水印等;為圖片添加文字;為圖片添加基礎(chǔ)幾何圖形;
Tips: 我已將該類型的圖片處理場(chǎng)景封裝成了一個(gè)插件,基本上能應(yīng)付所有這類型圖片處理的需求,GIT地址 (歡迎探討);
在介紹具體的功能前,由于圖片的繪制完全的依賴于圖片的加載,因此先來了解一些前置知識(shí)。
1、圖片的跨域
首先,圖片加載并繪制涉及了圖片的跨域問題,因此如果是一張?jiān)诰€的圖片,需要在圖片服務(wù)器上設(shè)置跨域頭,并且在前端加載圖片之前將<img>
標(biāo)簽的crossOrigin
設(shè)置為*
,否則繪制到畫布的時(shí)候會(huì)報(bào)跨域的錯(cuò)誤。
Tips: 這里積累了一些小坑,可以跟大家分享下:
crossOrigin
需要嚴(yán)格設(shè)置,既只有是線上圖片時(shí),才設(shè)置,而本地路徑或者base64
時(shí),則一定不能設(shè)置,否則在某些系統(tǒng)下會(huì)報(bào)錯(cuò),導(dǎo)致圖片加載失?。?/p>
當(dāng)項(xiàng)目為本地包環(huán)境時(shí),例如內(nèi)置于App
中時(shí),crossOrigin
值無效,webview
的安全機(jī)制會(huì)導(dǎo)致無論該值設(shè)置與否,都會(huì)報(bào)跨域的錯(cuò)誤。解決辦法是:需要將所有圖片轉(zhuǎn)換成base64
才能正確繪制;
crossOrigin
值一定要在圖片加載之前設(shè)置,即為<img>
賦值src
之前進(jìn)行設(shè)置,否則無效;
2、圖片的加載
由于canvas
的繪制需要的是已經(jīng)加載完成的圖片,我們需要確保繪制的素材圖片是已經(jīng)加載完成的,因此我們需要使用<img>
的onload
事件,可以使用html
中已存在的圖片,或者用js
創(chuàng)建一個(gè)圖片對(duì)象:
function loadImage(image, loader, error){ // 創(chuàng)建 image 對(duì)象加載圖片; let img = new Image(); // 當(dāng)為線上圖片時(shí),需要設(shè)置 crossOrigin 屬性; if(image.indexOf('http') == 0)img.crossOrigin = '*'; img.onload = () => { loaded(img); // 使用完后清空該對(duì)象,釋放內(nèi)存; setTimeout(()=>{ img = null; },1000); }; img.onerror = () => { error('img load error'); }; img.src = image; }
介紹圖片加載的前置知識(shí)后,我們先來看最簡(jiǎn)單的圖片處理---縮放與裁剪!
Tips: 相信大家閱讀本文時(shí),如果對(duì)canvas
不太了解,可以查詢下對(duì)應(yīng)的API
文檔即可,本文不再對(duì)canvas
基礎(chǔ)API
做詳細(xì)講解。
一、圖片的縮放
圖片的縮放最常見的場(chǎng)景是做圖片的壓縮。在保證圖片清晰的前提下通過合理地縮小圖片尺寸,能大大的降低圖片的大小。在實(shí)際應(yīng)用場(chǎng)景中,有著廣泛的用途。例如圖片上傳時(shí),用戶自主上傳的圖片可能是一張非常大的尺寸,例如現(xiàn)在手機(jī)所拍攝的照片尺寸經(jīng)常能達(dá)到1920*2560
的尺寸,大小可能超過5M。而在項(xiàng)目中,我們可能并不需要用到這么大的尺寸,此時(shí)對(duì)圖片的壓縮能大大的優(yōu)化加載速度和節(jié)省帶寬;
1、新建一個(gè)canvas
畫布,將寬高設(shè)置為需要壓縮到的尺寸;
該畫布既為圖片縮放后的尺寸,此處有個(gè)點(diǎn)是需要保證圖片的比例不變, 因此需要通過計(jì)算得出畫布的寬與高:
let imgRatio = img.naturalWidth / img.naturalHeight; // 創(chuàng)建一個(gè)畫布容器; let cvs = document.createElement('canvas'); // 獲取容器中的畫板; let ctx = cvs.getContext('2d'); cvs.width = 1000; cvs.height = cvs.width / imgRatio;
2、將圖片畫入后再導(dǎo)出成base64
;
這里使用2個(gè)最常用的方法:
ctx.drawImage(image, dx, dy, dw, dh)
: 這個(gè)方法其實(shí)最多可以接收9個(gè)參數(shù), 實(shí)現(xiàn)壓縮,只需要使用其中的5個(gè)參數(shù)即可, 其余參數(shù)在其它部分使用到時(shí)再做詳解;
image : 需要繪制的圖片源,需要接收已經(jīng) 加載完成 的HTMLImageElement
,HTMLCanvasElement
或者HTMLVideoElement
; dx / dy : 相對(duì)于畫布左上角的繪制起始點(diǎn)坐標(biāo); dw / dh : 繪制的寬度和高度,寬高比例并不鎖定,可使圖片變形;
cvs.toDataURL(type, quality)
: 該方法用于將畫布上的內(nèi)容導(dǎo)出成base64
格式的圖片,可配置2個(gè)參數(shù);
type: 圖片格式, 一般可以使用image/png
或者image/jpeg
, 當(dāng)圖片不包含透明時(shí),建議使用jpeg
,可使導(dǎo)出的圖片大小減小很多; quality: 圖片質(zhì)量,可使用0~1
之間的任意值;經(jīng)過測(cè)試,該值設(shè)置成0.9
時(shí)較為合適,可以有效減小圖片文件大小且基本不影響圖片清晰度,導(dǎo)出后的base64
既為壓縮后的圖片;
Tips: 此處有個(gè)坑, 想導(dǎo)出jpg
格式的圖片必須用image/jpeg
,不能使用image/jpg
;
// 將原圖等比例繪制到縮放后的畫布上; ctx.drawImage(image, 0, 0, cvs.width, cvs.height); // 將繪制后的圖導(dǎo)出成 base64 的格式; let b64 = cvs.toDataURL('image/jpeg', 0.9);
3.多種格式的圖片轉(zhuǎn)換成base64
;
我們常用的圖片上傳功能,我們使用的是原生的<input type="file">
標(biāo)簽,此時(shí)獲取到的是File
格式的圖片,圖片的格式各異且尺寸很大,我們應(yīng)該壓縮處理后再使用。
使用FileReader
:
let file = e.files[0]; if(window.FileReader) { let fr = new FileReader(); fr.onloadend = e => { let b64 = e.target.result; // b64即為base64格式的用戶上傳圖; }; fr.readAsDataURL(file); }
對(duì)base64
的圖片使用剛才的canvas
方式進(jìn)行壓縮的處理;
Tips: 這里有個(gè)小坑是,圖片的EXIF
信息中的方向值會(huì)影響圖片的展示,在IOS
會(huì)出現(xiàn)圖片的寬高與圖片的方向不匹配的問題,因此需要進(jìn)行特殊處理,矯正圖片的方向。方案:
1、可以使用exif.js
來獲取圖片信息中的Orientation
屬性,利用canvas
的旋轉(zhuǎn)繪制來矯正;
2、這里有個(gè)canvasResize.js
插件,可以解決從File
到base64
的所有問題。
二、圖片的裁剪
在實(shí)際項(xiàng)目中,由于圖片的寬高比例各式各樣,而展示和使用一般需要一個(gè)較為固定的比例,此時(shí)便需要將圖片裁剪成我們需要的寬高比例,使用到的方式其實(shí)和圖片的縮放基本一致,主要是通過調(diào)整drawImage
的dx, dy
參數(shù)來實(shí)現(xiàn)。原理其實(shí)是,將drawImage
的繪制起始點(diǎn)(dx, dy)
向上偏移,此時(shí)由于canvas
已被我們?cè)O(shè)置成期望裁剪后的尺寸,而超出畫布的部分不會(huì)繪制,從而達(dá)到裁剪的目的;通過靈活的設(shè)置值,基本可以完成各種圖片裁剪需求,簡(jiǎn)單示例圖(黑色框代表創(chuàng)建的畫布的尺寸):
此處以需要將一張600*800
的長(zhǎng)方形圖豎直居中裁剪為600*600
的正方形圖為例, 簡(jiǎn)單封裝成一個(gè)功能函數(shù):
// 使用方式: let b64 = cropImage(img, { width : 600, height : 600, }); // 居中裁剪 function cropImage(img, ops){ // 圖片原始尺寸; let imgOriginWidth = img.naturalWidth, imgOriginHeight = img.naturalHeight; // 圖片長(zhǎng)寬比,保證圖片不變形; let imgRatio = imgOriginWidth / imgOriginHeight; // 圖片裁剪后的寬高, 默認(rèn)值為原圖寬高; let imgCropedWidth = ops.width || imgOriginWidth, imgCropedHeight = ops.height || imgOriginHeight; // 計(jì)算得出起始坐標(biāo)點(diǎn)的偏移量, 由于是居中裁剪,因此等于 前后差值 / 2; let dx = (imgCropedWidth - imgOriginWidth) / 2, dy = (imgCropedHeight - imgOriginHeight) / 2; // 創(chuàng)建畫布,并將畫布設(shè)置為裁剪后的寬高; let cvs = document.createElement('canvas'); let ctx = cvs.getContext('2d'); cvs.width = imgCropedWidth; cvs.height = imgCropedHeight; // 繪制并導(dǎo)出圖片; ctx.drawImage(img, dx, dy, imgCropedWidth, imgCropedWidth / imgRatio); return cvs.toDataURL('image/jpeg', 0.9); }
三、圖片的旋轉(zhuǎn)
圖片的旋轉(zhuǎn)的原理同樣也是將圖片繪制到畫布上進(jìn)行旋轉(zhuǎn)后再導(dǎo)出。其實(shí)使用到的是canvas
的rotate
方法;
let cvs = document.createElement('canvas'); let ctx = cvs.getContext('2d'); // 將參照點(diǎn)移動(dòng)到畫板的中心點(diǎn); ctx.translate(ctx.width/2, ctx.height/2); // 旋轉(zhuǎn)畫板; ctx.rotate = 90; // 繪制圖片; ctx.drawImage(img); // 導(dǎo)出得到旋轉(zhuǎn)后的圖片; cvs.toDataURL();
這里有個(gè)比較特別的部分,就是這里旋轉(zhuǎn)的是畫布的畫板部分,并不是整個(gè)畫布容器,而畫布容器外面不會(huì)被繪制,因此這里就會(huì)出現(xiàn)一個(gè)圖像四個(gè)角被裁剪掉的問題:
解決的方式就是:
將畫布容器放大,變成:
上面這個(gè)例子中,由于圖片是正方形,因此將容器的寬高放大1.5倍便可保證圖片不會(huì)被裁剪,而現(xiàn)實(shí)中的圖片由于寬高比例不定,因此這個(gè)放大系數(shù)是一個(gè)動(dòng)態(tài)的值:
Tips: 由于我們將畫板基點(diǎn)移動(dòng)到畫布中心了,因此在繪制的時(shí)候,要相對(duì)于基點(diǎn)調(diào)整dx
與dy
;
// 創(chuàng)建畫布,獲取畫板; ... // 放大系數(shù)為 let iw = img.width, ih = img.height; let ir = iw > ih ? iw / ih : ih / iw; cvs.width = iw * ir * 1.5; cvs.height = ih * ir * 1.5; // 將參照點(diǎn)移動(dòng)到畫板的中心點(diǎn); ctx.translate(cvs.width/2, cvs.height/2); // 旋轉(zhuǎn)畫板; ctx.rotate = 90; // 繪制圖片; ctx.drawImage(img, -cvs.width/2, -cvs.height/2); // 導(dǎo)出圖片; ...
感謝各位的閱讀!關(guān)于“JS中圖片處理與合成的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
當(dāng)前名稱:JS中圖片處理與合成的示例分析-創(chuàng)新互聯(lián)
網(wǎng)址分享:http://muchs.cn/article38/cdcopp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、做網(wǎng)站、網(wǎng)站營(yíng)銷、網(wǎng)站內(nèi)鏈、域名注冊(cè)、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容