这篇文章主要为大家详细介绍了vue 实现剪裁图片并上传服务器功能,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
预览链接点击预览
效果图如下所示,大家感觉不错,请参考实现代码。
【q1010.com温馨提示:图片暂缺】
methods:funName() - 对应源码中methods中的funName方法
data:dataName - 对应源码中data中的dataName数据
需要掌握的 canvas 相关知识:
【q1010.com温馨提示:图片暂缺】
代码如下:
# 语法
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
# 参数
image # 绘制的元素(可以为HTMLImageElement,HTMLVideoElement,或者 HTMLCanvasElement。)
dx,dy # 目标画布(destination canvas)左上角的坐标
dWidth,dHeight # 目标画布(destination canvas)上绘制图像宽高
sx,sy # 源画布(source canvase)左上角的坐标
sWidth,sHeight # 源画布(source canvase)选择的图像宽高
裁剪区域vue data示意图:
【q1010.com温馨提示:图片暂缺】
知识点: onm ousedown、onmousemove、onmouseup
具体实现:
methods:drag()
记录鼠标坐标,鼠标移动根据偏移量计算圆心位置。
代码如下:
canvas.onmousedown = e => {
let [lastX, lastY] = [e.offsetX, e.offsetY];
self.movement = true;
canvas.onmousemove = e => {
self.circleCenter = {
X:
self.cropperCanvasSize.width > 2 * self.slectRadius
? self.circleCenter.X + (e.offsetX - lastX)
: self.cropperCanvasSize.width / 2,
Y:
self.cropperCanvasSize.height > 2 * self.slectRadius
? self.circleCenter.Y + (e.offsetY - lastY)
: self.cropperCanvasSize.height / 2
};
self.renderCropperImg();
[lastX, lastY] = [e.offsetX, e.offsetY];
};
canvas.onmouseup = e => {
self.movement = false;
canvas.onmousemove = null;
canvas.onmouseup = null;
};
};
具体实现:
代码如下:
methods:upload()
this.$refs.preview.toBlob((blob)=> {
const url = URL.createObjectURL(blob);
const formData = new FormData();
formData.append(this.uploadProps.name, blob, `${Date.now()}.png`);
if(this.data){
Object.keys(this.uploadProps.data).forEach(key => {
formData.append(key, this.uploadProps.data[key]);
});
}
const request = new XMLHttpRequest();
request.open("POST", this.uploadProps.action, true);
request.send(formData);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
// ...
}
};
});
以上所述是小编给大家介绍的vue 实现剪裁图片并上传服务器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持!
本文来自:http://www.q1010.com/184/4532-0.html
注:关于vue 实现剪裁图片并上传服务器功能的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。