VueCroppie
下载
VueCroppie
VueCroppie是一个Vue 2包装Croppie一个美丽的照片裁剪工具的Javascript由foliotek。
安装
NPM
安装vue-croppie—保存
CDN
https://unpkg.com/vue-croppie/dist/vue-croppie.js
使用
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
Vue.use(VueCroppie);
& lt;脚本src = " https://unpkg.com/vue-croppie/dist/vue-croppie.js "比; & lt; body> … & lt; / body> & lt; script> Vue.use (VueCroppie.default); const vm = new Vue({…}); & lt; / script> 样本 下面的示例将生成此内容。
<template>
<div>
<!-- Note that 'ref' is important here (value can be anything). read the description about `ref` below. -->
<vue-croppie
ref=croppieRef
:enableOrientation="true"
@result="result"
@update="update">
</vue-croppie>
<!-- the result -->
<img v-bind:src="cropped">
<button @click="bind()">Bind</button>
<!-- Rotate angle is Number -->
<button @click="rotate(-90)">Rotate Left</button>
<button @click="rotate(90)">Rotate Right</button>
<button @click="crop()">Crop Via Callback</button>
<button @click="cropViaEvent()">Crop Via Event</button>
</div>
</template>
<script>
export default {
mounted() {
// Upon mounting of the component, we accessed the .bind({...})
// function to put an initial image on the canvas.
this.$refs.croppieRef.bind({
url: 'http://i.imgur.com/Fq2DMeH.jpg',
})
},
data() {
return {
cropped: null,
images: [
'http://i.imgur.com/fHNtPXX.jpg',
'http://i.imgur.com/ecMUngU.jpg',
'http://i.imgur.com/7oO6zrh.jpg',
'http://i.imgur.com/miVkBH2.jpg'
]
}
},
methods: {
bind() {
// Randomize cat photos, nothing special here.
let url = this.images[Math.floor(Math.random() * 4)]
// Just like what we did with .bind({...}) on
// the mounted() function above.
this.$refs.croppieRef.bind({
url: url,
});
},
// CALBACK USAGE
crop() {
// Here we are getting the result via callback function
// and set the result to this.cropped which is being
// used to display the result above.
let options = {
format: 'jpeg',
circle: true
}
this.$refs.croppieRef.result(options, (output) => {
this.cropped = output;
});
},
// EVENT USAGE
cropViaEvent() {
this.$refs.croppieRef.result(options);
},
result(output) {
this.cropped = output;
},
update(val) {
console.log(val);
},
rotate(rotationAngle) {
// Rotates the image
this.$refs.croppieRef.rotate(rotationAngle);
}
}
}
</script>
利用期权 所有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 " 当图像被裁剪时触发。返回裁剪的图像。 注意: $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/news33284.html
VueCroppie的更多相关文章
- # BlackLivesMatter !
下载 # BlackLivesMatter ! https://blacklivesmatter.com/ 黑人的生命是重要的运动资源 VueCroppie VueCroppie是一个Vue 2包装C ...
- Croppie -一个Javascript图像Croppie
下载 Croppie -一个Javascript图像CroppieCroppie -一个Javascript图像Croppie 安装 凉棚:凉棚安装作物 Npm: Npm安装作物 下载: croppi ...
随机推荐
- Solon详解(三)- Solon的web开发
Solon详解系列文章: Solon详解(一)- 快速入门 Solon详解(二)- Solon的核心 Solon详解(三)- Solon的web开发 Solon详解(四)- Solon的事务传播机制 ...
- mysql排序的问题与获取第几高的分数的信息
1:先截图看效果 2:完整的SQl语句 SELECT * FROM studentscore; -- ------------------ SET @maxscore=(SELECT MAX(scor ...
- Oracle中树形查询使用方法
树形查询一般用于上下级场合,使用的特殊sql语法包括level,prior,start with,connect by等,下面将就实例来说明其用法. 表定义: create table tb_hier ...
- 2020年1月31日 安装Python的requests包记录
C:\Users\ufo>pip install requests Collecting requests WARNING: Retrying (Retry(total=, connect=No ...
- Java数组实现随机生成N-M之间不重复的随机数
接收一个整形数组,使用Math.Random每次在规定的数字范围内随机产生数字,然后嵌套for循环依次判断是否有重复值,如果有既外循环变量减一,直到把数组装满为止. /** * 随机生成 N--M的不 ...
- parseQueryString
var parseQueryString = function (url) { var reg = /([^\?\=\&]+)\=([^\?\=\&]*)/g; var o ...
- linux下锁定关键文件/etc/passwd、/etc/shadow、/etc/group、/etc/gshadow、/etc/inittab
锁定/etc/passwd./etc/shadow./etc/group./etc/gshadow./etc/inittab,锁定关键的系统文件可以防止服务器提权后被篡改 1.对关键文件进行加锁,任何 ...
- JS红宝书笔记——第一章 JavaScript简介
1.JavaScript简史 Netscape公司决定开发一种客户端语言用来处理浏览器端简单的表单验证. Netscape公司派布兰登·艾奇(BrendanEich)为计划于1995年2月发布的Net ...
- Java 15 正式发布, 14 个新特性,刷新你的认知!!
JDK 15 2020/09/15 如期而至! 这个时间牛逼啊,和苹果发布会同天? OracleJDK 15 发布地址: https://www.oracle.com/java/technologie ...
- 学习 | mockjs入门
最近工作有用到mockjs模拟数据,实现前后端分离,今天系统的把mockjs的API都过了一遍,算是入门吧. 什么是mockjs mockjs就是一个模拟数据,生成随机数据,拦截ajax请求. 为什么 ...