直接上代码 代码复制即可用,当然css样式你的改动 (可复制全码在最下面)
<template>
<div class="Cbox">
<div class="canvas-box" @touchstart="startFunc" @touchmove="moveFunc">
<canvas :width="CW" :height="CH" ref="canvas"></canvas>
<div
class="mark"
:style="{width:MW+'px',height:MH+'px', left:ML+'px',top:MT+'px'}"
v-show="ISMARK"
></div>
</div>
<div class="button-box">
<input type="file" accept="image/*" class="file" ref="file" @change="changeFunc" />
<button @click="clickFunc">选择图片</button>
<button @click="scaleFunc(1)">放大</button>
<button @click="scaleFunc(0)">缩小</button>
<button @click="severFunc">保存图片</button>
</div>
</div>
</template>
<script>
export default {
data() {
// 获取屏幕的宽度
let winW = document.documentElement.clientWidth;
// 获取html字体大小
var font = parseFloat(document.documentElement.style.fontSize);
// 重新转换为px 0.4是css里面设置的内边距
var canvasW = winW - 0.4 * font;
// 区域的大小 0.7是裁剪区域的大小 现在是canvas画布的70%
var markW = canvasW * 0.7;
return {
// 画布
CW: canvasW, //画布宽度
CH: canvasW, //画布高度
// 裁剪区
MW: markW, //裁剪区域的宽度
MH: markW, //裁剪区域的高度因为是正方形所有宽高一样
ML: (canvasW - markW) / 2,//裁剪区域所在的位置
MT: (canvasW - markW) / 2,//裁剪区域所在的位置
// 图片
IW: 0,//图片的宽度
IH: 0,//图片的高度
IL: 0, //图片的位置
IT: 0,//图片的位置
ISMARK: false,//裁剪区的显示隐藏
};
},
methods: {
clickFunc() {
// 触发文件上传事件
this.$refs.file.click();
},
// 获取到图片对象对图片进行转码位置处理
changeFunc() {
this.ISMARK = true;
let file = this.$refs.file.files[0];
if (!file) return;
let fileExample = new FileReader();
fileExample.readAsDataURL(file);
fileExample.onload = e => {
// 创建一个新的图片
this.IMAGE = new Image();
this.IMAGE.src = e.target.result;
this.IMAGE.onload = () => {
this.IW = this.IMAGE.width;
this.IH = this.IMAGE.height;
// 始终显示完整的图片换算出缩放比例的大小防止图片变形
let n=0;
if (this.IW > this.CW) {
n = this.IW / this.CW;
this.IW = this.CW;
this.IH = this.IH / n;
} else {
n = this.IH / this.CH;
this.IH = this.CH;
this.IW = this.IW / n;
}
// 始终剧中显示图片
this.IL = (this.CW - this.IW) / 2;
this.IT = (this.CH - this.IH) / 2;
this.drawImage();
};
};
},
// 图片放大缩小
scaleFunc(flag) {
if (!this.IMAGE) return;
// 宽高比换算
let n = this.IW / this.IH;
let n1 = 20;
let n2 = n1 / n;
if (flag) {
this.IW += n1;
this.IH += n2;
} else {
this.IW -= n1;
this.IH -= n2;
}
this.drawImage();
},
// 点击的起始位置
startFunc(e){
let point=e.changedTouches[0]
this.startX=point.clientX
this.startY=point.clientY
},
// 移动
moveFunc(e){
if (!this.IMAGE) return;
let point=e.changedTouches[0]
this.changeX=point.clientX-this.startX
this.changeY=point.clientY-this.startY
// 防止误触摸
if(Math.abs(this.changeX)>10||Math.abs(this.changeY)>10){
this.IL+=this.changeX
this.IT+=this.changeY
this.drawImage()
// 每次滑动的值都是最新的x，y起始位置
this.startX=point.clientX
this.startY=point.clientY
}
},
// 保存图片
severFunc(){
if(!this.IMAGE)return
// 获取画布指定位置的像素数据
let imageData=this.CTX.getImageData(this.ML, this.MT, this.MW, this.MH)
// 重新创建一个canvas用于存放选择好的位置图片
let canvas2 =document.createElement('canvas')
let canvas2CTX=canvas2.getContext("2d");
canvas2.width=this.MW
canvas2.height=this.MH
// 将获取到的像素数据存放于画布
canvas2CTX.putImageData(imageData,0,0,0,0,this.MW,this.MH)
// 拿到base64编码传出
this.$emit('serverImage2', canvas2.toDataURL("iamge/png"))
},
// 对图片进行绘制
drawImage() {
this.CTX = this.$refs.canvas.getContext("2d")
// 先清空上次的绘制的图片
this.CTX.clearRect(0, 0, this.CW, this.CH);
this.CTX.drawImage(this.IMAGE, this.IL, this.IT, this.IW, this.IH)
},
}
};
</script>
<style >
.Cbox {
padding: 0.2rem;
}
.canvas-box {
position: relative;
border: 0.01rem solid #ccc;
}
canvas {
}
.mark {
position: absolute;
width: 5rem;
height: 5rem;
background-color: rgba(0, 0, 0, 0.4);
}
.file {
display: none;
}
.button-box button {
background: skyblue;
border: none;
padding: 0.5rem 1rem;
}
</style>
