基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能

前端  /  管理员 发布于 6年前   216

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.完整代码如下：

<template>  <div class="canvas-clip" :loading="loading">    <div      v-show="isDrop"      class="canvas-mainBox"      ref="canvas-mainBox"      id="canvas-mainBox"      @mousedown.stop="startMove($event)"    >      <div class="canvas-minBox left-up" @mousedown.stop="startResize($event,0)"></div>      <div class="canvas-minBox up" @mousedown.stop="startResize($event,1)"></div>      <div class="canvas-minBox right-up" @mousedown.stop="startResize($event,2)"></div>      <div class="canvas-minBox right" @mousedown.stop="startResize($event,3)"></div>      <div class="canvas-minBox right-down" @mousedown.stop="startResize($event,4)"></div>      <div class="canvas-minBox down" @mousedown.stop="startResize($event,5)"></div>      <div class="canvas-minBox left-down" @mousedown.stop="startResize($event,6)"></div>      <div class="canvas-minBox left" @mousedown.stop="startResize($event,7)"></div>    </div>    <!-- 画布 -->    <canvas      class="canvas-area"      ref="canvas"      id="canvas"      :width="canvasWidth"      :height="canvasHeight"      @mousedown.stop="startMove($event)"      :class="{hoverPaint:isMa,hoverClear:isMaClear}"    ></canvas>    <!-- 备份画布 -->    <canvas class="canvas-copy" ref="canvasCopy" :width="canvasWidth" :height="canvasHeight"></canvas>    <div class="canvas-btns">      <button v-if="backBtn" @click="clipBack">返回</button>      <button :class="{active:btnIndex==0}" @click="sourceImg">原图</button>      <button :class="{active:btnIndex==1}" @click="paintRectReady" :disabled="isDisabled">马赛克</button>      <button :class="{active:btnIndex==2}" @click="paintRectClearReady" :disabled="isDisabled">橡皮擦</button>      <button :class="{active:btnIndex==3}" @click="clipReady" :disabled="isDisabled">裁剪</button>      <button :class="{active:btnIndex==4}" @click="clipPosition">预览</button>      <button @click="getSignature">上传</button>      <button class="close" @click="canvasClose()">x</button>      <!-- <div class="paint-size" v-if="isMaClear || isMa">        <span>画笔大小</span>        <input :defaultValue="maSize" v-model="maSize" max="100" min="1" type="range">        <span class="size-num">{{maSize}}</span>      </div> -->    </div>  </div></template><script>import axios from "axios";import md5 from "js-md5";import req from "../../axios/config";export default {  props: ["imgUrl"],  data() {    return {      resizeFX: "",      movePrev: "",      canvasWidth: 800, // 画布宽      canvasHeight: 600, // 画布高      loading: false,      isDrop: false, // 裁剪      isMa: false, // 马赛克      maSize: 30, // 马赛克大小      isMaClear: false, // 清除马赛克      backBtn: false, // 返回按钮      isDisabled: false,//禁用按钮      btnIndex: 0,//当前按钮      mouseX:'',// 鼠标位置      mouseY:'',      clipEle: "", // 裁剪框元素      canvasDataSession: "", // 预览前的画布信息      canvas: "", // 画布      ctx: "", // 画布上下文      canvasCopy: "", // copy画布      ctxCopy: "", // copy画布上下文      uploadOption: { // 图片上传参数        path: "",        policy: "",        signature: "",        username: ""      }    };  },  mounted() {    this.clipEle = this.$refs["canvas-mainBox"];    this.canvas = this.$refs["canvas"];    this.ctx = this.canvas.getContext("2d");    this.canvasCopy = this.$refs["canvasCopy"];    this.ctxCopy = this.canvasCopy.getContext("2d");    this.draw();  },  methods: {    // 创建图片    draw() {      var img = new Image();      img.setAttribute('crossOrigin', 'anonymous');      img.onload = () => {        this.ctx.drawImage(img, 0, 0, 800, 600);        this.ctxCopy.drawImage(img, 0, 0, 800, 600);      };      img.src = this.imgUrl + '?time=' + new Date().valueOf();    },    //预览 计算裁剪框的位置（左上坐标)    clipPosition() {      this.isDisabled = true;      this.backBtn = true;      this.isMa = false;      this.isMaClear = false;      this.btnIndex = 4;      //画布位置      var canvasPx = this.canvas.offsetLeft,        canvasPy = this.canvas.offsetTop;      if (this.isDrop) {        // 裁剪框位置        var clipPx = this.clipEle.offsetLeft,          clipPy = this.clipEle.offsetTop,          x = clipPx - canvasPx,          y = clipPy - canvasPy,          w = this.clipEle.offsetWidth,          h = this.clipEle.offsetHeight,          // 预览图居中          positionX = 400 - this.clipEle.offsetWidth / 2,          positionY = 300 - this.clipEle.offsetHeight / 2;      } else {        // 没有裁剪框，保存完整图片        var x = 0,          y = 0,          w = this.canvas.offsetWidth,          h = this.canvas.offsetHeight,          // 预览图居中          positionX = 0,          positionY = 0;      }      var imageData = this.ctx.getImageData(x, y, w, h);      this.canvasDataSession = this.ctx.getImageData(        0,        0,        this.canvasWidth,        this.canvasHeight      );      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);      this.ctx.putImageData(imageData, positionX, positionY);      this.clipEle.style.display = "none";      this.canvasCopy.style.display = "none";    },    // 返回预览前状态    clipBack() {      this.btnIndex = -1;      this.backBtn = false;      this.isDisabled = false;      this.isDrop = false;      this.ctx.putImageData(this.canvasDataSession, 0, 0);      this.canvasCopy.style.display = "block";    },    // 原图    sourceImg() {      this.isDisabled = false;      this.btnIndex = 0;      this.backBtn = false;      this.isMa = false;      this.isDrop = false;      this.isMaClear = false;      var img = new Image();      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);      img.setAttribute('crossOrigin', 'anonymous');      img.onload = () => {        this.ctx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);      };      img.src = this.imgUrl + '?time=' + new Date().valueOf();      this.canvasCopy.style.display = "block";    },    // 获取签名    getSignature() {      // canvas图片base64 转 File 对象      var dataURL = this.canvas.toDataURL("image/jpg"),        arr = dataURL.split(","),        mime = arr[0].match(/:(.*?);/)[1],        bstr = atob(arr[1]),        n = bstr.length,        u8arr = new Uint8Array(n);      while (n--) {        u8arr[n] = bstr.charCodeAt(n);      }      var obj = new Blob([u8arr], { type: mime }),        time = new Date().toGMTString(),        formData = new FormData();      formData.append("file", obj);      // 获取文件后缀      var suffix = formData.get("file").type.split("/")[1];      req        .get("/carsource-api/upyun/sign", { suffix: suffix })        .then(response => {          if (response.data.code === 0) {this.uploadOption.path = response.data.data.path;formData.append("policy", response.data.data.policy);formData.append("authorization", response.data.data.signature);this.updateImg(formData);          }        })        .catch(function(error) {});    },    // 上传    updateImg(formData) {      axios({        url: "http://v0.api.upyun.com/tmp-img",        method: "POST",        data: formData      }).then(response => {        if (response.data.code == 200) {          this.$message.success("图片修改成功");          this.canvasClose("upload", response.data.url.slice(4));        }      });    },    // 裁剪框缩放 移动    startResize(e, n) {      this.resizeFX = n;      $(document).mousemove(this.resizeDiv);      document.addEventListener("mouseup", this.stopResize);    },    stopResize(e) {      $(document).off("mousemove", this.resizeDiv);      document.removeEventListener("mouseup", this.stopResize);    },    startMove(e) {      this.movePrev = [e.pageX, e.pageY];      $(document).mousemove(this.moveDiv);      document.addEventListener("mouseup", this.stopMove);    },    stopMove(e) {      $(document).off("mousemove", this.moveDiv);      document.removeEventListener("mouseup", this.stopMove);    },    moveDiv(e) {      // 马赛克      if (this.isMa) {        this.paintRect(e);      }      // 清除马赛克      if (this.isMaClear) {        this.paintRectClear(e);      }      // 裁剪      if (this.isDrop) {        var targetDiv = $("#canvas-mainBox"),          offsetArr = targetDiv.offset();        var chaX = e.pageX - this.movePrev[0],          chaY = e.pageY - this.movePrev[1],          ox = parseFloat(targetDiv.css("left")),          oy = parseFloat(targetDiv.css("top"));        targetDiv.css({          left: ox + chaX + "px",          top: oy + chaY + "px"        });        this.movePrev = [e.pageX, e.pageY];      }    },    resizeDiv(e) {      e.preventDefault();      e.stopPropagation();      // 获取需要改变尺寸元素到页面的距离      var targetDiv = $("#canvas-mainBox"),        offsetArr = targetDiv.offset();      var eleSWidth = targetDiv.width(),        eleSHeight = targetDiv.height(),        ox = parseFloat(targetDiv.css("left")),        oy = parseFloat(targetDiv.css("top"));      // 获取鼠标位置，和元素初始offset进行对比，      var chaX = e.pageX - offsetArr.left,        chaY = e.pageY - offsetArr.top;      switch (this.resizeFX) {        case 0:          //如果移动距离接近宽度或高度，则不进行改变          if (chaX >= eleSWidth - 10 || chaY >= eleSHeight - 10) {return;          }          // 获得位置差（m-e）,先设置宽度和高度，再设置位置          // 原始宽高+(（m-e）*-1)，原始位置+（m-e）          targetDiv.css({width: eleSWidth + chaX * -1 + "px",height: eleSHeight + chaY * -1 + "px",left: ox + chaX + "px",top: oy + chaY + "px"          });          break;        case 1:          //如果移动距离接近宽度或高度，则不进行改变          if (chaY >= eleSHeight - 10) {return;          }          // 获得位置差（m-e）,先设置宽度和高度，再设置位置          // 原始宽高+(（m-e）*-1)，原始位置+（m-e）          targetDiv.css({height: eleSHeight + chaY * -1 + "px",top: oy + chaY + "px"          });          break;        case 2:          //如果移动距离接近宽度或高度，则不进行改变          if (chaX <= 10 || chaY >= eleSHeight - 10) {return;          }          // 获得位置差（m-e）,先设置宽度和高度，设置位置          // 原始高+(（m-e）*-1),原始宽+(（m-e）)，原始位置+（m-e）          targetDiv.css({width: chaX + "px",height: eleSHeight + chaY * -1 + "px",top: oy + chaY + "px"          });          break;        case 3:          //如果移动距离接近宽度或高度，则不进行改变          if (chaX <= 10) {return;          }          // 获得位置差（m-e）,先设置宽度和高度，再设置位置          // 原始宽高+(（m-e）*-1)，原始位置+（m-e）          targetDiv.css({width: chaX + "px"          });          break;        case 4:          //如果移动距离接近宽度或高度，则不进行改变          if (chaX <= 10 || chaY <= 10) {return;          }          // 获得位置差（m-e）,先设置宽度和高度，再设置位置          // 原始宽高+(（m-e）*-1)，原始位置+（m-e）          targetDiv.css({width: chaX + "px",height: chaY + "px"          });          break;        case 5:          //如果移动距离接近宽度或高度，则不进行改变          if (chaY <= 10) {return;          }          // 获得位置差（m-e）,先设置宽度和高度，再设置位置          // 原始宽高+(（m-e）*-1)，原始位置+（m-e）          targetDiv.css({height: chaY + "px"          });          break;        case 6:          //如果移动距离接近宽度或高度，则不进行改变          if (chaX >= eleSWidth - 10 || chaY <= 10) {return;          }          // 获得位置差（m-e）,先设置宽度和高度，再设置位置          // 原始宽高+(（m-e）*-1)，原始位置+（m-e）          targetDiv.css({width: eleSWidth + chaX * -1 + "px",height: chaY + "px",left: ox + chaX + "px"          });          break;        case 7:          //如果移动距离接近宽度或高度，则不进行改变          if (chaX >= eleSWidth - 10) {return;          }          // 获得位置差（m-e）,先设置宽度和高度，再设置位置          // 原始宽高+(（m-e）*-1)，原始位置+（m-e）          targetDiv.css({width: eleSWidth + chaX * -1 + "px",left: ox + chaX + "px"          });          break;        default:          break;      }    },    // 裁剪    clipReady() {      this.btnIndex = 3;      this.isMa = false;      this.isDrop = true;      this.isMaClear = false;    },    // 马赛克    paintRectReady() {      this.btnIndex = 1;      this.isMa = true;      this.isDrop = false;      this.isMaClear = false;    },    // 橡皮擦    paintRectClearReady() {      this.btnIndex = 2;      this.isMa = false;      this.isDrop = false;      this.isMaClear = true;    },    // 绘制马赛克    paintRect(e) {      var offT = this.canvas.offsetTop, // 距离上边距离        offL = this.canvas.offsetLeft, // 距离左边距离        x = e.clientX,        y = e.clientY;      if(this.mouseX - x > this.maSize/2 || x - this.mouseX > this.maSize/2 || this.mouseY - y > this.maSize/2 || y - this.mouseY > this.maSize/2){        var oImg = this.ctx.getImageData(x - offL ,y - offT,this.maSize,this.maSize);        var w = oImg.width;        var h = oImg.height;        //马赛克的程度，数字越大越模糊        var num = 6;        //等分画布        var stepW = w/num;        var stepH = h/num;        //这里是循环画布的像素点        for(var i=0;i<stepH;i++){          for(var j=0;j<stepW;j++){//获取一个小方格的随机颜色，这是小方格的随机位置获取的var color = this.getXY(oImg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));//这里是循环小方格的像素点，for(var k=0;k<num;k++){    for(var l=0;l<num;l++){        //设置小方格的颜色        this.setXY(oImg,j*num+l,i*num+k,color);    }    }          }}        this.ctx.putImageData(oImg,x - offL ,y - offT);        this.mouseX = e.clientX        this.mouseY = e.clientY      }    },    getXY(obj,x,y){      var w = obj.width;      var h = obj.height;      var d = obj.data;      var color = [];      color[0] = d[4*(y*w+x)];      color[1] = d[4*(y*w+x)+1];      color[2] = d[4*(y*w+x)+2];      color[3] = d[4*(y*w+x)+3];      return color;    },    setXY(obj,x,y,color){      var w = obj.width;      var h = obj.height;      var d = obj.data;      d[4*(y*w+x)] = color[0];      d[4*(y*w+x)+1] = color[1];      d[4*(y*w+x)+2] = color[2];      d[4*(y*w+x)+3] = color[3];    },    // 清除马赛克    paintRectClear(e) {      var offT = this.canvasCopy.offsetTop, // 距离上边距离        offL = this.canvasCopy.offsetLeft, // 距离左边距离        x = e.clientX,        y = e.clientY,        // 获取原图此位置图像数据        imageData = this.ctxCopy.getImageData(          x - offL,          y - offT,          this.maSize,          this.maSize        );      this.ctx.putImageData(imageData, x - offL, y - offT);    },    // 关闭画布    canvasClose(type, url) {      this.$emit("isShowImgChange", type, url);    }  }};</script><style scoped>.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;}</style> 

4.效果图如下：

总结

以上所述是小编给大家介绍的基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！