电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript如何實現圖片處理與合成

瀏覽:149日期:2023-10-24 16:11:05

引言:

圖片處理現在已經成為了我們生活中的剛需,想必大家也經常有這方面的需求。實際前端業務中,也經常會有很多的項目需要用到

圖片加工和處理。

首先,我這里將前端圖片處理暫且分成兩種類型:基礎類型 與 算法類型;

基礎類型的圖片處理技術: 圖片縮放,旋轉,添加邊框,圖片合成,拼圖等業務都屬于基礎類型的圖片處理,其區分點在于無需使用像素級別的算法,而是通過計算改變圖片的尺寸及位置等來改造圖片。例如常用的貼紙功能: 算法類型的圖片處理: 這類型的圖片處理復雜度較高,特點是通過像素級別算法對圖片的像素點進行RGBA通道值等進行改造,例如我們使用photshop或者美圖秀秀等工具對圖片進行的 美顏 / 濾鏡 / 黑白 / 摳圖 / 模糊等操作,這類型的重點主要在于算法和性能層面。例如常用的妝容功能:

通過這些積累,我封裝了幾個項目中常用的功能:

圖片合成: Example Git 圖片裁剪: Example Git 人像摳除: Example Git

本系列首先從基礎類型處理開啟我們的旅程。基礎類型的圖片處理在實際項目中有著大量的使用場景,主要是運用canvas的能力來完成,不存在性能和兼容性問題,能夠達到線上運行標準。我這里將基礎類型的圖片處理大致的分成以下幾種類型,這些類型基本能覆蓋日常所有業務場景:

圖片的縮放; 圖片的裁剪; 圖片的合成; 圖片與圖片的合成,例如貼紙,邊框,水印等; 為圖片添加文字; 為圖片添加基礎幾何圖形;

Tips: 我已將該類型的圖片處理場景封裝成了一個插件,基本上能應付所有這類型圖片處理的需求,GIT地址 (歡迎探討);在介紹具體的功能前,由于圖片的繪制完全的依賴于圖片的加載,因此先來了解一些前置知識。

1、圖片的跨域

首先,圖片加載并繪制涉及了圖片的跨域問題,因此如果是一張在線的圖片,需要在圖片服務器上設置跨域頭,并且在前端加載圖片之前將<img>標簽的crossOrigin設置為*,否則繪制到畫布的時候會報跨域的錯誤。

Tips: 這里積累了一些小坑,可以跟大家分享下:

1、crossOrigin需要嚴格設置,既只有是線上圖片時,才設置,而本地路徑或者base64時,則一定不能設置,否則在某些系統下會報錯,導致圖片加載失敗;

2、當項目為本地包環境時,例如內置于 App中時,crossOrigin值無效,webview的安全機制會導致無論該值設置與否,都會報跨域的錯誤。解決辦法是:需要將所有圖片轉換成base64才能正確繪制;

3、crossOrigin值一定要在圖片加載之前設置,即為<img>賦值src之前進行設置,否則無效;

2、圖片的加載

由于canvas的繪制需要的是已經加載完成的圖片,我們需要確保繪制的素材圖片是已經加載完成的,因此我們需要使用<img>的onload事件,可以使用html中已存在的圖片,或者用js創建一個圖片對象:

function loadImage(image, loader, error){ // 創建 image 對象加載圖片; let img = new Image(); // 當為線上圖片時,需要設置 crossOrigin 屬性; if(image.indexOf(’http’) == 0)img.crossOrigin = ’*’; img.onload = () => { loaded(img);// 使用完后清空該對象,釋放內存; setTimeout(()=>{ img = null; },1000); }; img.onerror = () => { error(’img load error’); }; img.src = image;}

介紹圖片加載的前置知識后,我們先來看最簡單的圖片處理---縮放與裁剪!

Tips: 相信大家閱讀本文時,如果對canvas不太了解,可以查詢下對應的API文檔即可,本文不再對canvas基礎API做詳細講解。

一、圖片的縮放

圖片的縮放最常見的場景是做圖片的壓縮。在保證圖片清晰的前提下通過合理地縮小圖片尺寸,能大大的降低圖片的大小。在實際應用場景中,有著廣泛的用途。例如圖片上傳時,用戶自主上傳的圖片可能是一張非常大的尺寸,例如現在手機所拍攝的照片尺寸經常能達到1920*2560的尺寸,大小可能超過5M。而在項目中,我們可能并不需要用到這么大的尺寸,此時對圖片的壓縮能大大的優化加載速度和節省帶寬;

1、新建一個canvas畫布,將寬高設置為需要壓縮到的尺寸;

該畫布既為圖片縮放后的尺寸,此處有個點是需要保證圖片的比例不變, 因此需要通過計算得出畫布的寬與高:

let imgRatio = img.naturalWidth / img.naturalHeight;// 創建一個畫布容器;let cvs = document.createElement(’canvas’);// 獲取容器中的畫板;let ctx = cvs.getContext(’2d’);cvs.width = 1000;cvs.height = cvs.width / imgRatio;

2、將圖片畫入后再導出成base64;

這里使用2個最常用的方法:

ctx.drawImage(image, dx, dy, dw, dh): 這個方法其實最多可以接收9個參數, 實現壓縮,只需要使用其中的5個參數即可, 其余參數在其它部分使用到時再做詳解; image : 需要繪制的圖片源,需要接收已經 加載完成 的HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement; dx / dy : 相對于畫布左上角的繪制起始點坐標; dw / dh : 繪制的寬度和高度,寬高比例并不鎖定,可使圖片變形; cvs.toDataURL(type, quality): 該方法用于將畫布上的內容導出成 base64 格式的圖片,可配置2個參數; type: 圖片格式, 一般可以使用 image/png 或者 image/jpeg, 當圖片不包含透明時,建議使用jpeg,可使導出的圖片大小減小很多; quality: 圖片質量,可使用0~1之間的任意值;經過測試,該值設置成0.9時較為合適,可以有效減小圖片文件大小且基本不影響圖片清晰度,導出后的 base64 既為壓縮后的圖片;

Tips: 此處有個坑, 想導出jpg格式的圖片必須用image/jpeg,不能使用image/jpg;

// 將原圖等比例繪制到縮放后的畫布上;ctx.drawImage(image, 0, 0, cvs.width, cvs.height);

// 將繪制后的圖導出成 base64 的格式;let b64 = cvs.toDataURL(’image/jpeg’, 0.9);

3.多種格式的圖片轉換成base64;

我們常用的圖片上傳功能,我們使用的是原生的<input type='file'>標簽,此時獲取到的是File格式的圖片,圖片的格式各異且尺寸很大,我們應該壓縮處理后再使用。

使用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);}

對base64的圖片使用剛才的canvas方式進行壓縮的處理;

Tips: 這里有個小坑是,圖片的EXIF信息中的方向值會影響圖片的展示,在IOS會出現圖片的寬高與圖片的方向不匹配的問題,因此需要進行特殊處理,矯正圖片的方向。方案:

1、可以使用 exif.js 來獲取圖片信息中的Orientation屬性,利用canvas的旋轉繪制來矯正;

2、這里有個 canvasResize.js 插件,可以解決從 File 到 base64 的所有問題。

二、圖片的裁剪

在實際項目中,由于圖片的寬高比例各式各樣,而展示和使用一般需要一個較為固定的比例,此時便需要將圖片裁剪成我們需要的寬高比例,使用到的方式其實和圖片的縮放基本一致,主要是通過調整 drawImage 的dx, dy參數來實現。原理其實是,將drawImage的繪制起始點(dx, dy)向上偏移,此時由于canvas已被我們設置成期望裁剪后的尺寸,而超出畫布的部分不會繪制,從而達到裁剪的目的;通過靈活的設置值,基本可以完成各種圖片裁剪需求,簡單示例圖(黑色框代表創建的畫布的尺寸):

JavaScript如何實現圖片處理與合成

此處以需要將一張600*800的長方形圖豎直居中裁剪為600*600的正方形圖為例, 簡單封裝成一個功能函數:

// 使用方式:let b64 = cropImage(img, { width : 600, height : 600,});// 居中裁剪function cropImage(img, ops){ // 圖片原始尺寸; let imgOriginWidth = img.naturalWidth, imgOriginHeight = img.naturalHeight; // 圖片長寬比,保證圖片不變形; let imgRatio = imgOriginWidth / imgOriginHeight; // 圖片裁剪后的寬高, 默認值為原圖寬高; let imgCropedWidth = ops.width || imgOriginWidth, imgCropedHeight = ops.height || imgOriginHeight; // 計算得出起始坐標點的偏移量, 由于是居中裁剪,因此等于 前后差值 / 2; let dx = (imgCropedWidth - imgOriginWidth) / 2, dy = (imgCropedHeight - imgOriginHeight) / 2; // 創建畫布,并將畫布設置為裁剪后的寬高; let cvs = document.createElement(’canvas’); let ctx = cvs.getContext(’2d’); cvs.width = imgCropedWidth; cvs.height = imgCropedHeight; // 繪制并導出圖片; ctx.drawImage(img, dx, dy, imgCropedWidth, imgCropedWidth / imgRatio); return cvs.toDataURL(’image/jpeg’, 0.9);}

三、圖片的旋轉

圖片的旋轉的原理同樣也是將圖片繪制到畫布上進行旋轉后再導出。其實使用到的是canvas的rotate方法;

let cvs = document.createElement(’canvas’);let ctx = cvs.getContext(’2d’);// 將參照點移動到畫板的中心點;ctx.translate(ctx.width/2, ctx.height/2);// 旋轉畫板;ctx.rotate = 90;// 繪制圖片;ctx.drawImage(img);// 導出得到旋轉后的圖片;cvs.toDataURL();

這里有個比較特別的部分,就是這里旋轉的是畫布的畫板部分,并不是整個畫布容器,而畫布容器外面不會被繪制,因此這里就會出現一個圖像四個角被裁剪掉的問題:

JavaScript如何實現圖片處理與合成

解決的方式就是:

將畫布容器放大,變成:

JavaScript如何實現圖片處理與合成

上面這個例子中,由于圖片是正方形,因此將容器的寬高放大1.5倍便可保證圖片不會被裁剪,而現實中的圖片由于寬高比例不定,因此這個放大系數是一個動態的值:

Tips: 由于我們將畫板基點移動到畫布中心了,因此在繪制的時候,要相對于基點調整 dx 與 dy;

// 創建畫布,獲取畫板;...// 放大系數為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;// 將參照點移動到畫板的中心點;ctx.translate(cvs.width/2, cvs.height/2);// 旋轉畫板;ctx.rotate = 90;// 繪制圖片;ctx.drawImage(img, -cvs.width/2, -cvs.height/2);// 導出圖片;...

總結

本文主要介紹了一些前端圖片處理的前置知識:

圖片處理技術分類;

基礎類型圖片處理技術; 算法類型圖片處理技術; 圖片的跨域; 圖片的加載;

還有講解了屬于基礎類型圖片處理中最簡單的兩類:

圖片的縮放; 圖片的裁剪; 圖片的旋轉;

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 精密模具制造,注塑加工,吹塑和吹瓶加工,EPS泡沫包装生产 - 济南兴田塑胶有限公司 | crm客户关系管理系统,销售管理系统,crm系统,在线crm,移动crm系统 - 爱客crm | 岩棉切条机厂家_玻璃棉裁条机_水泥基保温板设备-廊坊鹏恒机械 | 青岛球场围网,青岛车间隔离网,青岛机器人围栏,青岛水源地围网,青岛围网,青岛隔离栅-青岛晟腾金属制品有限公司 | 匀胶机旋涂仪-声扫显微镜-工业水浸超声-安赛斯(北京)科技有限公司 | 自动检重秤-动态称重机-重量分选秤-苏州金钻称重设备系统开发有限公司 | 丙烷/液氧/液氮气化器,丙烷/液氧/液氮汽化器-无锡舍勒能源科技有限公司 | 电缆故障测试仪_电缆故障定位仪_探测仪_检测仪器_陕西意联电气厂家 | 可程式恒温恒湿试验箱|恒温恒湿箱|恒温恒湿试验箱|恒温恒湿老化试验箱|高低温试验箱价格报价-广东德瑞检测设备有限公司 | 盐城网络公司_盐城网站优化_盐城网站建设_盐城市启晨网络科技有限公司 | 电销卡 防封电销卡 不封号电销卡 电话销售卡 白名单电销卡 电销系统 外呼系统 | 传爱自考网_传爱自学考试网| 智能门锁电机_智能门锁离合器_智能门锁电机厂家-温州劲力智能科技有限公司 | 变频器维修公司_plc维修_伺服驱动器维修_工控机维修 - 夫唯科技 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 送料机_高速冲床送料机_NC伺服滚轮送料机厂家-东莞市久谐自动化设备有限公司 | 基本型顶空进样器-全自动热脱附解吸仪价格-AutoHS全模式-成都科林分析技术有限公司 | 阴离子_阳离子聚丙烯酰胺厂家_聚合氯化铝价格_水处理絮凝剂_巩义市江源净水材料有限公司 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | [品牌官网]贵州遵义双宁口腔连锁_贵州遵义牙科医院哪家好_种植牙_牙齿矫正_原华美口腔 | 德国UST优斯特氢气检漏仪-德国舒赐乙烷检测仪-北京泽钏 | 光栅尺_Magnescale探规_磁栅尺_笔式位移传感器_苏州德美达 | 超细|超微气流粉碎机|气流磨|气流分级机|粉体改性机|磨粉机|粉碎设备-山东埃尔派粉体科技 | 振动传感器,检波器-威海广达勘探仪器有限公司 | 电池高低温试验箱-气态冲击箱-双层电池防爆箱|简户百科 | 杭州厂房降温,车间降温设备,车间通风降温,厂房降温方案,杭州嘉友实业爽风品牌 | 废旧物资回收公司_广州废旧设备回收_报废设备物资回收-益美工厂设备回收公司 | 防勒索软件_数据防泄密_Trellix(原McAfee)核心代理商_Trellix(原Fireeye)售后-广州文智信息科技有限公司 | 北京遮阳网-防尘盖土网-盖土草坪-迷彩网-防尘网生产厂家-京兴科技 | 临沂招聘网_人才市场_招聘信息_求职招聘找工作请认准【马头商标】 | 仿古建筑设计-仿古建筑施工-仿古建筑公司-汉匠古建筑设计院 | 网站建设-临朐爱采购-抖音运营-山东兆通网络科技 | 硬齿面减速机[型号全],ZQ减速机-淄博久增机械 | 净化车间_洁净厂房_净化公司_净化厂房_无尘室工程_洁净工程装修|改造|施工-深圳净化公司 | 小型手持气象站-空气负氧离子监测站-多要素微气象传感器-山东天合环境科技有限公司 | 泥沙分离_泥沙分离设备_泥砂分离机_洛阳隆中重工机械有限公司 | 斗式提升机,斗式提升机厂家-淄博宏建机械有限公司 | 隆众资讯-首页_大宗商品资讯_价格走势_市场行情| 纯化水设备-EDI-制药-实验室-二级反渗透-高纯水|超纯水设备 | 【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院 | LED投光灯-工矿灯-led路灯头-工业灯具 - 山东普瑞斯照明科技有限公司 | 筒瓦厂家-仿古瓦-寺庙-古建琉璃瓦-宜兴市古典园林建筑陶瓷厂有限公司 |