From df8cf06c940bce28bc64550d355f0f645bde8a79 Mon Sep 17 00:00:00 2001 From: Catouse Date: Mon, 29 Aug 2016 16:47:15 +0800 Subject: [PATCH] * add resetImage and getData methods to imgCutter and update document. --- docs/index.json | 11 ++- docs/part/javascript-imgcutter.md | 107 ++++++++++++++++++++++++++++-- src/js/img-cutter.js | 59 ++++++++++------ 3 files changed, 147 insertions(+), 30 deletions(-) diff --git a/docs/index.json b/docs/index.json index 559e638c..ebc30cf4 100644 --- a/docs/index.json +++ b/docs/index.json @@ -1054,7 +1054,16 @@ "icon": "icon-crop", "desc": "裁剪图片", "name": "图片剪切", - "topics": [], + "update": "1.5.0", + "topics": [{ + "name": "综合示例" + }, { + "name": "选项" + }, { + "name": "方法" + }, { + "name": "事件" + }], "filter": "tupianjianqie tpjq cj caijian" }, { "id": "scrollspy", diff --git a/docs/part/javascript-imgcutter.md b/docs/part/javascript-imgcutter.md index b49dd0b6..55cb29d7 100644 --- a/docs/part/javascript-imgcutter.md +++ b/docs/part/javascript-imgcutter.md @@ -13,12 +13,17 @@ filter: tupianjianqie tpjq cj caijian 通过本插件允许用户通过拖拽区域边框来选定裁剪区域。 -
+

提示

为兼容更多的浏览器，此插件实际并不会对图片进行剪裁操作。当确定裁剪区域后，你需要将剪裁区域数据上传到服务器，让服务器进行图片裁剪操作。

你仍然可以通过监听before事件来自行处理确定裁剪区域后的操作，包括在本地对图片进行剪裁。

+
+

已知兼容性问题

+

此插件在 IE8-9 上有兼容性问题。

+
+ ## 综合示例
@@ -45,12 +50,10 @@ filter: tupianjianqie tpjq cj caijian ``` // 通过Javascript初始化 -$("#imgCutter").imgCutter(options); +$('#imgCutter').imgCutter(options); ``` -## 用法 - -### 启动参数 +## 选项 @@ -116,13 +119,103 @@ $("#imgCutter").imgCutter(options);
``` -// 使用启动参数 +// 使用选项 $("#imgCutter").imgCutter({ fixedRatio: true }); ``` -### 事件 +## 方法 + +### resetImage(img) + +该方法可以重新设置要剪切的图片。其中参数 `img` 为新的图片地址。 + +### getData() + +获取当前图片剪切数据。该数据为一个对象，其属性定义如下： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性示例值说明
`originWidth``800`原始图片宽度
`originHeight``533`原始图片高度
`scaled``false`裁剪之前是否对原始图片进行了缩放
`scaleHeight``533`原始图片缩放后的高度
`scaleWidth``800`原始图片缩放后的宽度
`width``128`裁剪后的宽度
`height``128`裁剪后的高度
`left``327`裁剪位置距离左侧的距离
`right``455`裁剪位置距离右侧的距离
`top``237`裁剪位置距离上边的距离
`bottom``365`裁剪位置距离下边的距离
+ +### 调用方法 + +调用方法需要先获取插件实例。 + +```javascript +// 获取 imgCutter 实例 +var myImgCutter = $('#imgCutter').data('zui.imgCutter'); + +// 调用 resetImg 方法 +myImgCutter.resetImage('http://zui.sexy/docs/img/img1.jpg'); + +// 调用 getData 方法 +var myImgCutterData = myImgCutter.getData(); +``` + +## 事件 diff --git a/src/js/img-cutter.js b/src/js/img-cutter.js index 5ce3c2fb..27fbde92 100644 --- a/src/js/img-cutter.js +++ b/src/js/img-cutter.js @@ -6,16 +6,15 @@ * ======================================================================== */ -(function($, Math) { +(function($, Math, undefined) { 'use strict'; if(!$.fn.draggable) console.error('img-cutter requires draggable.js'); if(!$.zui.imgReady) console.error('img-cutter requires image.ready.js'); - var name = 'zui.imgcutter'; + var NAME = 'zui.imgCutter'; var ImgCutter = function(element, options) { - this.name = name; this.$ = $(element); this.initOptions(options); this.init(); @@ -70,9 +69,19 @@ } }; + ImgCutter.prototype.resetImage = function(img) { + var that = this; + that.options.img = img; + that.$img.attr('src', img); + that.$chipImg.attr('src', img); + that.imgWidth = undefined; + that.left = undefined; + that.initSize(); + }; + ImgCutter.prototype.initSize = function() { var that = this; - if(typeof that.imgWidth === 'undefined') { + if(!that.imgWidth) { $.zui.imgReady(that.options.img, function() { that.imgWidth = this.width; that.imgHeight = this.height; @@ -82,7 +91,7 @@ var waitImgWidth = setInterval(function() { - if(typeof that.imgWidth != 'undefined') { + if(that.imgWidth) { clearInterval(waitImgWidth); that.width = Math.min(that.imgWidth, that.$.width()); @@ -90,7 +99,7 @@ that.$cliper.css('width', this.width); that.height = that.$canvas.height(); - if(typeof that.left === 'undefined') { + if(that.left === undefined) { that.left = Math.floor((that.width - that.$controller.width()) / 2); that.top = Math.floor((that.height - that.$controller.height()) / 2); } @@ -140,6 +149,24 @@ }); }; + ImgCutter.prototype.getData = function() { + var that = this; + that.data = { + originWidth: that.imgWidth, + originHeight: that.imgHeight, + scaleWidth: that.width, + scaleHeight: that.height, + width: that.right - that.left, + height: that.bottom - that.top, + left: that.left, + top: that.top, + right: that.right, + bottom: that.bottom, + scaled: that.imgWidth != that.width || that.imgHeight != that.height + }; + return that.data; + }; + ImgCutter.prototype.bindEvents = function() { var that = this, options = this.options; @@ -147,19 +174,7 @@ this.$btn.hover(function() { that.$.toggleClass('hover'); }).click(function() { - var data = { - originWidth: that.imgWidth, - originHeight: that.imgHeight, - scaleWidth: that.width, - scaleHeight: that.height, - width: that.right - that.left, - height: that.bottom - that.top, - left: that.left, - top: that.top, - right: that.right, - bottom: that.bottom, - scaled: that.imgWidth != that.width || that.imgHeight != that.height - }; + var data = that.getData(); if(!that.callEvent('before', data)) return; @@ -240,10 +255,10 @@ $.fn.imgCutter = function(option) { return this.each(function() { var $this = $(this); - var data = $this.data('zui.imgCutter'); + var data = $this.data(NAME); var options = typeof option == 'object' && option; - if(!data) $this.data('zui.imgCutter', (data = new ImgCutter(this, options))); + if(!data) $this.data(NAME, (data = new ImgCutter(this, options))); if(typeof option == 'string') data[option](); }); @@ -254,5 +269,5 @@ $(function() { $('[data-toggle="imgCutter"]').imgCutter(); }); -}(jQuery, Math)); +}(jQuery, Math, undefined)); -- GitLab