這篇文章主要介紹了基于Html5 canvas如何實(shí)現(xiàn)裁剪圖片和馬賽克功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到和田縣網(wǎng)站設(shè)計(jì)與和田縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋和田縣地區(qū)。

1.核心功能

此組件功能包含：

　　圖片裁剪（裁剪框拖動(dòng)，裁剪框改變大?。?；

　　圖片馬賽克（繪制馬賽克，清除馬賽克）；

　　圖片預(yù)覽、圖片還原（返回原圖、返回處理圖）；

　　圖片上傳（獲取簽名、上傳圖片）。

2.核心邏輯

2.1圖片裁剪

獲取裁剪框（矩形）相對(duì)于畫布的位置（左上）和裁剪框的height、width。獲?。╣etImageData）canvas相應(yīng)位置的圖片對(duì)象（ImageData）。清空canvas畫布。在canvas畫布的相應(yīng)位置繪制（putImageData）獲取的圖片對(duì)象（ImageData）。生成預(yù)覽圖。

2.2圖片馬賽克

馬賽克的繪制，就是在以鼠標(biāo)劃過(guò)路徑（畫筆寬度）為中心的區(qū)域，重新繪制成其他的顏色。一般結(jié)果是，會(huì)取周圍的相近的顏色。

取色方法：

1）比如現(xiàn)有一鼠標(biāo)劃過(guò)的點(diǎn)的坐標(biāo)（x,y），定義一個(gè)矩形左上角坐標(biāo)?。▁,y），寬30px，高30px。我們把矩形寬高都除以5（分成5份，可以自定義為n份），所以現(xiàn)在是25個(gè)6px的小格子。每個(gè)小格子寬高都是6px。

2）然后，我們隨機(jī)獲取一個(gè)小格子，獲?。╣etImageData）這個(gè)小格子的圖片對(duì)象（ImageData）；再隨機(jī)獲取此圖片對(duì)象上某個(gè)像素點(diǎn)（寬1px，高1px）的顏色color（rgba：ImageData.data[0]，ImageData.data[1]，ImageData.data[2]，ImageData.data[3]）；最后我們把第一個(gè)6x6px的小格子的每個(gè)像素點(diǎn)的顏色都設(shè)置為color。

3）其他24個(gè)小格子的顏色，遍歷2步驟即可。

2.3清除馬賽克

我們需要理解一個(gè)問(wèn)題，不管是繪制馬賽克，還是清除馬賽克，其本質(zhì)都是在繪制圖片。我們?cè)谀硞€(gè)位置繪制了馬賽克，清除的時(shí)候，就是把原圖在當(dāng)前位置的圖片對(duì)象再畫出來(lái)。就達(dá)到了清除的效果。所以，我們需要備份一個(gè)canvas，和原圖一模一樣，清除的時(shí)候，需要獲取備份畫布上對(duì)應(yīng)位置的圖像，繪制到馬賽克的位置。

2.4圖片預(yù)覽

圖片預(yù)覽就是獲取裁剪框的區(qū)域，獲取區(qū)域內(nèi)的圖片對(duì)象。再繪制到畫布上。

2.5圖片還原至原圖

清空畫布，再次繪制原圖

2.6還原至已操作圖片

預(yù)覽是保存畫布圖片對(duì)象（ImageData），清空畫布，繪制保存的圖片對(duì)象至畫布

2.7圖片上傳

獲取（toDataURL）canvas圖片路徑，將獲取到的base64圖片轉(zhuǎn)化為File對(duì)象。進(jìn)行上傳。

3.完整代碼如下：

.canvas-clip {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9010;
  background: #000;
}
.canvas-mainBox {
  position: absolute;
  width: 400px;
  height: 300px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
  border: 1px solid #FFF;
  cursor: move;
  z-index: 9009;
}
.canvas-minBox {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #FFF;
}
.left-up {
  top: -4px;
  left: -4px;
  cursor: nw-resize;
}
.up {
  top: -4px;
  left: 50%;
  margin-left: -4px;
  cursor: n-resize;
}
.right-up {
  top: -4px;
  right: -4px;
  cursor: ne-resize;
}
.right {
  top: 50%;
  margin-top: -4px;
  right: -4px;
  cursor: e-resize;
}
.right-down {
  bottom: -4px;
  right: -4px;
  cursor: se-resize;
}
.down {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  cursor: s-resize;
}
.left-down {
  bottom: -4px;
  left: -4px;
  cursor: sw-resize;
}
.left {
  top: 50%;
  margin-top: -4px;
  left: -4px;
  cursor: w-resize;
}
.canvas-btns {
  position: fixed;
  right: 50px;
  top: 30px;
  z-index: 9003;
}
.canvas-btns button {
  display: inline-blovk;
  background: green;
  cursor: pointer;
  border: none;
  width: 60px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-size: 15px;
}
.canvas-btns button.active {
  background: rgb(32, 230, 32);
}
.canvas-btns button.close {
  background: rgb(230, 72, 32);
}
.canvas-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -400px;
  z-index: 9007;
}
.canvas-mosatic {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -400px;
  z-index: 9009;
}
.canvas-area {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -400px;
  z-index: 9008;
}
.paint-size{
  margin-top: 20px;
  font-size: 13px;
  color: #FFF;
  height: 30px;
  line-height: 30px;
  text-align: right;
}
.paint-size input{
  vertical-align: middle;
  background: green;
}
.paint-size .size-num{
  display: inline-block;
  width: 15px;
}
.hoverClear{
  cursor: url('./paint.png'),auto;
}
.hoverPaint{
  cursor: url('./paint.png'),auto;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“基于Html5 canvas如何實(shí)現(xiàn)裁剪圖片和馬賽克功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)標(biāo)題：基于Html5canvas如何實(shí)現(xiàn)裁剪圖片和馬賽克功能-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://weahome.cn/article/ggjjo.html