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

基于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
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值