From 5e5c42a83d74c222cafd9ff5b32102768dc2445e Mon Sep 17 00:00:00 2001 From: ding Date: Fri, 4 May 2018 02:59:08 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E2=80=9C=E9=9D=9E?= =?UTF-8?q?=E5=AE=9E=E6=97=B6=E7=BB=98=E5=88=B6=E6=B8=B2=E6=9F=93=E2=80=9D?= =?UTF-8?q?=20=E6=9D=A5=E8=A7=A3=E5=86=B3=E7=9C=9F=E6=9C=BA=E4=B8=8A?= =?UTF-8?q?=E5=8D=A1=E9=A1=BF=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/we-cropper.js | 62 ++++++++++++++++++++++++++++-- dist/we-cropper.min.js | 2 +- dist/we-cropper.wxml | 13 ++++--- example/we-cropper/we-cropper.js | 62 ++++++++++++++++++++++++++++-- example/we-cropper/we-cropper.wxml | 13 ++++--- src/default.js | 12 ++++++ src/methods.js | 31 ++++++++++++++- src/update.js | 15 +++++++- 8 files changed, 186 insertions(+), 24 deletions(-) diff --git a/dist/we-cropper.js b/dist/we-cropper.js index 8a399cb..cc6cf3b 100644 --- a/dist/we-cropper.js +++ b/dist/we-cropper.js @@ -131,6 +131,18 @@ var DEFAULT = { tmp.cut = value; } }, + inRealTime: { + default: true, + get: function get() { + return tmp.inRealTime + }, + set: function set(value) { + if (typeof (value) !== 'boolean') { + console.error(("inRealTime:" + value + " is invalid")); + } + tmp.inRealTime = value; + } + }, onReady: { default: null, get: function get () { @@ -622,6 +634,31 @@ function methods () { return self }; + self.updateImage = function (isInit) { + if ( isInit === void 0 ) isInit=false; + + if (self.croperTarget && isInit) { + + self.pageContext.setData({ + 'cropperOpt.cropperImageSrc': self.croperTarget + }); + } + + if (!self.imgLeft || !self.imgTop) { + return; + } + + self.pageContext.setData({ + 'cropperOpt.imageLeft': self.imgLeft, + 'cropperOpt.imageTop': self.imgTop, + 'cropperOpt.imageWidth': self.scaleWidth, + 'cropperOpt.imageHeight': self.scaleHeight + + }); + + return self + }; + self.pushOrign = function (src) { self.src = src; @@ -633,7 +670,7 @@ function methods () { var innerAspectRadio = res.width / res.height; self.croperTarget = res.path; - + if (innerAspectRadio < width / height) { self.rectX = x; self.baseWidth = width; @@ -651,7 +688,11 @@ function methods () { self.scaleWidth = self.baseWidth; self.scaleHeight = self.baseHeight; - self.updateCanvas(); + if (!self.inRealTime) { + self.updateImage(true); + } else { + self.updateCanvas(); + } isFunction(self.onImageLoad) && self.onImageLoad(self.ctx, self); } @@ -677,6 +718,8 @@ function methods () { var args = [], len = arguments.length; while ( len-- ) args[ len ] = arguments[ len ]; + self.updateCanvas(); + var ARG_TYPE = toString.call(args[0]); var fn = args[args.length - 1]; @@ -760,6 +803,9 @@ function update () { var xMove, yMove; // 计算单指移动的距离 if (self.touchended) { + if (!self.inRealTime) { + self.updateImage(); + } return self.updateCanvas() } xMove = Math.round(touch.x - self.touchX0); @@ -770,7 +816,11 @@ function update () { self.outsideBound(imgLeft, imgTop); - self.updateCanvas(); + if (!self.inRealTime) { + self.updateImage(); + } else { + self.updateCanvas(); + } }; self.__twoTouchStart = function (touch0, touch1) { @@ -806,7 +856,11 @@ function update () { self.outsideBound(imgLeft, imgTop); - self.updateCanvas(); + if (!self.inRealTime) { + self.updateImage(); + } else { + self.updateCanvas(); + } }; self.__xtouchEnd = function () { diff --git a/dist/we-cropper.min.js b/dist/we-cropper.min.js index d0d3b89..c28f953 100644 --- a/dist/we-cropper.min.js +++ b/dist/we-cropper.min.js @@ -3,4 +3,4 @@ * (c) 2018 dlhandsome * @license MIT */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.WeCropper=e()}(this,function(){"use strict";var t=void 0,e=["touchstarted","touchmoved","touchended"];function o(t){return"function"==typeof t}function n(t){for(var o=[],n=arguments.length-1;n-- >0;)o[n]=arguments[n+1];e.forEach(function(e,n){void 0!==o[n]&&(t[e]=o[n])})}var r={},a={id:{default:"cropper",get:function(){return r.id},set:function(t){"string"!=typeof t&&console.error("id\uff1a"+t+" is invalid"),r.id=t}},width:{default:750,get:function(){return r.width},set:function(t){"number"!=typeof t&&console.error("width\uff1a"+t+" is invalid"),r.width=t}},height:{default:750,get:function(){return r.height},set:function(t){"number"!=typeof t&&console.error("height\uff1a"+t+" is invalid"),r.height=t}},scale:{default:2.5,get:function(){return r.scale},set:function(t){"number"!=typeof t&&console.error("scale\uff1a"+t+" is invalid"),r.scale=t}},zoom:{default:5,get:function(){return r.zoom},set:function(t){"number"!=typeof t?console.error("zoom\uff1a"+t+" is invalid"):(t<0||t>10)&&console.error("zoom should be ranged in 0 ~ 10"),r.zoom=t}},src:{default:"cropper",get:function(){return r.src},set:function(t){"string"!=typeof t&&console.error("id\uff1a"+t+" is invalid"),r.src=t}},cut:{default:{},get:function(){return r.cut},set:function(t){"object"!=typeof t&&console.error("id\uff1a"+t+" is invalid"),r.cut=t}},onReady:{default:null,get:function(){return r.ready},set:function(t){r.ready=t}},onBeforeImageLoad:{default:null,get:function(){return r.beforeImageLoad},set:function(t){r.beforeImageLoad=t}},onImageLoad:{default:null,get:function(){return r.imageLoad},set:function(t){r.imageLoad=t}},onBeforeDraw:{default:null,get:function(){return r.beforeDraw},set:function(t){r.beforeDraw=t}}};var i="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var c,u=(function(t,e){!function(o){var n=e,r=t&&t.exports==n&&t,a="object"==typeof i&&i;a.global!==a&&a.window!==a||(o=a);var c=function(t){this.message=t};(c.prototype=new Error).name="InvalidCharacterError";var u=function(t){throw new c(t)},d="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",s=/[\t\n\f\r ]/g,h={encode:function(t){t=String(t),/[^\0-\xFF]/.test(t)&&u("The string to be encoded contains characters outside of the Latin1 range.");for(var e,o,n,r,a=t.length%3,i="",c=-1,s=t.length-a;++c>18&63)+d.charAt(r>>12&63)+d.charAt(r>>6&63)+d.charAt(63&r);return 2==a?(e=t.charCodeAt(c)<<8,o=t.charCodeAt(++c),i+=d.charAt((r=e+o)>>10)+d.charAt(r>>4&63)+d.charAt(r<<2&63)+"="):1==a&&(r=t.charCodeAt(c),i+=d.charAt(r>>2)+d.charAt(r<<4&63)+"=="),i},decode:function(t){var e=(t=String(t).replace(s,"")).length;e%4==0&&(e=(t=t.replace(/==?$/,"")).length),(e%4==1||/[^+a-zA-Z0-9/]/.test(t))&&u("Invalid character: the string to be decoded is not correctly encoded.");for(var o,n,r=0,a="",i=-1;++i>(-2*r&6)));return a},version:"0.1.0"};if(n&&!n.nodeType)if(r)r.exports=h;else for(var f in h)h.hasOwnProperty(f)&&(n[f]=h[f]);else o.base64=h}(i)}(c={exports:{}},c.exports),c.exports);function d(t){var e="";if("string"==typeof t)e=t;else for(var o=0;o>8&255,r>>16&255,r>>24&255,0,0,0,0,54,0,0,0],i=[40,0,0,0,255&e,e>>8&255,e>>16&255,e>>24&255,255&o,o>>8&255,o>>16&255,o>>24&255,1,0,24,0,0,0,0,0,255&n,n>>8&255,n>>16&255,n>>24&255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],c=(4-3*e%4)%4,u=t.data,s="",h=e<<2,f=o,l=String.fromCharCode;do{for(var g=h*(f-1),v="",p=0;p=2&&this.__twoTouchStart(o,r)},touchMove:function(t){var e=t.touches,o=e[0],r=e[1];n(this,null,!0),1===t.touches.length&&this.__oneTouchMove(o),t.touches.length>=2&&this.__twoTouchMove(o,r)},touchEnd:function(t){n(this,!1,!1,!0),this.__xtouchEnd()}};var g=function(t){var e,o,n=this,r={};return e=n,o=a,Object.defineProperties(e,o),Object.keys(a).forEach(function(t){r[t]=a[t].default}),Object.assign(n,r,t),n.prepare(),n.attachPage(),n.createCtx(),n.observer(),n.cutt(),n.methods(),n.init(),n.update(),n};return g.prototype.init=function(){var t=this,e=t.src;return t.version="1.2.0","function"==typeof t.onReady&&t.onReady(t.ctx,t),e&&t.pushOrign(e),n(t,!1,!1,!1),t.oldScale=1,t.newScale=1,t},Object.assign(g.prototype,l),g.prototype.prepare=function(){var e=this,o=(t||(t=wx.getSystemInfoSync()),t).windowWidth;e.attachPage=function(){var t=getCurrentPages();t[t.length-1].wecropper=e},e.createCtx=function(){var t=e.id;t?e.ctx=wx.createCanvasContext(t):console.error("constructor: create canvas context failed, 'id' must be valuable")},e.deviceRadio=o/750},g.prototype.observer=function(){var t=this,e=["ready","beforeImageLoad","beforeDraw","imageLoad"];t.on=function(o,n){var r;return e.indexOf(o)>-1?"function"==typeof n&&("ready"===o?n(t):t["on"+(r=o,r.charAt(0).toUpperCase()+r.slice(1))]=n):console.error("event: "+o+" is invalid"),t}},g.prototype.methods=function(){var t=this,e=t.id,n=t.deviceRadio,r=t.width,a=t.height,i=t.cut,c=i.x;void 0===c&&(c=0);var u=i.y;void 0===u&&(u=0);var d=i.width;void 0===d&&(d=r);var s=i.height;void 0===s&&(s=a),t.updateCanvas=function(){return t.croperTarget&&t.ctx.drawImage(t.croperTarget,t.imgLeft,t.imgTop,t.scaleWidth,t.scaleHeight),o(t.onBeforeDraw)&&t.onBeforeDraw(t.ctx,t),t.setBoundStyle(),t.ctx.draw(),t},t.pushOrign=function(e){return t.src=e,o(t.onBeforeImageLoad)&&t.onBeforeImageLoad(t.ctx,t),wx.getImageInfo({src:e,success:function(e){var n=e.width/e.height;t.croperTarget=e.path,n10)&&console.error("quality should be ranged in 0 ~ 10"),wx.canvasToTempFilePath({canvasId:e,x:c,y:u,width:d,height:s,destWidth:d*f/(10*n),destHeight:s*f/(10*n),success:function(e){o(h)&&h.call(t,e.tempFilePath)},fail:function(e){o(h)&&h.call(t,null)}});break;case"[object Function]":wx.canvasToTempFilePath({canvasId:e,x:c,y:u,width:d,height:s,destWidth:d/n,destHeight:s/n,success:function(e){o(h)&&h.call(t,e.tempFilePath)},fail:function(e){o(h)&&h.call(t,null)}})}return t}},g.prototype.cutt=function(){var t=this,e=t.width,o=t.height,n=t.cut,r=n.x;void 0===r&&(r=0);var a=n.y;void 0===a&&(a=0);var i=n.width;void 0===i&&(i=e);var c=n.height;void 0===c&&(c=o),t.outsideBound=function(e,o){t.imgLeft=e>=r?r:t.scaleWidth+e-r<=i?r+i-t.scaleWidth:e,t.imgTop=o>=a?a:t.scaleHeight+o-a<=c?a+c-t.scaleHeight:o},t.setBoundStyle=function(n){void 0===n&&(n={});var u=n.color;void 0===u&&(u="#04b00f");var d=n.mask;void 0===d&&(d="rgba(0, 0, 0, 0.3)");var s=n.lineWidth;void 0===s&&(s=1);var h=[{start:{x:r-s,y:a+10-s},step1:{x:r-s,y:a-s},step2:{x:r+10-s,y:a-s}},{start:{x:r-s,y:a+c-10+s},step1:{x:r-s,y:a+c+s},step2:{x:r+10-s,y:a+c+s}},{start:{x:r+i-10+s,y:a-s},step1:{x:r+i+s,y:a-s},step2:{x:r+i+s,y:a+10-s}},{start:{x:r+i+s,y:a+c-10+s},step1:{x:r+i+s,y:a+c+s},step2:{x:r+i-10+s,y:a+c+s}}];t.ctx.beginPath(),t.ctx.setFillStyle(d),t.ctx.fillRect(0,0,r,o),t.ctx.fillRect(r,0,i,a),t.ctx.fillRect(r,a+c,i,o-a-c),t.ctx.fillRect(r+i,0,e-r-i,o),t.ctx.fill(),h.forEach(function(e){t.ctx.beginPath(),t.ctx.setStrokeStyle(u),t.ctx.setLineWidth(s),t.ctx.moveTo(e.start.x,e.start.y),t.ctx.lineTo(e.step1.x,e.step1.y),t.ctx.lineTo(e.step2.x,e.step2.y),t.ctx.stroke()})}},g.prototype.update=function(){var t=this;t.src&&(t.__oneTouchStart=function(e){t.touchX0=Math.round(e.x),t.touchY0=Math.round(e.y)},t.__oneTouchMove=function(e){var o,n;if(t.touchended)return t.updateCanvas();o=Math.round(e.x-t.touchX0),n=Math.round(e.y-t.touchY0);var r=Math.round(t.rectX+o),a=Math.round(t.rectY+n);t.outsideBound(r,a),t.updateCanvas()},t.__twoTouchStart=function(e,o){var n,r,a;t.touchX1=Math.round(t.rectX+t.scaleWidth/2),t.touchY1=Math.round(t.rectY+t.scaleHeight/2),n=Math.round(o.x-e.x),r=Math.round(o.y-e.y),a=Math.round(Math.sqrt(n*n+r*r)),t.oldDistance=a},t.__twoTouchMove=function(e,o){var n=t.oldScale,r=t.oldDistance,a=t.scale,i=t.zoom;t.newScale=f(n,r,i,e,o),t.newScale<=1&&(t.newScale=1),t.newScale>=a&&(t.newScale=a),t.scaleWidth=Math.round(t.newScale*t.baseWidth),t.scaleHeight=Math.round(t.newScale*t.baseHeight);var c=Math.round(t.touchX1-t.scaleWidth/2),u=Math.round(t.touchY1-t.scaleHeight/2);t.outsideBound(c,u),t.updateCanvas()},t.__xtouchEnd=function(){t.oldScale=t.newScale,t.rectX=t.imgLeft,t.rectY=t.imgTop})},g}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.WeCropper=t()}(this,function(){"use strict";var o=void 0,t=["touchstarted","touchmoved","touchended"];function f(e){return"function"==typeof e}function r(o){for(var n=[],e=arguments.length-1;0>18&63)+s.charAt(r>>12&63)+s.charAt(r>>6&63)+s.charAt(63&r);return 2==a?(t=e.charCodeAt(c)<<8,o=e.charCodeAt(++c),i+=s.charAt((r=t+o)>>10)+s.charAt(r>>4&63)+s.charAt(r<<2&63)+"="):1==a&&(r=e.charCodeAt(c),i+=s.charAt(r>>2)+s.charAt(r<<4&63)+"=="),i},decode:function(e){var t=(e=String(e).replace(c,"")).length;t%4==0&&(t=(e=e.replace(/==?$/,"")).length),(t%4==1||/[^+a-zA-Z0-9/]/.test(e))&&d("Invalid character: the string to be decoded is not correctly encoded.");for(var o,n,r=0,a="",i=-1;++i>(-2*r&6)));return a},version:"0.1.0"};if(t&&!t.nodeType)if(o)o.exports=a;else for(var i in a)a.hasOwnProperty(i)&&(t[i]=a[i]);else e.base64=a}(l)}(e={exports:{}},e.exports),e.exports);function y(e){var t="";if("string"==typeof e)t=e;else for(var o=0;o>8&255,r>>16&255,r>>24&255,0,0,0,0,54,0,0,0],i=[40,0,0,0,255&t,t>>8&255,t>>16&255,t>>24&255,255&o,o>>8&255,o>>16&255,o>>24&255,1,0,24,0,0,0,0,0,255&n,n>>8&255,n>>16&255,n>>24&255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],c=(4-3*t%4)%4,u=e.data,d="",s=t<<2,h=o,l=String.fromCharCode;do{for(var f=s*(h-1),g="",p=0;p=r&&(u.newScale=r),u.scaleWidth=Math.round(u.newScale*u.baseWidth),u.scaleHeight=Math.round(u.newScale*u.baseHeight);var i=Math.round(u.touchX1-u.scaleWidth/2),c=Math.round(u.touchY1-u.scaleHeight/2);u.outsideBound(i,c),u.inRealTime?u.updateCanvas():u.updateImage()},u.__xtouchEnd=function(){u.oldScale=u.newScale,u.rectX=u.imgLeft,u.rectY=u.imgTop})},s}); \ No newline at end of file diff --git a/dist/we-cropper.wxml b/dist/we-cropper.wxml index 1d1b160..5484469 100644 --- a/dist/we-cropper.wxml +++ b/dist/we-cropper.wxml @@ -1,11 +1,12 @@ - \ No newline at end of file + + diff --git a/example/we-cropper/we-cropper.js b/example/we-cropper/we-cropper.js index 8a399cb..cc6cf3b 100644 --- a/example/we-cropper/we-cropper.js +++ b/example/we-cropper/we-cropper.js @@ -131,6 +131,18 @@ var DEFAULT = { tmp.cut = value; } }, + inRealTime: { + default: true, + get: function get() { + return tmp.inRealTime + }, + set: function set(value) { + if (typeof (value) !== 'boolean') { + console.error(("inRealTime:" + value + " is invalid")); + } + tmp.inRealTime = value; + } + }, onReady: { default: null, get: function get () { @@ -622,6 +634,31 @@ function methods () { return self }; + self.updateImage = function (isInit) { + if ( isInit === void 0 ) isInit=false; + + if (self.croperTarget && isInit) { + + self.pageContext.setData({ + 'cropperOpt.cropperImageSrc': self.croperTarget + }); + } + + if (!self.imgLeft || !self.imgTop) { + return; + } + + self.pageContext.setData({ + 'cropperOpt.imageLeft': self.imgLeft, + 'cropperOpt.imageTop': self.imgTop, + 'cropperOpt.imageWidth': self.scaleWidth, + 'cropperOpt.imageHeight': self.scaleHeight + + }); + + return self + }; + self.pushOrign = function (src) { self.src = src; @@ -633,7 +670,7 @@ function methods () { var innerAspectRadio = res.width / res.height; self.croperTarget = res.path; - + if (innerAspectRadio < width / height) { self.rectX = x; self.baseWidth = width; @@ -651,7 +688,11 @@ function methods () { self.scaleWidth = self.baseWidth; self.scaleHeight = self.baseHeight; - self.updateCanvas(); + if (!self.inRealTime) { + self.updateImage(true); + } else { + self.updateCanvas(); + } isFunction(self.onImageLoad) && self.onImageLoad(self.ctx, self); } @@ -677,6 +718,8 @@ function methods () { var args = [], len = arguments.length; while ( len-- ) args[ len ] = arguments[ len ]; + self.updateCanvas(); + var ARG_TYPE = toString.call(args[0]); var fn = args[args.length - 1]; @@ -760,6 +803,9 @@ function update () { var xMove, yMove; // 计算单指移动的距离 if (self.touchended) { + if (!self.inRealTime) { + self.updateImage(); + } return self.updateCanvas() } xMove = Math.round(touch.x - self.touchX0); @@ -770,7 +816,11 @@ function update () { self.outsideBound(imgLeft, imgTop); - self.updateCanvas(); + if (!self.inRealTime) { + self.updateImage(); + } else { + self.updateCanvas(); + } }; self.__twoTouchStart = function (touch0, touch1) { @@ -806,7 +856,11 @@ function update () { self.outsideBound(imgLeft, imgTop); - self.updateCanvas(); + if (!self.inRealTime) { + self.updateImage(); + } else { + self.updateCanvas(); + } }; self.__xtouchEnd = function () { diff --git a/example/we-cropper/we-cropper.wxml b/example/we-cropper/we-cropper.wxml index 1d1b160..5484469 100644 --- a/example/we-cropper/we-cropper.wxml +++ b/example/we-cropper/we-cropper.wxml @@ -1,11 +1,12 @@ - \ No newline at end of file + + diff --git a/src/default.js b/src/default.js index aaf620e..df58446 100644 --- a/src/default.js +++ b/src/default.js @@ -87,6 +87,18 @@ export default { tmp.cut = value } }, + inRealTime: { + default: true, + get: function get() { + return tmp.inRealTime + }, + set: function set(value) { + if (typeof (value) !== 'boolean') { + console.error(("inRealTime:" + value + " is invalid")); + } + tmp.inRealTime = value; + } + }, onReady: { default: null, get () { diff --git a/src/methods.js b/src/methods.js index 1c78434..b80a44f 100644 --- a/src/methods.js +++ b/src/methods.js @@ -21,6 +21,29 @@ export default function methods () { return self } + self.updateImage = function (isInit=false) { + if (self.croperTarget && isInit) { + + self.pageContext.setData({ + 'cropperOpt.cropperImageSrc': self.croperTarget + }) + } + + if (!self.imgLeft || !self.imgTop) { + return; + } + + self.pageContext.setData({ + 'cropperOpt.imageLeft': self.imgLeft, + 'cropperOpt.imageTop': self.imgTop, + 'cropperOpt.imageWidth': self.scaleWidth, + 'cropperOpt.imageHeight': self.scaleHeight + + }) + + return self + }; + self.pushOrign = (src) => { self.src = src @@ -50,7 +73,11 @@ export default function methods () { self.scaleWidth = self.baseWidth self.scaleHeight = self.baseHeight - self.updateCanvas() + if (!self.inRealTime) { + self.updateImage(true) + } else { + self.updateCanvas(); + } isFunction(self.onImageLoad) && self.onImageLoad(self.ctx, self) } @@ -71,6 +98,8 @@ export default function methods () { } self.getCropperImage = (...args) => { + self.updateCanvas() + const ARG_TYPE = toString.call(args[0]) const fn = args[args.length - 1] diff --git a/src/update.js b/src/update.js index fba5eff..324f0b0 100644 --- a/src/update.js +++ b/src/update.js @@ -14,6 +14,9 @@ export default function update () { let xMove, yMove // 计算单指移动的距离 if (self.touchended) { + if (!self.inRealTime) { + self.updateImage() + } return self.updateCanvas() } xMove = Math.round(touch.x - self.touchX0) @@ -24,7 +27,11 @@ export default function update () { self.outsideBound(imgLeft, imgTop) - self.updateCanvas() + if (!self.inRealTime) { + self.updateImage() + } else { + self.updateCanvas(); + } } self.__twoTouchStart = (touch0, touch1) => { @@ -57,7 +64,11 @@ export default function update () { self.outsideBound(imgLeft, imgTop) - self.updateCanvas() + if (!self.inRealTime) { + self.updateImage() + } else { + self.updateCanvas(); + } } self.__xtouchEnd = () => { From 8843e163c17a3b7a3618ddb2404935f10022b319 Mon Sep 17 00:00:00 2001 From: ding Date: Fri, 4 May 2018 03:03:34 +0800 Subject: [PATCH 2/8] =?UTF-8?q?=E6=81=A2=E5=A4=8D=20template?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/we-cropper.wxml | 2 ++ example/we-cropper/we-cropper.wxml | 2 ++ 2 files changed, 4 insertions(+) diff --git a/dist/we-cropper.wxml b/dist/we-cropper.wxml index 5484469..e6bf9a0 100644 --- a/dist/we-cropper.wxml +++ b/dist/we-cropper.wxml @@ -1,3 +1,4 @@ + diff --git a/example/we-cropper/we-cropper.wxml b/example/we-cropper/we-cropper.wxml index 5484469..e6bf9a0 100644 --- a/example/we-cropper/we-cropper.wxml +++ b/example/we-cropper/we-cropper.wxml @@ -1,3 +1,4 @@ + From 6eeb48843894b1ae3cac345452df58adc341f983 Mon Sep 17 00:00:00 2001 From: ding Date: Fri, 4 May 2018 03:07:43 +0800 Subject: [PATCH 3/8] update docs --- docs/api.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/api.md b/docs/api.md index b764a01..7b6eca9 100644 --- a/docs/api.md +++ b/docs/api.md @@ -54,6 +54,13 @@ canvas组件标识符（必填） - width: `Number` 裁剪框宽度（默认 画布宽度），单位：px - height: `Number` 裁剪框高度（默认 画布高度），单位：px +#### inRealTime + +- Type: `Boolean` +- Default: `true` + +是否实时在 canvas 上绘制渲染裁切后的图片 + #### onReady - Type: `Function` From c5cca95ba7c50c0805f56fd042fcb1000ecdbef0 Mon Sep 17 00:00:00 2001 From: ding Date: Fri, 4 May 2018 03:14:13 +0800 Subject: [PATCH 4/8] assign pageContext to wxCropper --- src/prepare.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/prepare.js b/src/prepare.js index e3de9bd..5548caf 100644 --- a/src/prepare.js +++ b/src/prepare.js @@ -10,6 +10,7 @@ export default function prepare () { const pageContext = pages[pages.length - 1] // 把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问 pageContext.wecropper = self + self.pageContext = pageContext } self.createCtx = () => { From 3970b0018fe38b12932c0b90c07a8741d02a8356 Mon Sep 17 00:00:00 2001 From: ding Date: Fri, 4 May 2018 03:31:51 +0800 Subject: [PATCH 5/8] fixes --- src/default.js | 4 ++-- src/methods.js | 11 +++++------ src/update.js | 4 ++-- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/default.js b/src/default.js index df58446..f832a25 100644 --- a/src/default.js +++ b/src/default.js @@ -89,10 +89,10 @@ export default { }, inRealTime: { default: true, - get: function get() { + get () { return tmp.inRealTime }, - set: function set(value) { + set (value) { if (typeof (value) !== 'boolean') { console.error(("inRealTime:" + value + " is invalid")); } diff --git a/src/methods.js b/src/methods.js index b80a44f..040c522 100644 --- a/src/methods.js +++ b/src/methods.js @@ -21,18 +21,17 @@ export default function methods () { return self } - self.updateImage = function (isInit=false) { + self.updateImage = (isInit=false) => { if (self.croperTarget && isInit) { - self.pageContext.setData({ 'cropperOpt.cropperImageSrc': self.croperTarget }) } if (!self.imgLeft || !self.imgTop) { - return; + return } - + self.pageContext.setData({ 'cropperOpt.imageLeft': self.imgLeft, 'cropperOpt.imageTop': self.imgTop, @@ -76,7 +75,7 @@ export default function methods () { if (!self.inRealTime) { self.updateImage(true) } else { - self.updateCanvas(); + self.updateCanvas() } isFunction(self.onImageLoad) && self.onImageLoad(self.ctx, self) @@ -99,7 +98,7 @@ export default function methods () { self.getCropperImage = (...args) => { self.updateCanvas() - + const ARG_TYPE = toString.call(args[0]) const fn = args[args.length - 1] diff --git a/src/update.js b/src/update.js index 324f0b0..bcb213b 100644 --- a/src/update.js +++ b/src/update.js @@ -30,7 +30,7 @@ export default function update () { if (!self.inRealTime) { self.updateImage() } else { - self.updateCanvas(); + self.updateCanvas() } } @@ -67,7 +67,7 @@ export default function update () { if (!self.inRealTime) { self.updateImage() } else { - self.updateCanvas(); + self.updateCanvas() } } From b8da0a831b0d3797092d1805f77ea1cf505e1e3a Mon Sep 17 00:00:00 2001 From: ding Date: Fri, 4 May 2018 03:32:24 +0800 Subject: [PATCH 6/8] build --- dist/we-cropper.js | 12 ++++++------ dist/we-cropper.min.js | 2 +- example/we-cropper/we-cropper.js | 12 ++++++------ 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/dist/we-cropper.js b/dist/we-cropper.js index cc6cf3b..41efeb3 100644 --- a/dist/we-cropper.js +++ b/dist/we-cropper.js @@ -133,10 +133,10 @@ var DEFAULT = { }, inRealTime: { default: true, - get: function get() { + get: function get () { return tmp.inRealTime }, - set: function set(value) { + set: function set (value) { if (typeof (value) !== 'boolean') { console.error(("inRealTime:" + value + " is invalid")); } @@ -192,6 +192,7 @@ function prepare () { var pageContext = pages[pages.length - 1]; // 把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问 pageContext.wecropper = self; + self.pageContext = pageContext; }; self.createCtx = function () { @@ -638,16 +639,15 @@ function methods () { if ( isInit === void 0 ) isInit=false; if (self.croperTarget && isInit) { - self.pageContext.setData({ 'cropperOpt.cropperImageSrc': self.croperTarget }); } if (!self.imgLeft || !self.imgTop) { - return; + return } - + self.pageContext.setData({ 'cropperOpt.imageLeft': self.imgLeft, 'cropperOpt.imageTop': self.imgTop, @@ -719,7 +719,7 @@ function methods () { while ( len-- ) args[ len ] = arguments[ len ]; self.updateCanvas(); - + var ARG_TYPE = toString.call(args[0]); var fn = args[args.length - 1]; diff --git a/dist/we-cropper.min.js b/dist/we-cropper.min.js index c28f953..a94f98d 100644 --- a/dist/we-cropper.min.js +++ b/dist/we-cropper.min.js @@ -3,4 +3,4 @@ * (c) 2018 dlhandsome * @license MIT */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.WeCropper=t()}(this,function(){"use strict";var o=void 0,t=["touchstarted","touchmoved","touchended"];function f(e){return"function"==typeof e}function r(o){for(var n=[],e=arguments.length-1;0>18&63)+s.charAt(r>>12&63)+s.charAt(r>>6&63)+s.charAt(63&r);return 2==a?(t=e.charCodeAt(c)<<8,o=e.charCodeAt(++c),i+=s.charAt((r=t+o)>>10)+s.charAt(r>>4&63)+s.charAt(r<<2&63)+"="):1==a&&(r=e.charCodeAt(c),i+=s.charAt(r>>2)+s.charAt(r<<4&63)+"=="),i},decode:function(e){var t=(e=String(e).replace(c,"")).length;t%4==0&&(t=(e=e.replace(/==?$/,"")).length),(t%4==1||/[^+a-zA-Z0-9/]/.test(e))&&d("Invalid character: the string to be decoded is not correctly encoded.");for(var o,n,r=0,a="",i=-1;++i>(-2*r&6)));return a},version:"0.1.0"};if(t&&!t.nodeType)if(o)o.exports=a;else for(var i in a)a.hasOwnProperty(i)&&(t[i]=a[i]);else e.base64=a}(l)}(e={exports:{}},e.exports),e.exports);function y(e){var t="";if("string"==typeof e)t=e;else for(var o=0;o>8&255,r>>16&255,r>>24&255,0,0,0,0,54,0,0,0],i=[40,0,0,0,255&t,t>>8&255,t>>16&255,t>>24&255,255&o,o>>8&255,o>>16&255,o>>24&255,1,0,24,0,0,0,0,0,255&n,n>>8&255,n>>16&255,n>>24&255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],c=(4-3*t%4)%4,u=e.data,d="",s=t<<2,h=o,l=String.fromCharCode;do{for(var f=s*(h-1),g="",p=0;p=r&&(u.newScale=r),u.scaleWidth=Math.round(u.newScale*u.baseWidth),u.scaleHeight=Math.round(u.newScale*u.baseHeight);var i=Math.round(u.touchX1-u.scaleWidth/2),c=Math.round(u.touchY1-u.scaleHeight/2);u.outsideBound(i,c),u.inRealTime?u.updateCanvas():u.updateImage()},u.__xtouchEnd=function(){u.oldScale=u.newScale,u.rectX=u.imgLeft,u.rectY=u.imgTop})},s}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.WeCropper=t()}(this,function(){"use strict";var t=void 0,r=["touchstarted","touchmoved","touchended"];function f(e){return"function"==typeof e}function a(o){for(var n=[],e=arguments.length-1;0>18&63)+s.charAt(r>>12&63)+s.charAt(r>>6&63)+s.charAt(63&r);return 2==a?(t=e.charCodeAt(c)<<8,o=e.charCodeAt(++c),i+=s.charAt((r=t+o)>>10)+s.charAt(r>>4&63)+s.charAt(r<<2&63)+"="):1==a&&(r=e.charCodeAt(c),i+=s.charAt(r>>2)+s.charAt(r<<4&63)+"=="),i},decode:function(e){var t=(e=String(e).replace(c,"")).length;t%4==0&&(t=(e=e.replace(/==?$/,"")).length),(t%4==1||/[^+a-zA-Z0-9/]/.test(e))&&d("Invalid character: the string to be decoded is not correctly encoded.");for(var o,n,r=0,a="",i=-1;++i>(-2*r&6)));return a},version:"0.1.0"};if(t&&!t.nodeType)if(o)o.exports=a;else for(var i in a)a.hasOwnProperty(i)&&(t[i]=a[i]);else e.base64=a}(l)}(e={exports:{}},e.exports),e.exports);function y(e){var t="";if("string"==typeof e)t=e;else for(var o=0;o>8&255,r>>16&255,r>>24&255,0,0,0,0,54,0,0,0],i=[40,0,0,0,255&t,t>>8&255,t>>16&255,t>>24&255,255&o,o>>8&255,o>>16&255,o>>24&255,1,0,24,0,0,0,0,0,255&n,n>>8&255,n>>16&255,n>>24&255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],c=(4-3*t%4)%4,u=e.data,d="",s=t<<2,h=o,l=String.fromCharCode;do{for(var f=s*(h-1),g="",p=0;p=r&&(u.newScale=r),u.scaleWidth=Math.round(u.newScale*u.baseWidth),u.scaleHeight=Math.round(u.newScale*u.baseHeight);var i=Math.round(u.touchX1-u.scaleWidth/2),c=Math.round(u.touchY1-u.scaleHeight/2);u.outsideBound(i,c),u.inRealTime?u.updateCanvas():u.updateImage()},u.__xtouchEnd=function(){u.oldScale=u.newScale,u.rectX=u.imgLeft,u.rectY=u.imgTop})},s}); \ No newline at end of file diff --git a/example/we-cropper/we-cropper.js b/example/we-cropper/we-cropper.js index cc6cf3b..41efeb3 100644 --- a/example/we-cropper/we-cropper.js +++ b/example/we-cropper/we-cropper.js @@ -133,10 +133,10 @@ var DEFAULT = { }, inRealTime: { default: true, - get: function get() { + get: function get () { return tmp.inRealTime }, - set: function set(value) { + set: function set (value) { if (typeof (value) !== 'boolean') { console.error(("inRealTime:" + value + " is invalid")); } @@ -192,6 +192,7 @@ function prepare () { var pageContext = pages[pages.length - 1]; // 把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问 pageContext.wecropper = self; + self.pageContext = pageContext; }; self.createCtx = function () { @@ -638,16 +639,15 @@ function methods () { if ( isInit === void 0 ) isInit=false; if (self.croperTarget && isInit) { - self.pageContext.setData({ 'cropperOpt.cropperImageSrc': self.croperTarget }); } if (!self.imgLeft || !self.imgTop) { - return; + return } - + self.pageContext.setData({ 'cropperOpt.imageLeft': self.imgLeft, 'cropperOpt.imageTop': self.imgTop, @@ -719,7 +719,7 @@ function methods () { while ( len-- ) args[ len ] = arguments[ len ]; self.updateCanvas(); - + var ARG_TYPE = toString.call(args[0]); var fn = args[args.length - 1]; From aef59924decaf2bd339b907359744361164d70dd Mon Sep 17 00:00:00 2001 From: ding Date: Fri, 4 May 2018 03:36:46 +0800 Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=E4=B8=8D=E7=AC=A6=E5=90=88=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E8=A7=84=E8=8C=83=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/we-cropper.js | 4 ++-- example/we-cropper/we-cropper.js | 4 ++-- src/default.js | 4 ++-- src/methods.js | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/dist/we-cropper.js b/dist/we-cropper.js index 41efeb3..e10e053 100644 --- a/dist/we-cropper.js +++ b/dist/we-cropper.js @@ -138,7 +138,7 @@ var DEFAULT = { }, set: function set (value) { if (typeof (value) !== 'boolean') { - console.error(("inRealTime:" + value + " is invalid")); + console.error(('inRealTime:' + value + ' is invalid')); } tmp.inRealTime = value; } @@ -636,7 +636,7 @@ function methods () { }; self.updateImage = function (isInit) { - if ( isInit === void 0 ) isInit=false; + if ( isInit === void 0 ) isInit = false; if (self.croperTarget && isInit) { self.pageContext.setData({ diff --git a/example/we-cropper/we-cropper.js b/example/we-cropper/we-cropper.js index 41efeb3..e10e053 100644 --- a/example/we-cropper/we-cropper.js +++ b/example/we-cropper/we-cropper.js @@ -138,7 +138,7 @@ var DEFAULT = { }, set: function set (value) { if (typeof (value) !== 'boolean') { - console.error(("inRealTime:" + value + " is invalid")); + console.error(('inRealTime:' + value + ' is invalid')); } tmp.inRealTime = value; } @@ -636,7 +636,7 @@ function methods () { }; self.updateImage = function (isInit) { - if ( isInit === void 0 ) isInit=false; + if ( isInit === void 0 ) isInit = false; if (self.croperTarget && isInit) { self.pageContext.setData({ diff --git a/src/default.js b/src/default.js index f832a25..591e4b7 100644 --- a/src/default.js +++ b/src/default.js @@ -94,9 +94,9 @@ export default { }, set (value) { if (typeof (value) !== 'boolean') { - console.error(("inRealTime:" + value + " is invalid")); + console.error(('inRealTime:' + value + ' is invalid')) } - tmp.inRealTime = value; + tmp.inRealTime = value } }, onReady: { diff --git a/src/methods.js b/src/methods.js index 040c522..86d15ab 100644 --- a/src/methods.js +++ b/src/methods.js @@ -21,7 +21,7 @@ export default function methods () { return self } - self.updateImage = (isInit=false) => { + self.updateImage = (isInit = false) => { if (self.croperTarget && isInit) { self.pageContext.setData({ 'cropperOpt.cropperImageSrc': self.croperTarget @@ -41,7 +41,7 @@ export default function methods () { }) return self - }; + } self.pushOrign = (src) => { self.src = src From 2c814fe795f0f4f6b74c4e33ed747b23ee1d8229 Mon Sep 17 00:00:00 2001 From: ding Date: Fri, 4 May 2018 09:47:19 +0800 Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=E8=A3=81=E5=88=87=E5=90=8E=E7=9A=84?= =?UTF-8?q?=E5=9B=BE=20=E8=A2=AB=E6=8F=90=E5=89=8D=E7=BB=98=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/we-cropper.js | 5 +++-- dist/we-cropper.min.js | 2 +- example/we-cropper/we-cropper.js | 5 +++-- src/update.js | 5 +++-- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/dist/we-cropper.js b/dist/we-cropper.js index e10e053..4e75107 100644 --- a/dist/we-cropper.js +++ b/dist/we-cropper.js @@ -804,9 +804,10 @@ function update () { // 计算单指移动的距离 if (self.touchended) { if (!self.inRealTime) { - self.updateImage(); + return self.updateImage() + } else { + return self.updateCanvas() } - return self.updateCanvas() } xMove = Math.round(touch.x - self.touchX0); yMove = Math.round(touch.y - self.touchY0); diff --git a/dist/we-cropper.min.js b/dist/we-cropper.min.js index a94f98d..71e6675 100644 --- a/dist/we-cropper.min.js +++ b/dist/we-cropper.min.js @@ -3,4 +3,4 @@ * (c) 2018 dlhandsome * @license MIT */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.WeCropper=t()}(this,function(){"use strict";var t=void 0,r=["touchstarted","touchmoved","touchended"];function f(e){return"function"==typeof e}function a(o){for(var n=[],e=arguments.length-1;0>18&63)+s.charAt(r>>12&63)+s.charAt(r>>6&63)+s.charAt(63&r);return 2==a?(t=e.charCodeAt(c)<<8,o=e.charCodeAt(++c),i+=s.charAt((r=t+o)>>10)+s.charAt(r>>4&63)+s.charAt(r<<2&63)+"="):1==a&&(r=e.charCodeAt(c),i+=s.charAt(r>>2)+s.charAt(r<<4&63)+"=="),i},decode:function(e){var t=(e=String(e).replace(c,"")).length;t%4==0&&(t=(e=e.replace(/==?$/,"")).length),(t%4==1||/[^+a-zA-Z0-9/]/.test(e))&&d("Invalid character: the string to be decoded is not correctly encoded.");for(var o,n,r=0,a="",i=-1;++i>(-2*r&6)));return a},version:"0.1.0"};if(t&&!t.nodeType)if(o)o.exports=a;else for(var i in a)a.hasOwnProperty(i)&&(t[i]=a[i]);else e.base64=a}(l)}(e={exports:{}},e.exports),e.exports);function y(e){var t="";if("string"==typeof e)t=e;else for(var o=0;o>8&255,r>>16&255,r>>24&255,0,0,0,0,54,0,0,0],i=[40,0,0,0,255&t,t>>8&255,t>>16&255,t>>24&255,255&o,o>>8&255,o>>16&255,o>>24&255,1,0,24,0,0,0,0,0,255&n,n>>8&255,n>>16&255,n>>24&255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],c=(4-3*t%4)%4,u=e.data,d="",s=t<<2,h=o,l=String.fromCharCode;do{for(var f=s*(h-1),g="",p=0;p=r&&(u.newScale=r),u.scaleWidth=Math.round(u.newScale*u.baseWidth),u.scaleHeight=Math.round(u.newScale*u.baseHeight);var i=Math.round(u.touchX1-u.scaleWidth/2),c=Math.round(u.touchY1-u.scaleHeight/2);u.outsideBound(i,c),u.inRealTime?u.updateCanvas():u.updateImage()},u.__xtouchEnd=function(){u.oldScale=u.newScale,u.rectX=u.imgLeft,u.rectY=u.imgTop})},s}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.WeCropper=t()}(this,function(){"use strict";var t=void 0,r=["touchstarted","touchmoved","touchended"];function f(e){return"function"==typeof e}function a(o){for(var n=[],e=arguments.length-1;0>18&63)+s.charAt(r>>12&63)+s.charAt(r>>6&63)+s.charAt(63&r);return 2==a?(t=e.charCodeAt(c)<<8,o=e.charCodeAt(++c),i+=s.charAt((r=t+o)>>10)+s.charAt(r>>4&63)+s.charAt(r<<2&63)+"="):1==a&&(r=e.charCodeAt(c),i+=s.charAt(r>>2)+s.charAt(r<<4&63)+"=="),i},decode:function(e){var t=(e=String(e).replace(c,"")).length;t%4==0&&(t=(e=e.replace(/==?$/,"")).length),(t%4==1||/[^+a-zA-Z0-9/]/.test(e))&&d("Invalid character: the string to be decoded is not correctly encoded.");for(var o,n,r=0,a="",i=-1;++i>(-2*r&6)));return a},version:"0.1.0"};if(t&&!t.nodeType)if(o)o.exports=a;else for(var i in a)a.hasOwnProperty(i)&&(t[i]=a[i]);else e.base64=a}(l)}(e={exports:{}},e.exports),e.exports);function y(e){var t="";if("string"==typeof e)t=e;else for(var o=0;o>8&255,r>>16&255,r>>24&255,0,0,0,0,54,0,0,0],i=[40,0,0,0,255&t,t>>8&255,t>>16&255,t>>24&255,255&o,o>>8&255,o>>16&255,o>>24&255,1,0,24,0,0,0,0,0,255&n,n>>8&255,n>>16&255,n>>24&255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],c=(4-3*t%4)%4,u=e.data,d="",s=t<<2,h=o,l=String.fromCharCode;do{for(var f=s*(h-1),g="",p=0;p=r&&(u.newScale=r),u.scaleWidth=Math.round(u.newScale*u.baseWidth),u.scaleHeight=Math.round(u.newScale*u.baseHeight);var i=Math.round(u.touchX1-u.scaleWidth/2),c=Math.round(u.touchY1-u.scaleHeight/2);u.outsideBound(i,c),u.inRealTime?u.updateCanvas():u.updateImage()},u.__xtouchEnd=function(){u.oldScale=u.newScale,u.rectX=u.imgLeft,u.rectY=u.imgTop})},s}); \ No newline at end of file diff --git a/example/we-cropper/we-cropper.js b/example/we-cropper/we-cropper.js index e10e053..4e75107 100644 --- a/example/we-cropper/we-cropper.js +++ b/example/we-cropper/we-cropper.js @@ -804,9 +804,10 @@ function update () { // 计算单指移动的距离 if (self.touchended) { if (!self.inRealTime) { - self.updateImage(); + return self.updateImage() + } else { + return self.updateCanvas() } - return self.updateCanvas() } xMove = Math.round(touch.x - self.touchX0); yMove = Math.round(touch.y - self.touchY0); diff --git a/src/update.js b/src/update.js index bcb213b..816b0c0 100644 --- a/src/update.js +++ b/src/update.js @@ -15,9 +15,10 @@ export default function update () { // 计算单指移动的距离 if (self.touchended) { if (!self.inRealTime) { - self.updateImage() + return self.updateImage() + } else { + return self.updateCanvas() } - return self.updateCanvas() } xMove = Math.round(touch.x - self.touchX0) yMove = Math.round(touch.y - self.touchY0)