canvas怎么實現多張圖片編輯的圖片編輯器

這篇文章將為大家詳細講解有關canvas怎么實現多張圖片編輯的圖片編輯器，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

圖片編輯器產品需求

先說需求，由于涉及到實際公司的項目開發，滿足需求的圖片編輯器可能只是編輯一張單獨的圖片，可能是給你一個圖片列表也就是多張圖片的編輯，在用戶保存之前，用戶可以來回切換現在編輯哪張圖片，而且要記住每張照片的編輯操作，都要允許可以撤銷，最后統一點擊保存按鈕，沒有編輯過的圖片將被丟棄，已經編輯過的帶著涂鴉的圖片上傳給服務器。

準備工作，必須了解的相關知識點

html2canvas的使用

html2canvas這個插件實際是將網頁上的普通html元素轉化成canvas。那么為什么要將html元素轉化成canvas呢？那是因為canva具有許多html元素不具備的特點，例如可以在canvas上畫圖，畫線條等等操作，而且canvas直接提供api可以將畫布上展示的內容導成圖片。是不是有點類似于截圖，html2canvas就是利用這一點。 我最開始使用html2canvas時在公司h6項目有一個手寫板的項目。需要在是手寫板中簽字，然后將簽字之后的圖片導出然后上傳。后來又有一個在web端的圖片編輯器的項目，又用到了html2canvas這個插件，下面來介紹下該插件

介紹

html2canvas的缺點：

用html2canvas轉成的canvas,在最后生成的視覺效果上并不是100%還原原來的元素，也就是說會有部分像素點會丟失。

html2canvas的安裝

npm install html2canvas

html2canvas的引入

import html2canvas from 'html2canvas'

html2canvas的使用

如果一個帶圖片（無論是img標簽還是背景圖）的html元素在轉成canvas之后，該生成的canvas中img或者背景圖缺失，變成了白色的底，并且控制臺都告訴你圖片跨域了，解決方案如下：
以下第1條必須滿足，然后第2、3是根據是html元素是img標簽還是背景圖，來添加不同的配置項。

1.圖片服務器配置Access-Control-Allow-Origin 或使用代理
2.html2canvas的配置項中配置useCORS:true
3.img標簽增加 crossOrigin='anonymous'

html轉canvas,并且解決圖片跨域問題

html2canvas(dom, {
  useCORS: true, // 背景圖片跨域
  scale: window.devicePixelRatio,//像素比
  width: dom.offsetWidth
  height: dom.offsetHeight
}).then(canvas => {
  //得到base64
  let base64 = canvas.toDateUrl() 
})

因為html2canvas將普通的html轉成了canvas,而canvas自帶將自身轉成的base64的方法，而base64格式文件可以直接作為img標簽的src,展示在頁面上

<img :src='base64' />

此時如果希望將生成的圖片上傳，base64是無法直接上傳的，需要將base64轉成blob格式。所以如下：我們將得到的base64數據傳進base64ToBlob函數，最后函數return的結果就是blob數據。請注意：該方法只是單純的將base64轉成blob的通用方法

base64轉blob

function base64ToBlob(base64){
    var arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return (new Blob([u8arr], { type: mime }))
}

其實canvas自帶將canas轉化成blob對象的方法

canvas轉blob

canvas.toBlob(file=>{
    //此時file就是blob數據格式。
    //成功上傳成blob之后需要為該blob數據添加name屬性，否則后面上傳到服務器會報錯：size not set
    file.name = 'cover.png'
})

但是在實際項目開發中遇到部分低版本的手機瀏覽器中的canvas元素不支持toBlob方法，報錯toBlob is not a function。所以此時我們需要對當前不支持canvas.toBlo方法的瀏覽器做polyfill

DOM canvas元素暴露了HTMLCanvasElement接口,該接口提供了用來操作一個canvas元素布局和呈現的屬性和方法HTMLCanvasElement接口繼承了element接口的屬性和方法。(來自MDN)

toBlob方法兼容性寫法

if (!HTMLCanvasElement.prototype.toBlob) {
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
      value: function (callback, type, quality) {
        var binStr = atob(this.toDataURL(type, quality).split(',')[1])
        var len = binStr.length
        var arr = new Uint8Array(len)

        for (var i = 0; i < len; i++) {
          arr[i] = binStr.charCodeAt(i)
        }

        callback(new Blob([arr], { type: type || 'image/png' }))
     }
    })
}

以上代碼判斷當前瀏覽器HTMLCanvasElement.prototype內是否含有toBlob方法，如果沒有該方法，則為HTMLCanvasElement.prototype添加toBlob方法。
到目前為止，無論是base64直接轉成blob，還是canvas直接轉成blob，最后目的都是為了將blob數據上傳到服務器。請注意：當前頁面的blob數據是存儲在緩沖區的，而不是像電腦本地文件存儲在硬盤中上傳那樣，所以需要添加 isLocalFile:false屬性，fileData屬性接收一個數組，如果是一張圖片，則是個長度為1的，元素為blob格式的數組。上傳文件到服務器在這里不做介紹。

提交blob到服務器

// 轉完圖片數據，提交服務器
    async upload (blobArr) {
      const oss = await this.$uploadOSS.init({
        fileData: blobArr,
        isLocalFile: false,
        onProgress: percent => {},
        onSuccess: (res) => {
          console.log(res)
        }
      })
      if (oss) {
        const data = await oss.start()
        if (!data.code) {
          this.$message.error(data.message)
        }
      }
    },

以上是對html2canvas好和canvas的常見的屬性的介紹，同時也是開發圖片編輯器的前提。下面會一步步詳細介紹下在已有的canvas涂鴉板的基礎上的開發多張圖片編輯器的思路和過程。

基于canvas的圖片編輯器的怎么做？

1、既然要編輯圖片，自然要提供給我們的圖片的地址，可能是本地相對路徑，也可能是遠程地址，也可能是一張或者是多張圖片。所以進行操作的數據結構是數組，如果只有一張圖那就是長度為1的，元素為圖片地址的數組，另外需要解決圖片跨域來避免生成的圖片只有涂鴉部分，且背景白色、頭像或者圖片丟失的情況，上面已經提供了詳細的解決方案。

2、圖片編輯器肯定是個通用組件，所以根據父組件傳進來的圖片src的一個長度為length的數組,來填充一個相同長度的二維數組，二維數組中的元素記錄的是每一張圖片被編輯的歷史記錄的集合，也就是每一次操作canvas的時候生成的base64數據，在開始編輯之前初始化的時候該圖片默認填充空數組[],在這里介紹一個填充數組很好用的方法fill，值得注意：fill的內容如果是引用類型，會導致fill的每一項都是同一個引用，導致在操作其中一個元素時，其余所有的元素都一起改變。

//result：[[],[],...]
this.canvasArrBase = Array(length).fill(0).map(item => {
  return []
})

2、點擊不同的圖片,將該圖片的src傳進編輯器組件，并將該src作為canvas背景圖,此時視覺上看到了一圖，在dom中其實是canvas的一張背景圖為src。
3、開始在頁面涂鴉畫布，為了避免無法在surface等觸控屏設備上使用畫布涂鴉或者圖片編輯器，請使用touch事件，而不是mouse事件。

 // 開始繪制
  canvas.addEventListener('touchstart', e=> {
    ...
  },false)
  
  // 繪制中
  canvas.addEventListener('touchmove', e=>{
   ...
  },false)
  
  // 結束繪制
  canvas.addEventListener('touchend', e=>{
    ...
  },false)

4、在進入圖片編輯器之前將點擊的圖片的索引和圖片所在的圖片數組，一起作為props傳入圖片編輯器，記住當前在編輯第幾張圖片currentIndex,才能將涂鴉或者撤銷操作都記錄在這張圖片之上。當用戶在畫布上每操作一次，也就是開始touchstart，然后touchmove，最后touchend的時候，將當前的canvas畫布的內容（所有內容，不只是剛剛涂鴉的那一筆。類似于git的每一次提交，即使只是提交一行代碼，git也都會為整個項目生成一份快照，而不只是記錄本次修改的一行代碼，git回滾就是快照的回滾），包括這張背景圖片使用canvas.toDateUrl()生成base64，將其push進我們上面介紹的this.canvasArrBase[currenIndex]里，這時currenIndex所在數組的圖片多了一張歷史記錄，也就是剛剛涂鴉的畫面被我們保存下來了。這也就是canvas圖片編輯器，撤銷的基礎，有了它我們才知道撤銷之后展示什么。

//新的土涂鴉操作生成的快照存儲在當前索引的數組內
 this.canvasArrBase[this.currentIdex].push(canvas.toDataUrl())

5、切換圖片也就意味著改變了canvas的背景圖，改變了currentIndex,然后在新的currentIndex上對另外一張圖片進行編輯，其實也是同樣的步驟，無非就是往當前編輯的圖片的push畫布剛剛展示的所有內容。
6、重點來了，撤銷如何做呢？如何撤銷，如何在畫布上一步步撤銷并且看到上一次，上上次的繪畫記錄呢？
隨著每張圖片的編輯，每張圖片產生一些歷史記錄，我們就是利用這些歷史記錄的來進行回滾撤銷操作的。當我們在當前已經編輯過的圖片中點一次撤銷的時候，我們需要將上次canvas中展示的畫布內容畫到當前的畫布中。在撤銷的時候可以直接將我們存儲的數據源直接刪掉，所以只需要利用 canvas.drawImage() 方法，將需要展示的那一條記錄畫到canvas畫布中即可。

drawImage方法有很多參數，用法點擊查看詳情

let newBaseArr = this.canvasArrBase[this.currentIdex]
let { offsetWidth: canvasWidth, offsetHeight: canvasHeight } = canvas

//生成一張新的圖片
let image = new Image()

//圖片的src賦值成當前需要展示的base64的值（也就是讓用戶看到撤銷后的畫面）
image.src = this.canvasArrBase[this.currentIdex][newBaseArr.length-1]
//給img的src賦值后，使用onload監聽加載圖片情況，加載完成后再繪制,不加onload就極可能繪制失敗。
image.onload = function () {
    canvas.drawImage(image, 0, 0, canvasWidth, canvasHeight)
}

7、關于性能優化：由于你根本不知道用戶會拿多么大的圖片來進行編輯，所以如果有9張圖片，每張圖片都編輯10次，那么存在內存中的base64數據量就會非常龐大，在進行頁面切換或者圖片涂鴉歷史撤銷的時候就可能造成頁面的卡頓，為了避免這種情況，在切換圖片之前，我只會存儲當前圖片最后一張圖片的base64。
8、提交，保存之前判斷this.canvasArrBase中每一項的長度，大于0，則是有編輯過，否則被過濾掉。然后利用前面介紹上傳方法上傳到服務器，就OK啦！

關于“canvas怎么實現多張圖片編輯的圖片編輯器”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。