漯河微信小程序开发_vue 完成剪裁图片并上传效劳

摘要: vue 完成裁剪照片并提交网络服务器作用 本文关键详细介绍了vue 完成裁剪照片并提交网络服务器作用,十分非常好,具备参照效仿使用价值,必须的朋友能够参照下浏览连接实际效...

vue 实现剪裁图片并上传服务器功能       这篇文章主要介绍了vue 实现剪裁图片并上传服务器功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下

预览链接

效果图如下所示,大家感觉不错,请参考实现代码。

 

需求

[x] 预览:根据选择图像大小自适应填充左侧裁剪区域 [x] 裁剪:移动裁剪框右侧预览区域可实时预览 [x] 上传 清空:点击确认上传裁剪图片,点击取消按钮清空图像 [ ] 裁剪框可调节大小

methods:funName() - 对应源码中methods中的funName方法

data:dataName - 对应源码中data中的dataName数据

1. 图片选择与读取

选择图片 :(methods:selectPic) 使用 input[type="file"] 弹出选择图片框,js 主动触发点击事件; 读取图片 : (methods:readImage) 创建图片对象,使用createObjectURL显示图片。 objectURL = URL.createObjectURL(blob) ;

2. 在canvas中展示图片

需要掌握的 canvas 相关知识:

清空画布 ctx.clearRect(x,y,width,height) ; 填充矩形 ctx.fillRect(x,y,width,height) ; 绘制圆弧 ctx.arc(x,y,r,startAngle,endAngle,counterclockwise) ; 绘制矩形 ctx.rect(x,y,width,height); 绘制图像drawImage

 

 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)选择的图像宽高

5.剪裁图片 ctx.clip() ;

具体步骤:

计算canvas宽高 :(methods:calcCropperSize) 根据图片大小,计算canvas宽高(data:cropperCanvasSize),以致图片能够在裁剪区域自适应展示,并确定裁剪的左上角位置(data:cropperLocation)。 绘制左侧裁剪区域图像 :(methods:renderCropperImg)

裁剪区域vue data示意图:

 

绘制右侧预览图片 :(methods:renderPreviewImg)

3. 移动裁剪框

知识点: onmousedown、onmousemove、onmouseup

具体实现:

methods:drag()

记录鼠标坐标,鼠标移动根据偏移量计算圆心位置。

canvas.onmousedown = e = {
 let [lastX, lastY] = [e.offsetX, e.offsetY];
 self.movement = true;
 canvas.onmousemove = e = {
 self.circleCenter = {
 self.cropperCanvasSize.width 2 * self.slectRadius
 self.circleCenter.X + (e.offsetX - lastX)
 : self.cropperCanvasSize.width / 2,
 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;
 };

4. 上传图片至服务器

知识点:

具体实现:

methods:upload()
this.$refs.preview.toBlob((blob)= {
 const url = URL.createObjectURL(blob);
 const formData = new FormData();
 formData.append(this.uploadPro凡科抠图.name, blob, `${Date.now()}.png`);
 if(this.data){
 Object.keys(this.uploadPro凡科抠图.data).forEach(key = {
 formData.append(key, this.uploadPro凡科抠图.data[key]);
 const request = new XMLHttpRequest();
 request.open("POST", this.uploadPro凡科抠图.action, true);
 request.send(formData);
 request.onreadystatechange = () = {
 if (request.readyState === 4 request.status === 200) {
 // ...
 });

总结

以上所述是小编给大家介绍的vue 实现剪裁图片并上传服务器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序模板市场