123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600 |
- /**
- * we-cropper v1.1.5
- * (c) 2017 dlhandsome
- * @license MIT
- */
- (function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
- typeof define === 'function' && define.amd ? define(factory) :
- (global.WeCropper = factory());
- }(this, (function () { 'use strict';
- var device = void 0;
- var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended'];
- function firstLetterUpper (str) {
- return str.charAt(0).toUpperCase() + str.slice(1)
- }
- function setTouchState (instance) {
- var arg = [], len = arguments.length - 1;
- while ( len-- > 0 ) arg[ len ] = arguments[ len + 1 ];
- TOUCH_STATE.forEach(function (key, i) {
- if (arg[i] !== undefined) {
- instance[key] = arg[i];
- }
- });
- }
- function validator (instance, o) {
- Object.defineProperties(instance, o);
- }
- function getDevice () {
- if (!device) {
- device = wx.getSystemInfoSync();
- }
- return device
- }
- function isFunction (obj) {
- return typeof obj === 'function'
- }
- var tmp = {};
- var DEFAULT = {
- id: {
- default: 'cropper',
- get: function get () {
- return tmp.id
- },
- set: function set (value) {
- if (typeof (value) !== 'string') {
- console.error(("id:" + value + " is invalid"));
- }
- tmp.id = value;
- }
- },
- width: {
- default: 750,
- get: function get () {
- return tmp.width
- },
- set: function set (value) {
- if (typeof (value) !== 'number') {
- console.error(("width:" + value + " is invalid"));
- }
- tmp.width = value;
- }
- },
- height: {
- default: 750,
- get: function get () {
- return tmp.height
- },
- set: function set (value) {
- if (typeof (value) !== 'number') {
- console.error(("height:" + value + " is invalid"));
- }
- tmp.height = value;
- }
- },
- scale: {
- default: 2.5,
- get: function get () {
- return tmp.scale
- },
- set: function set (value) {
- if (typeof (value) !== 'number') {
- console.error(("scale:" + value + " is invalid"));
- }
- tmp.scale = value;
- }
- },
- zoom: {
- default: 5,
- get: function get () {
- return tmp.zoom
- },
- set: function set (value) {
- if (typeof (value) !== 'number') {
- console.error(("zoom:" + value + " is invalid"));
- } else if (value < 0 || value > 10) {
- console.error("zoom should be ranged in 0 ~ 10");
- }
- tmp.zoom = value;
- }
- },
- src: {
- default: 'cropper',
- get: function get () {
- return tmp.src
- },
- set: function set (value) {
- if (typeof (value) !== 'string') {
- console.error(("id:" + value + " is invalid"));
- }
- tmp.src = value;
- }
- },
- cut: {
- default: {},
- get: function get () {
- return tmp.cut
- },
- set: function set (value) {
- if (typeof (value) !== 'object') {
- console.error(("id:" + value + " is invalid"));
- }
- tmp.cut = value;
- }
- },
- onReady: {
- default: null,
- get: function get () {
- return tmp.ready
- },
- set: function set (value) {
- tmp.ready = value;
- }
- },
- onBeforeImageLoad: {
- default: null,
- get: function get () {
- return tmp.beforeImageLoad
- },
- set: function set (value) {
- tmp.beforeImageLoad = value;
- }
- },
- onImageLoad: {
- default: null,
- get: function get () {
- return tmp.imageLoad
- },
- set: function set (value) {
- tmp.imageLoad = value;
- }
- },
- onBeforeDraw: {
- default: null,
- get: function get () {
- return tmp.beforeDraw
- },
- set: function set (value) {
- tmp.beforeDraw = value;
- }
- }
- };
- function prepare () {
- var self = this;
- var ref = getDevice();
- var windowWidth = ref.windowWidth;
- self.attachPage = function () {
- var pages = getCurrentPages();
- // 获取到当前page上下文
- var pageContext = pages[pages.length - 1];
- // 把this依附在Page上下文的wecropper属性上,便于在page钩子函数中访问
- pageContext.wecropper = self;
- };
- self.createCtx = function () {
- var id = self.id;
- if (id) {
- self.ctx = wx.createCanvasContext(id);
- } else {
- console.error("constructor: create canvas context failed, 'id' must be valuable");
- }
- };
- self.deviceRadio = windowWidth / 750;
- }
- function observer () {
- var self = this;
- var EVENT_TYPE = ['ready', 'beforeImageLoad', 'beforeDraw', 'imageLoad'];
- self.on = function (event, fn) {
- if (EVENT_TYPE.indexOf(event) > -1) {
- if (typeof (fn) === 'function') {
- event === 'ready'
- ? fn(self)
- : self[("on" + (firstLetterUpper(event)))] = fn;
- }
- } else {
- console.error(("event: " + event + " is invalid"));
- }
- return self
- };
- }
- function methods () {
- var self = this;
- var deviceRadio = self.deviceRadio;
- var boundWidth = self.width; // 裁剪框默认宽度,即整个画布宽度
- var boundHeight = self.height; // 裁剪框默认高度,即整个画布高度
- var ref = self.cut;
- var x = ref.x; if ( x === void 0 ) x = 0;
- var y = ref.y; if ( y === void 0 ) y = 0;
- var width = ref.width; if ( width === void 0 ) width = boundWidth;
- var height = ref.height; if ( height === void 0 ) height = boundHeight;
- self.updateCanvas = function () {
- if (self.croperTarget) {
- // 画布绘制图片
- self.ctx.drawImage(self.croperTarget, self.imgLeft, self.imgTop, self.scaleWidth, self.scaleHeight);
- }
- isFunction(self.onBeforeDraw) && self.onBeforeDraw(self.ctx, self);
- self.setBoundStyle(); // 设置边界样式
- self.ctx.draw();
- return self
- };
- self.pushOrign = function (src) {
- self.src = src;
- isFunction(self.onBeforeImageLoad) && self.onBeforeImageLoad(self.ctx, self);
- wx.getImageInfo({
- src: src,
- success: function success (res) {
- var innerAspectRadio = res.width / res.height;
- self.croperTarget = res.path;
- console.log(x, y);
- if (innerAspectRadio < width / height) {
- self.rectX = x;
- self.baseWidth = width;
- self.baseHeight = width / innerAspectRadio;
- self.rectY = y - Math.abs((height - self.baseHeight) / 2);
- } else {
- self.rectY = y;
- self.baseWidth = height * innerAspectRadio;
- self.baseHeight = height;
- self.rectX = x - Math.abs((width - self.baseWidth) / 2);
- }
- self.imgLeft = self.rectX;
- self.imgTop = self.rectY;
- self.scaleWidth = self.baseWidth;
- self.scaleHeight = self.baseHeight;
- self.updateCanvas();
- isFunction(self.onImageLoad) && self.onImageLoad(self.ctx, self);
- }
- });
- self.update();
- return self
- };
- self.getCropperImage = function () {
- var args = [], len = arguments.length;
- while ( len-- ) args[ len ] = arguments[ len ];
- var id = self.id;
- var ARG_TYPE = toString.call(args[0]);
- var fn = args[args.length - 1];
- switch (ARG_TYPE) {
- case '[object Object]':
- var ref = args[0];
- var quality = ref.quality; if ( quality === void 0 ) quality = 10;
- if (typeof (quality) !== 'number') {
- console.error(("quality:" + quality + " is invalid"));
- } else if (quality < 0 || quality > 10) {
- console.error("quality should be ranged in 0 ~ 10");
- }
- wx.canvasToTempFilePath({
- canvasId: id,
- x: x,
- y: y,
- width: width,
- height: height,
- destWidth: width * quality / (deviceRadio * 10),
- destHeight: height * quality / (deviceRadio * 10),
- success: function success (res) {
- isFunction(fn) && fn.call(self, res.tempFilePath);
- },
- fail: function fail (res) {
- isFunction(fn) && fn.call(self, null);
- }
- }); break
- case '[object Function]':
- wx.canvasToTempFilePath({
- canvasId: id,
- x: x,
- y: y,
- width: width,
- height: height,
- destWidth: width / deviceRadio,
- destHeight: height / deviceRadio,
- success: function success (res) {
- isFunction(fn) && fn.call(self, res.tempFilePath);
- },
- fail: function fail (res) {
- isFunction(fn) && fn.call(self, null);
- }
- }); break
- }
- return self
- };
- }
- function update () {
- var self = this;
- if (!self.src) { return }
- self.__oneTouchStart = function (touch) {
- self.touchX0 = touch.x;
- self.touchY0 = touch.y;
- };
- self.__oneTouchMove = function (touch) {
- var xMove, yMove;
- // 计算单指移动的距离
- if (self.touchended) {
- return self.updateCanvas()
- }
- xMove = touch.x - self.touchX0;
- yMove = touch.y - self.touchY0;
- var imgLeft = self.rectX + xMove;
- var imgTop = self.rectY + yMove;
- self.outsideBound(imgLeft, imgTop);
- self.updateCanvas();
- };
- self.__twoTouchStart = function (touch0, touch1) {
- var xMove, yMove, oldDistance;
- self.touchX1 = self.rectX + self.scaleWidth / 2;
- self.touchY1 = self.rectY + self.scaleHeight / 2;
- // 计算两指距离
- xMove = touch1.x - touch0.x;
- yMove = touch1.y - touch0.y;
- oldDistance = Math.sqrt(xMove * xMove + yMove * yMove);
- self.oldDistance = oldDistance;
- };
- self.__twoTouchMove = function (touch0, touch1) {
- var xMove, yMove, newDistance;
- var scale = self.scale;
- var zoom = self.zoom;
- // 计算二指最新距离
- xMove = touch1.x - touch0.x;
- yMove = touch1.y - touch0.y;
- newDistance = Math.sqrt(xMove * xMove + yMove * yMove);
- // 使用0.005的缩放倍数具有良好的缩放体验
- self.newScale = self.oldScale + 0.001 * zoom * (newDistance - self.oldDistance);
- // 设定缩放范围
- self.newScale <= 1 && (self.newScale = 1);
- self.newScale >= scale && (self.newScale = scale);
- self.scaleWidth = self.newScale * self.baseWidth;
- self.scaleHeight = self.newScale * self.baseHeight;
- var imgLeft = self.touchX1 - self.scaleWidth / 2;
- var imgTop = self.touchY1 - self.scaleHeight / 2;
- self.outsideBound(imgLeft, imgTop);
- self.updateCanvas();
- };
- self.__xtouchEnd = function () {
- self.oldScale = self.newScale;
- self.rectX = self.imgLeft;
- self.rectY = self.imgTop;
- };
- }
- var handle = {
- // 图片手势初始监测
- touchStart: function touchStart (e) {
- var self = this;
- var ref = e.touches;
- var touch0 = ref[0];
- var touch1 = ref[1];
- setTouchState(self, true, null, null);
- // 计算第一个触摸点的位置,并参照改点进行缩放
- self.__oneTouchStart(touch0);
- // 两指手势触发
- if (e.touches.length >= 2) {
- self.__twoTouchStart(touch0, touch1);
- }
- },
- // 图片手势动态缩放
- touchMove: function touchMove (e) {
- var self = this;
- var ref = e.touches;
- var touch0 = ref[0];
- var touch1 = ref[1];
- setTouchState(self, null, true);
- // 单指手势时触发
- if (e.touches.length === 1) {
- self.__oneTouchMove(touch0);
- }
- // 两指手势触发
- if (e.touches.length >= 2) {
- self.__twoTouchMove(touch0, touch1);
- }
- },
- touchEnd: function touchEnd (e) {
- var self = this;
- setTouchState(self, false, false, true);
- self.__xtouchEnd();
- }
- };
- function cut () {
- var self = this;
- var boundWidth = self.width; // 裁剪框默认宽度,即整个画布宽度
- var boundHeight = self.height;
- // 裁剪框默认高度,即整个画布高度
- var ref = self.cut;
- var x = ref.x; if ( x === void 0 ) x = 0;
- var y = ref.y; if ( y === void 0 ) y = 0;
- var width = ref.width; if ( width === void 0 ) width = boundWidth;
- var height = ref.height; if ( height === void 0 ) height = boundHeight;
- /**
- * 设置边界
- * @param imgLeft 图片左上角横坐标值
- * @param imgTop 图片左上角纵坐标值
- */
- self.outsideBound = function (imgLeft, imgTop) {
- self.imgLeft = imgLeft >= x
- ? x
- : self.scaleWidth + imgLeft - x <= width
- ? x + width - self.scaleWidth
- : imgLeft;
- self.imgTop = imgTop >= y
- ? y
- : self.scaleHeight + imgTop - y <= height
- ? y + height - self.scaleHeight
- : imgTop;
- };
- /**
- * 设置边界样式
- * @param color 边界颜色
- */
- self.setBoundStyle = function (ref) {
- if ( ref === void 0 ) ref = {};
- var color = ref.color; if ( color === void 0 ) color = '#04b00f';
- var mask = ref.mask; if ( mask === void 0 ) mask = 'rgba(0, 0, 0, 0.3)';
- var lineWidth = ref.lineWidth; if ( lineWidth === void 0 ) lineWidth = 1;
- // 绘制半透明层
- self.ctx.beginPath();
- self.ctx.setFillStyle(mask);
- self.ctx.fillRect(0, 0, x, boundHeight);
- self.ctx.fillRect(x, 0, width, y);
- self.ctx.fillRect(x, y + height, width, boundHeight - y - height);
- self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight);
- self.ctx.fill();
- // 设置边界左上角样式
- // 为使边界样式处于边界外边缘,此时x、y均要减少lineWidth
- self.ctx.beginPath();
- self.ctx.setStrokeStyle(color);
- self.ctx.setLineWidth(lineWidth);
- self.ctx.moveTo(x - lineWidth, y + 10 - lineWidth);
- self.ctx.lineTo(x - lineWidth, y - lineWidth);
- self.ctx.lineTo(x + 10 - lineWidth, y - lineWidth);
- self.ctx.stroke();
- // 设置边界左下角样式
- // 为使边界样式处于边界外边缘,此时x要减少lineWidth、y要增加lineWidth
- self.ctx.beginPath();
- self.ctx.setStrokeStyle(color);
- self.ctx.setLineWidth(lineWidth);
- self.ctx.moveTo(x - lineWidth, y + height - 10 + lineWidth);
- self.ctx.lineTo(x - lineWidth, y + height + lineWidth);
- self.ctx.lineTo(x + 10 - lineWidth, y + height + lineWidth);
- self.ctx.stroke();
- // 设置边界右上角样式
- // 为使边界样式处于边界外边缘,此时x要增加lineWidth、y要减少lineWidth
- self.ctx.beginPath();
- self.ctx.setStrokeStyle(color);
- self.ctx.setLineWidth(lineWidth);
- self.ctx.moveTo(x + width - 10 + lineWidth, y - lineWidth);
- self.ctx.lineTo(x + width + lineWidth, y - lineWidth);
- self.ctx.lineTo(x + width + lineWidth, y + 10 - lineWidth);
- self.ctx.stroke();
- // 设置边界右下角样式
- // 为使边界样式处于边界外边缘,此时x、y均要增加lineWidth
- self.ctx.beginPath();
- self.ctx.setStrokeStyle(color);
- self.ctx.setLineWidth(lineWidth);
- self.ctx.moveTo(x + width + lineWidth, y + height - 10 + lineWidth);
- self.ctx.lineTo(x + width + lineWidth, y + height + lineWidth);
- self.ctx.lineTo(x + width - 10 + lineWidth, y + height + lineWidth);
- self.ctx.stroke();
- };
- }
- var version = "1.1.5";
- var weCropper = function weCropper (params) {
- var self = this;
- var _default = {};
- validator(self, DEFAULT);
- Object.keys(DEFAULT).forEach(function (key) {
- _default[key] = DEFAULT[key].default;
- });
- Object.assign(self, _default, params);
- self.prepare();
- self.attachPage();
- self.createCtx();
- self.observer();
- self.cutt();
- self.methods();
- self.init();
- self.update();
- return self
- };
- weCropper.prototype.init = function init () {
- var self = this;
- var src = self.src;
- self.version = version;
- typeof self.onReady === 'function' && self.onReady(self.ctx, self);
- if (src) {
- self.pushOrign(src);
- }
- setTouchState(self, false, false, false);
- self.oldScale = 1;
- self.newScale = 1;
- return self
- };
- Object.assign(weCropper.prototype, handle);
- weCropper.prototype.prepare = prepare;
- weCropper.prototype.observer = observer;
- weCropper.prototype.methods = methods;
- weCropper.prototype.cutt = cut;
- weCropper.prototype.update = update;
- return weCropper;
- })));
|