vue 实现剪裁图片并上传服务器功能
发布时间：2020-12-17 02:33:24 所属栏目：百科 来源：网络整理
导读：预览链接 效果图如下所示，大家感觉不错，请参考实现代码。 需求 [x] 预览：根据选择图像大小自适应填充左侧裁剪区域 [x] 裁剪：移动裁剪框右侧预览区域可实时预览 [x] 上传 读取图片 ： (methods:readImage) 创建图片对象，使用createObjectURL显示图片。 o
|
预览链接 效果图如下所示，大家感觉不错，请参考实现代码。
需求
实现步骤methods:funName() - 对应源码中methods中的funName方法 data:dataName - 对应源码中data中的dataName数据 1. 图片选择与读取
2. 在canvas中展示图片需要掌握的 canvas 相关知识:
5.剪裁图片 ctx.clip() ;具体步骤:
裁剪区域vue data示意图：
3. 移动裁剪框知识点: onmousedown、onmousemove、onmouseup 具体实现:
记录鼠标坐标，鼠标移动根据偏移量计算圆心位置。 {
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,e.offsetY];
};
canvas.onmouseup = e => {
self.movement = false;
canvas.onmousemove = null;
canvas.onmouseup = null;
};
};
4. 上传图片至服务器知识点:具体实现: {
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 实现剪裁图片并上传服务器功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
