vue+cropperjs实现图片裁剪功能——PC端+移动端——技能提升

矫情吗；* 2022-09-04 11:51 317阅读 0赞

最近发现了一个图片裁剪的插件`cropperjs`，这个插件非常的强大，能够实现多种功能：

可以对指定的图片进行裁剪，可以自己选择裁剪的交互方式，如大小、纵横比等 还可以预览裁剪区域，确认裁剪后可以生成一个包含裁剪图的`canvas`对象，借助`canvas`的`toDataURL`方法可以生成一张`Base64`格式的图片。还有另外一种不使用`canvas`的方式，利用该工具丰富的`api`可以拿到裁剪区域相对于原图的各项数据，使用这些数据进行`css`绝对定位即可展示裁剪后的图，该方式可以保证图片不失真和完整。  
[大神使用cropperjs的链接：https://www.cnblogs.com/eightFlying/p/cropper-demo.html][cropperjs_https_www.cnblogs.com_eightFlying_p_cropper-demo.html]

[cropperjs官网：https://fengyuanchen.github.io/cropper/][cropperjs_https_fengyuanchen.github.io_cropper]

我并未深入研究此插件，此篇文章只简单介绍一下等比例的裁剪功能及使用步骤。

# 1.安装`cropperjs`插件 #

`npm install cropperjs --save-dev`

安装完插件后，由于此插件并非很多页面都要用到，因此可以不在`main.js`主入口文件中全局引入，可以在需要使用图片裁剪功能的地方单独引入即可。

# 2.`template`部分代码 #

页面部分，有个原图部分+裁剪按钮+裁剪区域+裁剪后的图片部分。

# 3.`js`部分代码 #

import Cropper from "cropperjs";
    import "cropperjs/dist/cropper.css";
    export default{ 
    	data(){ 
    		return{ 
    			 myCropper: null,
          		 afterImg: "",
    		}
    	},
    	created(){ 
    		this.$nextTick(()=>{ 
    			this.init();
    		})
    	},
    	methods:{ 
    		init(){ 
    			this.myCropper = new Cropper(this.$refs.image,{ 
    				viewMode:1,
    				dragNode:'none',
    				initialAspectRatio:1,
    				aspectRatio:1,
    				preview:'.before',
    				background: false,
    		        autoCropArea: 0.6,
    		        zoomOnWheel: false
    			})
    		},
    		sureSava(){ 
    			this.afterImg = this.myCropper.getCroppedCanvas({ 
    				imageSmoothingQuality:'high'
    			}).toDataURL('image/jpeg');
    		}
    	}
    }

# 4.`css`部分 #

.container{ 
      display: flex;
    }
    .before{ 
      width: 100px;
      height: 100px;
      overflow: hidden;
      /* 这个属性可以得到想要的效果 */
    }
    .img-container{ 
      height: 400px;
      overflow: hidden;
    }
    .afterCropper{ 
      flex: 1;
      margin-left: 20px;
      border: 1px solid salmon; 
      text-align: center;
    }
    .afterCropper img{ 
      width: 150px;
      margin-top: 30px;
    }

# 5.最终效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

附录一个超级详细的使用参数说明：大神就是大神，生活中处处都是大神。

[大神提供的cropperjs的参数详细说明：https://blog.csdn.net/achejq/article/details/93240104][cropperjs_https_blog.csdn.net_achejq_article_details_93240104]

完成！！！

[cropperjs_https_www.cnblogs.com_eightFlying_p_cropper-demo.html]: https://www.cnblogs.com/eightFlying/p/cropper-demo.html
[cropperjs_https_fengyuanchen.github.io_cropper]: https://fengyuanchen.github.io/cropper/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/bf1b926ad64f4dcc85c318c1b2ac3641.png
[cropperjs_https_blog.csdn.net_achejq_article_details_93240104]: https://blog.csdn.net/achejq/article/details/93240104