canvas实现炫酷的一键抠图和背景替换

演示地址
代码仓库

关键技术

canvas api、 element-ui (el-color-picker、el-upload)

原理解析

1. 用户从本地上传一张图片

我们拿到图片数据并在页面渲染出来，这一步用到了elementui的el-upload

el-upload.avatar-uploader(
  ref="logoUpload",
  accept="image/*",
  action="#",
  :auto-upload="false",
  :on-change="handleStatusChange"
)
  el-button(size="small", type="primary") 点击上传

这里实际上不需要真正上传到服务器，只需要获取到图片的在内存中的url

handleStatusChange(file) {
   
  // console.log(file);
  this.originImg = URL.createObjectURL(file.raw);
},

拿到url之后可以先把图片用img标签渲染在页面上，这样做的目的是为了获取图片的实际尺寸，方面我们等比例缩放在我们的canvas上。

// 图片加载完成
    loadImg(e) {
   
      const img = e.target;
      const width &#