基于Html5canvas如何实现裁剪图片和马赛克功能-创新互联

这篇文章主要介绍了基于Html5 canvas如何实现裁剪图片和马赛克功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

1.核心功能

此组件功能包含：

　　图片裁剪（裁剪框拖动，裁剪框改变大小）；

　　图片马赛克（绘制马赛克，清除马赛克）；

　　图片预览、图片还原（返回原图、返回处理图）；

　　图片上传（获取签名、上传图片）。

2.核心逻辑

2.1图片裁剪

获取裁剪框（矩形）相对于画布的位置（左上）和裁剪框的height、width。获取（getImageData）canvas相应位置的图片对象（ImageData）。清空canvas画布。在canvas画布的相应位置绘制（putImageData）获取的图片对象（ImageData）。生成预览图。

2.2图片马赛克

马赛克的绘制，就是在以鼠标划过路径（画笔宽度）为中心的区域，重新绘制成其他的颜色。一般结果是，会取周围的相近的颜色。

取色方法：

1）比如现有一鼠标划过的点的坐标（x,y），定义一个矩形左上角坐标取（x,y），宽30px，高30px。我们把矩形宽高都除以5（分成5份，可以自定义为n份），所以现在是25个6px的小格子。每个小格子宽高都是6px。

2）然后，我们随机获取一个小格子，获取（getImageData）这个小格子的图片对象（ImageData）；再随机获取此图片对象上某个像素点（宽1px，高1px）的颜色color（rgba：ImageData.data[0]，ImageData.data[1]，ImageData.data[2]，ImageData.data[3]）；最后我们把第一个6x6px的小格子的每个像素点的颜色都设置为color。

3）其他24个小格子的颜色，遍历2步骤即可。

2.3清除马赛克

我们需要理解一个问题，不管是绘制马赛克，还是清除马赛克，其本质都是在绘制图片。我们在某个位置绘制了马赛克，清除的时候，就是把原图在当前位置的图片对象再画出来。就达到了清除的效果。所以，我们需要备份一个canvas，和原图一模一样，清除的时候，需要获取备份画布上对应位置的图像，绘制到马赛克的位置。

2.4图片预览

图片预览就是获取裁剪框的区域，获取区域内的图片对象。再绘制到画布上。

2.5图片还原至原图

清空画布，再次绘制原图

2.6还原至已操作图片

预览是保存画布图片对象（ImageData），清空画布，绘制保存的图片对象至画布

2.7图片上传

获取（toDataURL）canvas图片路径，将获取到的base64图片转化为File对象。进行上传。

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;
}

感谢你能够认真阅读完这篇文章，希望小编分享的“基于Html5 canvas如何实现裁剪图片和马赛克功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!