# BlackLivesMatter !

下载
# BlackLivesMatter ! https://blacklivesmatter.com/ 黑人的生命是重要的运动资源 VueCroppie VueCroppie是一个Vue 2包装Croppie一个美丽的照片裁剪工具的Javascript由foliotek。 如果你喜欢这个项目，请给它一个星，并考虑跟随作者。:) 安装 NPM 安装vue-croppie—保存 CDN https://unpkg.com/vue-croppie/dist/vue-croppie.js 与捆绑器一起使用 与Webpack、Parcel或其他bundler一起使用VueCroppie 从' Vue '导入Vue; 从“vue-croppie”进口VueCroppie; 导入“croppie / croppie。手动导入croppie css Vue.use (VueCroppie); 在浏览器中直接使用 & lt;脚本src = " https://unpkg.com/vue-croppie/dist/vue-croppie.js "祝辞& lt; / script> & lt;链接rel = "样式表" href = " https://unpkg.com/croppie/croppie.css "比; & lt; body> … & lt; / body> & lt; script> const vm = new Vue({…}); & lt; / script> 样本 下面的示例将生成此内容。 & lt; template> & lt; div> & lt; !——注意“ref”在这里很重要(value可以是任何东西)。阅读下面关于“ref”的描述。——比; & lt; vue-croppie ref = " croppieRef " : enableOrientation = " true " :boundary="{宽度:300，高度:300}" @result = "结果" @update =“更新”比; & lt; / vue-croppie> & lt; !——结果—— & lt; img v-bind: src =“裁剪”比; & lt;按钮@click = "绑定()"祝辞Bind< / button> & lt; !—旋转角度为Number—> & lt;按钮@click = "旋转(-90)“在旋转Left< / button> & lt;按钮@click = "旋转(90)“在旋转Right< / button> @click="cropViaEvent()">通过Event & lt; / div> & lt; / template> & lt; script> 出口默认{ 安装(){ //在挂载组件时，我们访问.bind({…}) 函数将初始图像放置在画布上。 美元。refs.croppieRef.bind ({ url:“http://i.imgur.com/Fq2DMeH.jpg”, }) }, 数据(){ 返回{ 裁剪:空, 图片:( “http://i.imgur.com/fHNtPXX.jpg”, “http://i.imgur.com/ecMUngU.jpg”, “http://i.imgur.com/7oO6zrh.jpg”, “http://i.imgur.com/miVkBH2.jpg” ] } }, 方法:{ bind () { //随机选择猫咪照片，没什么特别的。 让url = this.images[Math.floor(Math.random() * 4)] //就像我们对on .bind({…})所做的一样 //上面的mount()函数。 美元。refs.croppieRef.bind ({ url: url、 }); }, / / CALBACK用法 作物(){ //这里我们通过回调函数获得结果 //并将结果设置为。裁切 //用于显示上面的结果。 let options = { 格式:jpeg, 循环:真正的 } refs.croppieRef美元。结果(选项,(输出)=比;{ 这一点。裁剪=输出; }); }, / /事件的使用 cropViaEvent () { 美元。refs.croppieRef.result(选项); }, 结果(输出){ 这一点。裁剪=输出; }, 更新(val) { console.log (val); }, 旋转(rotationAngle) { //旋转图像 美元。refs.croppieRef.rotate (rotationAngle); } } } & lt; / script> 文件上传示例 您可以上传文件，而不是使用直接图像链接。 使用 在表单中添加一个文件输入和vue-croppie组件。 & lt; template> & lt;输入类型=“文件”@change = " croppie " /比; {width: 450, height: 300}":viewport="{width:400, height:250， 'type':'square'}"; & lt; / vue-croppie> & lt; !——结果—— & lt; img src =“裁剪”比; & lt;按钮@click =“作物”祝辞Crop< / button> & lt; / template> & lt; script> 出口默认{ 数据(){ 返回{ croppieImage:”, 裁剪:零 }; }, 方法:{ croppie (e) { var files = e.target。文件| | e.dataTransfer.files; 如果(! files.length)返回; var reader = new FileReader(); 读者。onload = e =>{ 美元。refs.croppieRef.bind ({ url: e.target.result }); }; reader.readAsDataURL(文件[0]); }, 作物(){ //选项可以更新。 // Current选项将返回所上传图像的base64版本，大小为600px X 450px。 let options = { 类型:“base64”, 尺寸:{宽度:600，高度:450}， 格式:“jpeg” }; refs.croppieRef美元。结果(选择、输出=比;{ 这一点。裁剪=。croppieImage =输出; console.log (this.croppieImage); }); } } }; 利用期权 所有Croppie选项被转换成道具，以便能够在vue-croppie组件中使用它们。 使用 & lt; vue-croppie ref = croppieRef : enableOrientation = " true " : mouseWheelZoom = " false " :viewport="{width: 200, height: 200, type: 'circle'}" @result = " fn " 比; & lt; / vue-croppie> API 所有的属性和方法都基于农作物文档。如果你明白我的意思，那么所有的属性和方法名都是"==="。 除了下面的几件事。 选项 类型 默认的 描述 裁判(必需) 对象 没有一个 ref用于创建对子组件的引用，以便访问它的方法和属性。具体的例子是从组件外部访问vue-croppie的result()函数。 resultType 字符串 base64 通过result()对被裁剪的图像进行编码。也可在Croppie文档。 customClass 字符串 没有一个 您可以传递一个或多个自定义类到道具customClass，如customClass="class1 class2 class3" 事件 选项 类型 使用 描述 更新 函数 @update = " fn " 当作物元素被缩放、拖动或裁剪时触发 结果 函数 @result = " fn " 当图像被裁剪时触发。返回裁剪的图像。 croppieInitialized 函数 @croppieInitialized = " fn " 当作物被初始化时触发。 注意: $ref . croppieref .result({}). $ref . croppieref .result(})。在这里看到的 常见问题解答 如何清除/销毁副本? 我添加了一个名为refresh()的新方法，可以这样使用。$ref . croppierefs .refresh()，但是croppie实例现在会在每次调用crop()后自动刷新。 有用的链接 358 -官方农作物网页。 更新 1.3.0 - 2017年8月16日 添加webpack构建 修复# 5 修复# 14 1.2.5 - 2017年8月12日 裁剪的图像输出现在可以通过vue事件检索。 添加结果事件。 添加更新的事件。 1.2.3 增加了每次调用crop()后自动刷新croppie实例的功能。 新的方法refresh()，它会破坏和重新创建croppie实例。 1.2.x 结果选项现在通过this.$ref . croppieref传递。结果(选择,回调)。 许可证 麻省理工学院 使用和滥用自负风险。 & lt; / p>与❤️Jofferson Ramirez Tiquez本文转载于：http://www.diyabc.com/frontweb/news33297.html