You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

255 line
6.4 KiB

  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _vue = require('vue');
  6. var _cropperjs = require('cropperjs');
  7. var _cropperjs2 = _interopRequireDefault(_cropperjs);
  8. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  9. function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
  10. var previewPropType = typeof window === 'undefined' ? [String, Array] : [String, Array, Element, NodeList];
  11. exports.default = {
  12. render: function render() {
  13. var crossorigin = this.crossorigin || undefined;
  14. return (0, _vue.h)('div', { style: this.containerStyle }, [(0, _vue.h)('img', {
  15. ref: 'img',
  16. src: this.src,
  17. alt: this.alt || 'image',
  18. style: [{ 'max-width': '100%' }, this.imgStyle],
  19. crossorigin: crossorigin
  20. })]);
  21. },
  22. props: {
  23. containerStyle: Object,
  24. src: {
  25. type: String,
  26. default: ''
  27. },
  28. alt: String,
  29. imgStyle: Object,
  30. viewMode: Number,
  31. dragMode: String,
  32. initialAspectRatio: Number,
  33. aspectRatio: Number,
  34. data: Object,
  35. preview: previewPropType,
  36. responsive: {
  37. type: Boolean,
  38. default: true
  39. },
  40. restore: {
  41. type: Boolean,
  42. default: true
  43. },
  44. checkCrossOrigin: {
  45. type: Boolean,
  46. default: true
  47. },
  48. checkOrientation: {
  49. type: Boolean,
  50. default: true
  51. },
  52. crossorigin: {
  53. type: String
  54. },
  55. modal: {
  56. type: Boolean,
  57. default: true
  58. },
  59. guides: {
  60. type: Boolean,
  61. default: true
  62. },
  63. center: {
  64. type: Boolean,
  65. default: true
  66. },
  67. highlight: {
  68. type: Boolean,
  69. default: true
  70. },
  71. background: {
  72. type: Boolean,
  73. default: true
  74. },
  75. autoCrop: {
  76. type: Boolean,
  77. default: true
  78. },
  79. autoCropArea: Number,
  80. movable: {
  81. type: Boolean,
  82. default: true
  83. },
  84. rotatable: {
  85. type: Boolean,
  86. default: true
  87. },
  88. scalable: {
  89. type: Boolean,
  90. default: true
  91. },
  92. zoomable: {
  93. type: Boolean,
  94. default: true
  95. },
  96. zoomOnTouch: {
  97. type: Boolean,
  98. default: true
  99. },
  100. zoomOnWheel: {
  101. type: Boolean,
  102. default: true
  103. },
  104. wheelZoomRatio: Number,
  105. cropBoxMovable: {
  106. type: Boolean,
  107. default: true
  108. },
  109. cropBoxResizable: {
  110. type: Boolean,
  111. default: true
  112. },
  113. toggleDragModeOnDblclick: {
  114. type: Boolean,
  115. default: true
  116. },
  117. minCanvasWidth: Number,
  118. minCanvasHeight: Number,
  119. minCropBoxWidth: Number,
  120. minCropBoxHeight: Number,
  121. minContainerWidth: Number,
  122. minContainerHeight: Number,
  123. ready: Function,
  124. cropstart: Function,
  125. cropmove: Function,
  126. cropend: Function,
  127. crop: Function,
  128. zoom: Function
  129. },
  130. mounted: function mounted() {
  131. var _$options$props = this.$options.props,
  132. containerStyle = _$options$props.containerStyle,
  133. src = _$options$props.src,
  134. alt = _$options$props.alt,
  135. imgStyle = _$options$props.imgStyle,
  136. data = _objectWithoutProperties(_$options$props, ['containerStyle', 'src', 'alt', 'imgStyle']);
  137. var props = {};
  138. for (var key in data) {
  139. if (this[key] !== undefined) {
  140. props[key] = this[key];
  141. }
  142. }
  143. this.cropper = new _cropperjs2.default(this.$refs.img, props);
  144. },
  145. methods: {
  146. reset: function reset() {
  147. return this.cropper.reset();
  148. },
  149. clear: function clear() {
  150. return this.cropper.clear();
  151. },
  152. initCrop: function initCrop() {
  153. return this.cropper.crop();
  154. },
  155. replace: function replace(url) {
  156. var onlyColorChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  157. return this.cropper.replace(url, onlyColorChanged);
  158. },
  159. enable: function enable() {
  160. return this.cropper.enable();
  161. },
  162. disable: function disable() {
  163. return this.cropper.disable();
  164. },
  165. destroy: function destroy() {
  166. return this.cropper.destroy();
  167. },
  168. move: function move(offsetX, offsetY) {
  169. return this.cropper.move(offsetX, offsetY);
  170. },
  171. moveTo: function moveTo(x) {
  172. var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
  173. return this.cropper.moveTo(x, y);
  174. },
  175. relativeZoom: function relativeZoom(ratio, _originalEvent) {
  176. return this.cropper.zoom(ratio, _originalEvent);
  177. },
  178. zoomTo: function zoomTo(ratio, _originalEvent) {
  179. return this.cropper.zoomTo(ratio, _originalEvent);
  180. },
  181. rotate: function rotate(degree) {
  182. return this.cropper.rotate(degree);
  183. },
  184. rotateTo: function rotateTo(degree) {
  185. return this.cropper.rotateTo(degree);
  186. },
  187. scaleX: function scaleX(_scaleX) {
  188. return this.cropper.scaleX(_scaleX);
  189. },
  190. scaleY: function scaleY(_scaleY) {
  191. return this.cropper.scaleY(_scaleY);
  192. },
  193. scale: function scale(scaleX) {
  194. var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;
  195. return this.cropper.scale(scaleX, scaleY);
  196. },
  197. getData: function getData() {
  198. var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  199. return this.cropper.getData(rounded);
  200. },
  201. setData: function setData(data) {
  202. return this.cropper.setData(data);
  203. },
  204. getContainerData: function getContainerData() {
  205. return this.cropper.getContainerData();
  206. },
  207. getImageData: function getImageData() {
  208. return this.cropper.getImageData();
  209. },
  210. getCanvasData: function getCanvasData() {
  211. return this.cropper.getCanvasData();
  212. },
  213. setCanvasData: function setCanvasData(data) {
  214. return this.cropper.setCanvasData(data);
  215. },
  216. getCropBoxData: function getCropBoxData() {
  217. return this.cropper.getCropBoxData();
  218. },
  219. setCropBoxData: function setCropBoxData(data) {
  220. return this.cropper.setCropBoxData(data);
  221. },
  222. getCroppedCanvas: function getCroppedCanvas() {
  223. var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  224. return this.cropper.getCroppedCanvas(options);
  225. },
  226. setAspectRatio: function setAspectRatio(aspectRatio) {
  227. return this.cropper.setAspectRatio(aspectRatio);
  228. },
  229. setDragMode: function setDragMode(mode) {
  230. return this.cropper.setDragMode(mode);
  231. }
  232. }
  233. };