基于Vue+Canvas实现图片的裁切

最新推荐文章于 2024-03-22 14:35:00 发布

星霜下逆天生

最新推荐文章于 2024-03-22 14:35:00 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/donglize521521/article/details/107846572

基于Vue+Canvas实现图片的裁切

1.查看package.json的依赖，less和less-loader。
在这里插入图片描述
2.main.js就是默认生成的。
3.App.vue

<template>
  <div id="app">
    <clip-image @saveImage="saveImage" v-if="!isSave"></clip-image>
    <div class="resultBox" @click="change" v-else>
      <img :src="data" alt />
    </div>
  </div>
</template>

<script>
/* IMPORT CSS */
import "./assets/reset.min.css";
import "./assets/basic.less";

/* IMPORT COMPONENT */
import ClipImage from "./components/ClipImage.vue";
export default {
   
   
  data() {
   
   
    return {
   
   
      isSave: false,
      data: ""
    };
  },
  components: {
   
   
    ClipImage
  },
  methods: {
   
   
    saveImage(payload) {
   
   
      this.isSave = true;
      this.data = payload;
    },
    change() {
   
   
      this.isSave = false;
    }
  }
};
</script>

<style lang="less">
.resultBox {
   
   
  padding: 0.2rem;
}

.resultBox img {
   
   
  display: block;
  box-sizing: border-box;
  width: 7.1rem;
  height: 7.1rem;
  border: 0.02rem solid #ddd;
}
</style>

3.重点说下组件cliplmage.vue组件，下面这行代码的意思是，在项目当中不管是移动端还是PC端，如果想让用户从客户端从本地能够选择一些图片进行上传，需要用到一个type为file的input表单元素，只允许图片格式。file这个样式类默认是隐藏的。

   <input type="file" accept="image/*" class="file" ref="file" @change="changeFunc" />

4.操作步骤
①我们需要准备一些数据：画布的大小、MARK遮罩层的大小和位置、上传图片的大小和位置、是否显示MARK…
②上传图片：选中图片，把其绘制到画布中
③实现图片的拖拽Touch：重新绘制图片所在的位置
④实现如图的方法和缩小：重新绘制图片的大小
⑤保存图片的时候：把遮罩层选中的部分（像素）最后生成一张新的图片
5.代码习惯养成
做什么事情之前先不要写代码，先用汉字写提纲大步骤，防止思路出错就乱，如果写不出来一定是基础知识不扎实，如果没有思路就是项目实战少。这两方面都应该提高。
6.实现步骤
封装子组件
①第一步：我们需要准备一些数据：画布的大小、MARK遮罩层的大小和位置、上传图片的大小和位置、是否显示MARK…

<div class="canvasBox">
      <canvas class="canvasBox" ></canvas>
      <canvas></canvas>
      <div class="mark"></div>
    </div>

    <div class="buttonBox">
      <input type="file" accept="image/*" class="file" />
      <button >选择图片</button>
      <button >放大</button>
      <button>缩小</button>
      <button >保存图片</button>
    </div>
  </div>
</template>

<script>
export default {
   
   
  data(){
   
   
    let winW=document.documentElement.clientWidth,
        font=parseFloat(document.documentElement.style.fontSize),
        canvasW=winW-0.4*font;
        markW=canvasW*0.7;//是整个canvas大小的百分之七十
    return{
   
   
      //画布大小
      CW:canvasW,    //canvas画布大小
      CH:canvasW,     //正方形
      //MARK大小和位置
      MW:markW,
      MH:markW,
      ML:(canvasW-markW)/2,
      MT:(canvasW-markW)/2,
      //上传图片的大小和位置
      IW:0,        //imagewidth
      IH:0,
      IL:0,
      IT:0