這篇文章主要講解了JavaScript實現(xiàn)圖片處理與合成的方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

目前創(chuàng)新互聯(lián)公司已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站改版維護、企業(yè)網(wǎng)站設(shè)計、亳州網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

引言：

圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實際前端業(yè)務(wù)中，也經(jīng)常會有很多的項目需要用到

圖片加工和處理。

首先，我這里將前端圖片處理暫且分成兩種類型：基礎(chǔ)類型 與 算法類型；

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

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

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

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

• 圖片的縮放；
• 圖片的裁剪；
• 圖片的合成；
  • 圖片與圖片的合成，例如貼紙，邊框，水印等；
  • 為圖片添加文字；
  • 為圖片添加基礎(chǔ)幾何圖形；
       

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

1、圖片的跨域

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

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

1、crossOrigin需要嚴格設(shè)置，既只有是線上圖片時，才設(shè)置，而本地路徑或者base64時，則一定不能設(shè)置，否則在某些系統(tǒng)下會報錯，導(dǎo)致圖片加載失?。?/p>

2、當項目為本地包環(huán)境時，例如內(nèi)置于 App中時，crossOrigin值無效，webview的安全機制會導(dǎo)致無論該值設(shè)置與否，都會報跨域的錯誤。解決辦法是：需要將所有圖片轉(zhuǎn)換成base64才能正確繪制；

3、crossOrigin值一定要在圖片加載之前設(shè)置，即為<img>賦值src之前進行設(shè)置，否則無效；

2、圖片的加載

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：JavaScript實現(xiàn)圖片處理與合成的方法-創(chuàng)新互聯(lián)
分享路徑：http://www.rwnh.cn/article36/cssesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、App設(shè)計、網(wǎng)站設(shè)計公司、Google、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)