背景

大家好，我是六六。在学习裁剪功能的过程中，发现有很多文章讲的不是那么清晰易懂，让六六绕了很多弯路，所以今天呢，为了让大家不再绕弯，六六要详详细细的手把手教大家写一个裁剪功能出来。

1.目录

神奇canvas的那些api
一步一步地实战教学
总结
个人目标

2.神奇的canvas和动画

裁剪功能的核心之中当然是canvas这个技术，如果不懂的可以去mdn上过一遍这个，不用看的太深，了解它是干啥的，怎么干就行了。以我的大白话说，就是在坐标系内能够操作每个像素点的。接下来，我们先来了解一下关于裁剪核心的api和相关知识:

2.1 drawImage(image, x, y)：

用法：绘制一张图片到canvas元素里面  
image:image对象或者是canvas对象  
x,y:为坐标的起始点  
实例：
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
     img.src = 'images/backdrop.png';           // 图片地址
    img.onload = function(){
      ctx.drawImage(img,0,0);                   // 拿到image对象，画入canvas上
    }
  }

其实把，这个api有九个参数，借助官网的图：

2.2 ctx.getImageData(left, top, width, height):

用法：返回一个imageData对象，包含一个data像素数组，一个width为宽，一个height为高的

2.3何为imageData对象？

关于data数据（以我的大白话理解来说，专业说法在上面），其实就是描述每个像素点的信息
（数据非常大），我们都知道rgba吧，前三个数字代表像素点的颜色，第四个数字代表透明度，
所以data数据呢，就是整个选取部分的像素点信息的集合。每个像素点有四个值，
依次push到data数据中。

如上图所示，我们就知道第一个像素点的颜色就是rgba(114,112,113,255/255),那么他的位置
就是位于坐标（0，0）。假如选取的canvas大小为500\*500的,
那么这个data数组的大小就是500\*500\*4。

2.4 ctx.putImageData(myImageData, dx, dy);

用法：在场景中写入像素数据  
myImageData:就是imageData对象  
dx,dy:就是场景的坐标起点

2.5 canvas.toBlob(callback, type, encoderOptions)

用法：方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地  
callback:回调函数，可获得一个单独的Blob对象参数  
type:DOMString类型，指定图片格式，默认格式为image/png。  
encoderOptions :Number类型，值在0与1之间，当请求图片格式为image/jpeg
或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，
则使用默认值，其余参数将被忽略。

2.6 requestanimationframe:

首先我们知道裁剪功能是需要运动，那么肯定会用到动画。
h5提供了我们一个终极动画解决的函数，就是requestanimationframe.

3实战教学

3.1思路分析

首先我们需要借助input元素上传图片获取img对象（易）
把img对象写入canvas元素中（易）
需要创建一个裁剪方框对象用来裁剪图片，方框随用户交互移动和缩放（难）
获取方框内的图片信息导入出来
视觉优化，将整张图片绘制灰色，选中的部分为亮色（中）
完成上传及其他操作

思路很容易懂，接下来我们就来一步一步实现。上面的每个api必须熟练掌握，不熟悉的回头再看一看。下面就是代码加gif图片演示，基本上每句代码都是有备注的。

3.2获取图片及显示图片:

思路：
首先通过input元素我们可以获取到img对象
，在图片加载出来后就可以画入画图中，
并可以循环动画。

<template>
  <div id="app">
    <canvas width='500' height='500' id='canvas'></canvas>
     <input type="file"
           @change="handleChange"
           multiple='true'
           accept='image/*'
           >
  </div>
</template>

<script>
export default{
  data(){
    return{
      ctx:'',
      img:''
    }
  },
  mounted(){
    // 获取canvas对象
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')
    // 讲ctx存入data中
    this.ctx=ctx
  },
  methods:{
       // 读取图片
    handleChange (e) {
      const that = this
      // 创建一个文件读取流
      const reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      // 文件加载完成后可以读入
      reader.onload = function () {
        // this.reslut 为图片信息，就开始调用drawImg方法将图片写入canvas中
        that.drawImg(this.result)
      }
    },
    // 创建一个图片对象 画到画布上
    drawImg (imgData) {
      const that = this
      const img = new Image()
      img.src = imgData
      this.img = img
      img.onload = function () {
        // 循环动画
        window.requestAnimationFrame(that.animate)
      }
    },
    animate(){
         // 清除画布,在下一次循环会画入重新
      this.ctx.clearRect(0,0,500,500)
      // 画照片
      this.ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, 0, 0, 500, 500)
      // 循环动画
      window.requestAnimationFrame(this.animate)
    }
  }
}
</script>

<style scoped>
canvas{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border:1px solid red
}
</style>

3.3 绘制裁剪框，随着鼠标移动及缩放

思路：借助三个事件，鼠标按下，移动，抬起。在移动事件
里面通过offsetX和offsetY获取鼠标在canvas内的坐标
。然后创建一个函数根据鼠标的坐标用来画出这个裁剪框，
放入animate函数里面循环。

演示：

<template>
  <div id="app">
    <canvas width='500' height='500' id='canvas'></canvas>
     <input type="file"
           @change="handleChange"
           multiple='true'
           accept='image/*'
           >
  </div>
</template>

<script>
/* eslint-disable */
export default{
  data(){
    return{
      ctx:'',
      img:'',
      rectLeft:150,
      rectTop:150,
      rectWidth:200,
      rectHeight:200
    }
  },
  mounted(){
    const that=this
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')
    this.ctx=ctx
    // 新增----绑定点击事件，根据鼠标移动坐标画出裁剪框
      this.down=canvas.addEventListener('mousedown',()=>{
        canvas.onmousemove=function(e){
        let x=e.offsetX
        let y=e.offsetY
         x <= 100 ? that.rectLeft=0: that.rectLeft = x - 100
         y <= 100 ? that.rectTop =0: that.rectTop = y - 100
        x >= 400 ? that.rectLeft = 300 : that.rectLeft = x - 100
        y >= 400 ? that.rectTop = 300 : that.rectTop = y - 100
        if(x<=100){
          that.rectLeft=0
        }
        if(y<=100){
           that.rectTop=0
        }
      }
    })
    canvas.addEventListener('mouseup',()=>{
    console.log('抬起了')
   canvas.onmousemove=null
  })
  },
  methods:{
    handleChange (e) {
      const that = this
      const reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      reader.onload = function () {
        that.drawImg(this.result)
      }
    },
    drawImg (imgData) {
      const that = this
      const img = new Image()
      img.src = imgData
      this.img = img
      img.onload = function () {
        window.requestAnimationFrame(that.animate)
      }
    },
    animate(){
      this.ctx.clearRect(0,0,500,500)
      this.ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, 0, 0, 500, 500)
      // 新增---画裁剪框
      this.drawRect()
      window.requestAnimationFrame(this.animate)
    },
    // 新增----画出裁剪框
    drawRect(){
      this.ctx.beginPath()
      this.ctx.lineWidth = 2
      this.ctx.strokeStyle = 'rgba(0,0,0,0.6)'
      this.ctx.strokeRect(this.rectLeft, this.rectTop, this.rectWidth, this.rectHeight)
    }
  }
}
</script>

<style scoped>
canvas{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border:1px solid red
}
input{
  position: absolute;
  top:10%;
  left:50%;
  transform: translate(-50%,-50%);
}
</style>

3.4 视觉优化,背景呈现灰色，裁剪出呈现亮色

为了更好的提高用户体验感，不得不得进行视觉优化：
思路：在每次循环动画的开始，我们可以先获取裁剪框
内的imageData,就是获取照片原色彩，
之后通过算法使用putImageData方法将整个canvas对象色彩变成灰色，
然后再把之前获取
裁剪框内的彩色在使用putImageData绘制上去即可。

<template>
  <div id="app">
    <canvas width='500' height='500' id='canvas'></canvas>
     <input type="file"
           @change="handleChange"
           multiple='true'
           accept='image/*'
           >
  </div>
</template>

<script>
/* eslint-disable */
export default{
  data(){
    return{
      ctx:'',
      img:'',
      rectLeft:150,
      rectTop:150,
      rectWidth:200,
      rectHeight:200,
      chooseRgb:[]
    }
  },
  mounted(){
    const that=this
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')
    this.ctx=ctx
      this.down=canvas.addEventListener('mousedown',()=>{
        canvas.onmousemove=function(e){
        let x=e.offsetX
        let y=e.offsetY
         x <= 100 ? that.rectLeft=0: that.rectLeft = x - 100
         y <= 100 ? that.rectTop =0: that.rectTop = y - 100
        x >= 400 ? that.rectLeft = 300 : that.rectLeft = x - 100
        y >= 400 ? that.rectTop = 300 : that.rectTop = y - 100
        if(x<=100){
          that.rectLeft=0
        }
        if(y<=100){
           that.rectTop=0
        }
      }
    })
    canvas.addEventListener('mouseup',()=>{
    console.log('抬起了')
   canvas.onmousemove=null
  })
  },
  methods:{
    handleChange (e) {
      const that = this
      const reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      reader.onload = function () {
        that.drawImg(this.result)
      }
    },
    drawImg (imgData) {
      const that = this
      const img = new Image()
      img.src = imgData
      this.img = img
      img.onload = function () {
        window.requestAnimationFrame(that.animate)
      }
    },
    animate(){
      this.ctx.clearRect(0,0,500,500)
      this.ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, 0, 0, 500, 500)
      this.drawChoose()
      this.drawHui()
      this.drawRect()
      window.requestAnimationFrame(this.animate)
      
    },
    drawRect(){
      this.ctx.beginPath()
      this.ctx.lineWidth = 2
      this.ctx.strokeStyle = 'rgba(0,0,0,0.6)'
      this.ctx.strokeRect(this.rectLeft, this.rectTop, this.rectWidth, this.rectHeight)
    },
       // 新增----获取裁剪框的色彩色彩
    drawChoose () {
      const data = this.ctx.getImageData(this.rectLeft, this.rectTop, this.rectWidth, this.rectHeight)
      this.chooseRgb = data
    },
        //新增---- 全部图片变灰色并且画上彩色的
    drawHui () {
      const data = this.ctx.getImageData(0, 0, 500, 500)
      for (let i = 0; i < data.data.length; i += 4) {
        const grey = (data.data[i] + data.data[i + 1] + data.data[i + 2]) / 3
        data.data[i] = data.data[i + 1] = data.data[i + 2] = grey
      }
      // 将变成灰色的像素绘制上去
      this.ctx.putImageData(data, 0, 0)
      // 将彩色的裁剪框绘制上去
      this.ctx.putImageData(this.chooseRgb, this.rectLeft, this.rectTop)
    },
  }
}
</script>

<style scoped>
canvas{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border:1px solid red
}
input{
  position: absolute;
  top:10%;
  left:50%;
  transform: translate(-50%,-50%);
}
</style>

3.5获取裁剪框的内容并显示出来

思路：需要创建一个新的canvas对象
，随后调用putImageData将裁剪的像素对象画上去即可

<template>
  <div id="app">
    <canvas width='500' height='500' class='canvas1'></canvas>
    <!-- 新增的canvas元素-->
    <canvas width='200' height='200' class='canvas2'></canvas>
     <input type="file"
           @change="handleChange"
           multiple='true'
           accept='image/*'
           >
          <button @click='caijian'>点击裁剪</button>
  </div>
</template>

<script>
/* eslint-disable */
export default{
  data(){
    return{
      ctx:'',
      img:'',
      rectLeft:150,
      rectTop:150,
      rectWidth:200,
      rectHeight:200,
      chooseRgb:[]
    }
  },
  mounted(){
    const that=this
    const canvas = document.querySelector('.canvas1')
    const ctx = canvas.getContext('2d')
    this.ctx=ctx
      this.down=canvas.addEventListener('mousedown',()=>{
        canvas.onmousemove=function(e){
        let x=e.offsetX
        let y=e.offsetY
         x <= 100 ? that.rectLeft=0: that.rectLeft = x - 100
         y <= 100 ? that.rectTop =0: that.rectTop = y - 100
        x >= 400 ? that.rectLeft = 300 : that.rectLeft = x - 100
        y >= 400 ? that.rectTop = 300 : that.rectTop = y - 100
        if(x<=100){
          that.rectLeft=0
        }
        if(y<=100){
           that.rectTop=0
        }
      }
    })
    canvas.addEventListener('mouseup',()=>{
    console.log('抬起了')
   canvas.onmousemove=null
  })
  },
  methods:{
    handleChange (e) {
      const that = this
      const reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      reader.onload = function () {
        that.drawImg(this.result)
      }
    },
    drawImg (imgData) {
      const that = this
      const img = new Image()
      img.src = imgData
      this.img = img
      img.onload = function () {
        window.requestAnimationFrame(that.animate)
      }
    },
    animate(){
      this.ctx.clearRect(0,0,500,500)
      this.ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, 0, 0, 500, 500)
      this.drawChoose()
      this.drawHui()
      this.drawRect()
      window.requestAnimationFrame(this.animate)
      
    },
    drawRect(){
      this.ctx.beginPath()
      this.ctx.lineWidth = 2
      this.ctx.strokeStyle = 'rgba(0,0,0,0.6)'
      this.ctx.strokeRect(this.rectLeft, this.rectTop, this.rectWidth, this.rectHeight)
    },
    drawChoose () {
      const data = this.ctx.getImageData(this.rectLeft, this.rectTop, this.rectWidth, this.rectHeight)
      this.chooseRgb = data
    },
    drawHui () {
      const data = this.ctx.getImageData(0, 0, 500, 500)
      for (let i = 0; i < data.data.length; i += 4) {
        const grey = (data.data[i] + data.data[i + 1] + data.data[i + 2]) / 3
        data.data[i] = data.data[i + 1] = data.data[i + 2] = grey
      }
      this.ctx.putImageData(data, 0, 0)
      this.ctx.putImageData(this.chooseRgb, this.rectLeft, this.rectTop)
    },
    // 新增一个canvas元素 用来存储裁剪的部分，以及上传时需要创建这个元素。
    caijian(){
      const canvas=document.querySelector('.canvas2')
       const ctx = canvas.getContext("2d")
      canvas.width = 200
      canvas.height = 200
      ctx.putImageData(this.chooseRgb, 0, 0)
    }
  }
}
</script>

<style scoped>
.canvas1{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border:1px solid red
}
.canvas2{
  position: absolute;
  top:50%;
  left:75%;
  transform: translate(-50%,-50%);
  border:1px solid red
}
input{
  position: absolute;
  top:10%;
  left:50%;
  transform: translate(-50%,-50%);
}
button{
   position: absolute;
  top:10%;
  left:70%;
  transform: translate(-50%,-50%);
}
</style>

3.6上传裁剪头像

思路：就是通过canvas.toBlob这个api实现的，
下面代码是我之前上传到服务器的时候写的，由于现在木有服务器，
就不能演示了。

// 需要接受canvas元素对象，上一部分创建的
uploadImg (canvas) {
// 异步获取blob对象
      canvas.toBlob(async (blob) => {
      // 实例化一个FormData
        let fd = new FormData()
        fd.append('file', blob)
        fd.name = new Date().getTime()
        // 传送数据
        const result = await this.$http({
          method: 'post',
          url: 'api/users/upload',
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          data: fd
        })
        if (result.data.success) {
          this.isShow = false
          this.$bus.$emit('on1', result.data.url)
          this.$alert.success('更换头像成功', 1000)
        }
      }, 'image/png')
    }
  }

4.总结

整个裁剪过程已经讲完了，上传那一块还是有疑惑的同学，可以参考我的这篇文章

Vue前后端开发仿蘑菇街商城项目这里面有上传头像的前后端代码，大家可以去参考一下。还是有疑惑的可以给我留言哈。

5.目标

这个月末之前，我争取开发一下裁剪的插件，共大家使用，毕竟造轮子还是很有趣的。希望大家都能来捧场~