canvas如何給圖片加馬賽克

本篇內容介紹了“canvas如何給圖片加馬賽克”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

實現

實現過程

思路

最開始需要實現馬賽克功能是需要通過canvas提供的一個獲取到圖片每一個像素的方法，我們都知道，圖片本質上只是由像素組成的，越清晰的圖片，就有著越高的像素，而像素的本質，就只是一個個擁有顏色的小方塊而已，只要把一張圖片放大多倍，就能夠清楚的發現。

canvas實現

通過 canvas 的 getImageData 這個方法，我們就能夠拿到圖像上所有像素組成的數組，并且需要生成馬賽克，意味著我們需要把一個范圍內的色塊的顏色都改成一樣的，也就是通過canvas來重繪圖片，

 let pixeArr = ctx.getImageData(0, 0, w, h).data;
let sampleSize = 40;

for (let i = 0; i < h; i += sampleSize) {
    for (let j = 0; j < h; j += sampleSize) {
      let p = (j + i * w) * 4;
      ctx.fillStyle =
        "rgba(" +
        pixeArr[p] +
        "," +
        pixeArr[p + 1] +
        "," +
        pixeArr[p + 2] +
        "," +
        pixeArr[p + 3] +
        ")";
      ctx.fillRect(j, i, sampleSize, sampleSize);
    }
}

通過雙重循環來循環圖片所有的色塊，其中的跨度就是我們設定好的色塊大小，色塊調整的越大，馬賽克后圖片更模糊，越小，圖片的模糊度就會降低。在通過 fillStyle 選取顏色，以及 fillRect 重繪 canvas 實現了將整個 canvas 的色塊都進行改變，最后在導出重繪后的圖片，無論是改變原來的圖片地址，或者是新加一張圖片作為對比，就都是可行的了。

canvas 跨域問題

在使用 getImageData 獲取圖片的時候，如果使用的是線上圖片，瀏覽器會爆出跨域的錯誤：

而上文中出現問題的圖片是存放在本地的或者線上的，本地的圖片默認是沒有域名的，線上的圖片并且是跨域的，所以瀏覽器都認為你是跨域，導致報錯。

那么對于本地圖片，我們只需要將圖片放到和html對應的文件夾下，子文件夾也是不可以的，就能夠解決，對于線上的圖片，我們可以采用先把它下載下來，再用方法來獲取數據的這種方式來進行。

function getBase64(imgUrl) {
  return new Promise(function (resolve, reject) {
    window.URL = window.URL || window.webkitURL;
    let xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        let blob = this.response;
        let oFileReader = new FileReader();
        oFileReader.onloadend = function (e) {
          let base64 = e.target.result;
          resolve(base64);
        };
        oFileReader.readAsDataURL(blob);
      }
    };
    xhr.send();
  });
}

下載圖片就不說了，通過瀏覽器提供的 API 或者其他封裝好的請求工具都是可以的，在請求成功之后，我們將圖片轉化為 base64 并且返回，這樣就能夠獲取線上圖片的數據了。

“canvas如何給圖片加馬賽克”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！