基于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