{"_id":"@dfeidao/fd-wh000021","_rev":"1-cfc6f8a48a85c81a5eaf63a9448fcc3f","name":"@dfeidao/fd-wh000021","dist-tags":{"dev":"4.6.201910261148","latest":"4.6.201910261148"},"versions":{"4.6.201910261148":{"name":"@dfeidao/fd-wh000021","version":"4.6.201910261148","description":"图像裁剪器","scripts":{"lint":"tslint -p ./tsconfig.json","build":"../../node_modules/.bin/gulp","test":"../../node_modules/.bin/gulp dev","umd":"../../node_modules/.bin/gulp umd"},"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"author":{"name":"夏培旭"},"maintainers":[{"name":"taoqf","email":"tao_qiufeng@126.com"}],"license":"MIT","peerDependencies":{},"dependencies":{"@dfeidao/core":"4.6.201904301027","cropperjs":"1.5.6"},"_id":"@dfeidao/fd-wh000021@4.6.201910261148","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-wddWfNcuuzrbBucs6TkMURE1HR9Pp5qUzhOr+ES6mmrBcQ0asdBFigo9qH/ILFrKfKPClSLc0zZmzopXmlZ5fA==","shasum":"9de55876b2f036b251215d19cbabfb88577500d4","tarball":"https://registry.npmjs.org/@dfeidao/fd-wh000021/-/fd-wh000021-4.6.201910261148.tgz","fileCount":6,"unpackedSize":20543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds8IfCRA9TVsSAnZWagAAO1UP/1j+FvyoQDP2y54bAJMU\nWK/vGUwmsaOe20N4+zS5Gk8NaCdmMCwmgmATowMffBprVPsYr99pj+/bLupq\n7V+fDswQHztDVNxVusrZs/Z40K1AmAceLDCtDoSZ7Mby5xo+8jjfnWB2MwJy\n44RAfE5qCIdMRhJ+QRViRHQo9wKWBp+XpvEjYWDnfXNwpTj5YSACSBXeva/Z\nwH4bNJPanKVHoeba2EwGF/ZeHgVCk35zfuBEYx+2MyS/FWn13jn0P5/59SK+\n101fTZC/R318Xi67ErreaBG3T30b+Nr4nqBOomxpmfx2cz3FQqJVNILEK7+B\n6hqlr2j/SbzvARei+Vt8nk+20lTpqMqa08tM5tNNtm0kE11JJukVsiVXApVp\nyt4cgPeGPkFXTBJxsZrqGg9ewU7W2gzJdystrzfA+rhDjp/HLC9K79hLz4b6\n+NYl1sMNrGc8TWpcH/eJeQw31oQEFijo1vRQdWX3q2BKT3oAmhmX25EjdWx2\n0/gWDKBE7BC0fstY3TBOhm65dFJD8dpnHfZILtoBS0xSIhXFsf0So6TqsFV9\nd3MYvZ4zRtJRXEdadWUE2IdoJjB6JFPrclryy+JOF3O1QFp2TffVbMPjHUdl\nqEkHnwVG2BWoepFxX9OR1Ki0shGbZBI3zmE2V06Mh5wWkSxYdg62EqOuoGh2\nmbWC\r\n=/Y0I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAfeClGJh300gT9T1S3PyvyEdNkKyQZLBqQmSYWARarwIgZjC44qxnDQ7VPm6Id437WrV4zkRYSJb7I4Ebdpi+/i0="}]},"_npmUser":{"name":"taoqf","email":"tao_qiufeng@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fd-wh000021_4.6.201910261148_1572061726878_0.7969266871277103"},"_hasShrinkwrap":false}},"time":{"created":"2019-10-26T03:48:46.685Z","4.6.201910261148":"2019-10-26T03:48:47.016Z","modified":"2022-04-05T04:16:48.689Z"},"maintainers":[{"name":"taoqf","email":"tao_qiufeng@126.com"}],"description":"图像裁剪器","keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"author":{"name":"夏培旭"},"license":"MIT","readme":"# 控件\n\n<https://dfeidao.gitee.io/widgets/>\n\n## 安装\n\n```sh\nyarn add --dev @dfeidao/fd-wh000021\n```\n\n## 属性说明\n\n名字 | 说明\n- | -\naspect-ratio | 锁定裁剪框的长宽比,计算方法为`宽/高`,如宽为`16`,高为`9`,该参数值应为`16`**除以**`9`的值,即`1.78`,该参数不传默认为图片的比例,且可以使用鼠标进行调整.如果设定该属性,则用户在使用时宽高比例即锁定为设定的比例\nsrc | 图片地址\nwidth | 容器宽度,也可以通过style设置\nheight | 容器高度,也可以通过style设置\n\n## 方法说明\n\n## **zoom()**\n\n对背景图片的缩放\n\n## **enable()**\n\n启用裁剪框\n\n## **disable()**\n\n禁用裁剪框\n\n## **clear()**\n\n清除裁剪框\n\n## **crop()**\n\n展示裁剪框\n\n## **reset()**\n\n将图像和裁切框重置为其初始状态\n\n## **destroy()**\n\n摧毁裁剪器\n\n## **move()**\n\n设置背景图片移动\n\n### **参数**\n\n参数名 | 参数类型 | 参数说明\n| - | - | -\noffset_x | number | 横向的位置\n\n## **rotate()**\n\n让背景图片旋转\n\n### **参数**\n\n参数名 | 参数类型 | 参数说明\n| - | - | -\ndegree | number | 旋转角度,顺时针:要求为正数(degree > 0),逆时针:要求为负数(degree < 0)\n\n## **scale_x()**\n\n设置横向缩放比例\n\n### **参数**\n\n参数名 | 参数类型 | 参数说明\n| - | - | -\nscale_x | number | 横向比例(要求为整数)\n\n## **scale_x()**\n\n设置横向缩放比例\n\n### **参数**\n\n参数名 | 参数类型 | 参数说明\n| - | - | -\nscale_y | number | 纵向比例(要求为整数)\n\n## **get_data()**\n\n获取裁剪框(基于背景图片的)区域位置和尺寸数据\n\n### **参数**\n\n参数名 | 参数类型 | 参数说明\n| - | - | -\nrounded | boolean | 返回数据是否四舍五入,默认为false\n\n### **返回值**\n\n* x:裁剪区域的横向偏移\n* y:裁剪区域的纵向偏移\n* width:裁剪区域的宽度\n* height:裁剪区域的高度\n* rotate:背景图片的旋转角度\n* scaleX:背景图片的横向比例\n* scaleY:背景图片的纵向比例\n\n## **set_data()**\n\n设置裁剪框(基于背景图片的)区域位置和尺寸数据\n\n### **参数**\n\n详细可以看get_data方法的返回值\n\n## **get_image_data()**\n\n获取裁剪框(基于背景图片的)区域位置和尺寸数据\n\n### **返回值**\n\n* left:容器的横向偏移\n* top:容器的纵向偏移\n* width:背景的宽度\n* height:背景的高度\n* naturalWidth:背景图像的自然宽度\n* naturalHeight:背景图像的自然高度\n* aspectRatio:背景图像的比例\n* rotate:背景图像的旋转角度\n* scaleX:横坐标的缩放比例\n* scaleY:纵坐标的缩放比例\n\n## **get_canvas_data()**\n\n获取图像(基于容器的)区域位置和尺寸数据\n\n### **返回值**\n\n* left:背景图像基于容器的横向偏移\n* top:背景图像基于容器的纵向偏移\n* width:画布的宽度\n* height:画布的高度\n* naturalWidth:画布的自然宽度(只读)\n* naturalHeight:画布的自然高度(只读)\n\n## **set_canvas_data()**\n\n设置图像(基于容器的)区域位置和尺寸数据\n\n### **参数**\n\n详细可以看get_canvas_data方法的返回值\n\n## **get_crop_box_data()**\n\n获取裁剪框的位置和尺寸数据\n\n### **返回值**\n\n* left:裁剪框的横向偏移\n* top:裁剪框的纵向偏移\n* width:裁剪框的宽度\n* height:裁剪框的高度\n\n## **set_crop_box_data()**\n\n设置裁剪框的位置和尺寸数据\n\n### **参数**\n\n详细可以看get_canvas_data方法的返回值\n\n## **get_cropped_canvas()**\n\n获取裁剪的图像\n\n### **参数**\n\n* width:返回的canvas节点的宽度\n* height:返回的canvas节点的高度度\n* minWidth:返回的canvas节点最小目标宽度,默认值为0\n* minHeight:返回的canvas节点最小目标高度,默认值为0\n* maxWidth:返回的canvas节点最大目标宽度,默认值为Infinity\n* maxHeight:返回的canvas节点最大目标高度,默认值为Infinity\n* fillColor:一种颜色,用于填充输出画布中的所有alpha值,默认值为transparent\n* imageSmoothingEnabled:设置为更改图像是否平滑(默认为true)\n* imageSmoothingQuality:设置图像平滑的质量,'low' | 'medium' | 'high',默认为low\n\n### **返回值**\n\n返回一个canvas节点\n\n## 事件\n\n### 裁剪框移动事件\n\nfdwe-crop-move\n\n### 图片缩放事件\n\nfdwe-zoom\n\n### 容器改变事件\n\nfdwe-crop-change\n\n## 示例\n\n```tpl\n<fd-wh000021 style=\"width:800px;height: 500px;\" src='https://gw.alicdn.com/tfs/TB1ayl9mpYqK1RjSZLeXXbXppXa-170-62.png'>\n</fd-wh000021>\n```\n\n自定义按钮\n\n```tpl\n<fd-wh000021 style=\"width:800px;height: 500px;\" src='https://gw.alicdn.com/tfs/TB1ayl9mpYqK1RjSZLeXXbXppXa-170-62.png'>\n\t<input slot='zoom_add' type='button' value='放大' />\n\t<input slot='zoom_sub' type='button' value='缩小' />\n\n\t<input slot='top' type='button' value='向上移动' />\n\t<input slot='down' type='button' value='向下移动' />\n\t<input slot='left' type='button' value='向左移动' />\n\t<input slot='right' type='button' value='向右移动' />\n\n\t<input slot='rotate_cw' type='button' value='旋转' />\n\n\t<input slot='mirrorX' type='button' value='横向镜像' />\n\t<input slot='mirrorY' type='button' value='纵向镜像' />\n\n\t<input slot='crop_box' type='button' value='创建裁剪框' />\n\t<input slot='clear' type='button' value='清除裁剪框' />\n\n\t<input slot='enable' type='button' value='启用' />\n\t<input slot='disable' type='button' value='禁用' />\n\n\t<input slot='reset' type='button' value='重置' />\n</fd-wh000021>\n```\n","readmeFilename":"readme.md"}