cropit

').addClass(_constants.CLASS_NAMES.PREVIEW_IMAGE_CONTAINER).css({ 225 | position: 'absolute', 226 | overflow: 'hidden', 227 | left: 0, 228 | top: 0, 229 | width: '100%', 230 | height: '100%' 231 | }).append(this.$image); 232 | this.$preview.append(this.$imageContainer); 233 | 234 | if (this.options.imageBackground) { 235 | if (_jquery2['default'].isArray(this.options.imageBackgroundBorderWidth)) { 236 | this.bgBorderWidthArray = this.options.imageBackgroundBorderWidth; 237 | } else { 238 | this.bgBorderWidthArray = [0, 1, 2, 3].map(function () { 239 | return _this.options.imageBackgroundBorderWidth; 240 | }); 241 | } 242 | 243 | this.$bg = (0, _jquery2['default'])('').addClass(_constants.CLASS_NAMES.PREVIEW_BACKGROUND).attr('alt', '').css({ 244 | position: 'relative', 245 | left: this.bgBorderWidthArray[3], 246 | top: this.bgBorderWidthArray[0], 247 | transformOrigin: 'top left', 248 | webkitTransformOrigin: 'top left', 249 | willChange: 'transform' 250 | }); 251 | this.$bgContainer = (0, _jquery2['default'])('

').addClass(_constants.CLASS_NAMES.PREVIEW_BACKGROUND_CONTAINER).css({ 252 | position: 'absolute', 253 | zIndex: 0, 254 | top: -this.bgBorderWidthArray[0], 255 | right: -this.bgBorderWidthArray[1], 256 | bottom: -this.bgBorderWidthArray[2], 257 | left: -this.bgBorderWidthArray[3] 258 | }).append(this.$bg); 259 | if (this.bgBorderWidthArray[0] > 0) { 260 | this.$bgContainer.css('overflow', 'hidden'); 261 | } 262 | this.$preview.prepend(this.$bgContainer); 263 | } 264 | 265 | this.initialZoom = this.options.initialZoom; 266 | 267 | this.imageLoaded = false; 268 | 269 | this.moveContinue = false; 270 | 271 | this.zoomer = new _Zoomer2['default'](); 272 | 273 | if (this.options.allowDragNDrop) { 274 | _jquery2['default'].event.props.push('dataTransfer'); 275 | } 276 | 277 | this.bindListeners(); 278 | 279 | if (this.options.imageState && this.options.imageState.src) { 280 | this.loadImage(this.options.imageState.src); 281 | } 282 | } 283 | }, { 284 | key: 'bindListeners', 285 | value: function bindListeners() { 286 | this.$fileInput.on('change.cropit', this.onFileChange.bind(this)); 287 | this.$imageContainer.on(_constants.EVENTS.PREVIEW, this.onPreviewEvent.bind(this)); 288 | this.$zoomSlider.on(_constants.EVENTS.ZOOM_INPUT, this.onZoomSliderChange.bind(this)); 289 | 290 | if (this.options.allowDragNDrop) { 291 | this.$imageContainer.on('dragover.cropit dragleave.cropit', this.onDragOver.bind(this)); 292 | this.$imageContainer.on('drop.cropit', this.onDrop.bind(this)); 293 | } 294 | } 295 | }, { 296 | key: 'unbindListeners', 297 | value: function unbindListeners() { 298 | this.$fileInput.off('change.cropit'); 299 | this.$imageContainer.off(_constants.EVENTS.PREVIEW); 300 | this.$imageContainer.off('dragover.cropit dragleave.cropit drop.cropit'); 301 | this.$zoomSlider.off(_constants.EVENTS.ZOOM_INPUT); 302 | } 303 | }, { 304 | key: 'onFileChange', 305 | value: function onFileChange(e) { 306 | this.options.onFileChange(e); 307 | 308 | if (this.$fileInput.get(0).files) { 309 | this.loadFile(this.$fileInput.get(0).files[0]); 310 | } 311 | } 312 | }, { 313 | key: 'loadFile', 314 | value: function loadFile(file) { 315 | var fileReader = new FileReader(); 316 | if (file && file.type.match('image')) { 317 | fileReader.readAsDataURL(file); 318 | fileReader.onload = this.onFileReaderLoaded.bind(this); 319 | fileReader.onerror = this.onFileReaderError.bind(this); 320 | } else if (file) { 321 | this.onFileReaderError(); 322 | } 323 | } 324 | }, { 325 | key: 'onFileReaderLoaded', 326 | value: function onFileReaderLoaded(e) { 327 | this.loadImage(e.target.result); 328 | } 329 | }, { 330 | key: 'onFileReaderError', 331 | value: function onFileReaderError() { 332 | this.options.onFileReaderError(); 333 | } 334 | }, { 335 | key: 'onDragOver', 336 | value: function onDragOver(e) { 337 | e.preventDefault(); 338 | e.dataTransfer.dropEffect = 'copy'; 339 | this.$preview.toggleClass(_constants.CLASS_NAMES.DRAG_HOVERED, e.type === 'dragover'); 340 | } 341 | }, { 342 | key: 'onDrop', 343 | value: function onDrop(e) { 344 | var _this2 = this; 345 | 346 | e.preventDefault(); 347 | e.stopPropagation(); 348 | 349 | var files = Array.prototype.slice.call(e.dataTransfer.files, 0); 350 | files.some(function (file) { 351 | if (!file.type.match('image')) { 352 | return false; 353 | } 354 | 355 | _this2.loadFile(file); 356 | return true; 357 | }); 358 | 359 | this.$preview.removeClass(_constants.CLASS_NAMES.DRAG_HOVERED); 360 | } 361 | }, { 362 | key: 'loadImage', 363 | value: function loadImage(imageSrc) { 364 | var _this3 = this; 365 | 366 | if (!imageSrc) { 367 | return; 368 | } 369 | 370 | this.options.onImageLoading(); 371 | this.setImageLoadingClass(); 372 | 373 | if (imageSrc.indexOf('data') === 0) { 374 | this.preImage.src = imageSrc; 375 | } else { 376 | var xhr = new XMLHttpRequest(); 377 | xhr.onload = function (e) { 378 | if (e.target.status >= 300) { 379 | _this3.onImageError.call(_this3, _constants.ERRORS.IMAGE_FAILED_TO_LOAD); 380 | return; 381 | } 382 | 383 | _this3.loadFile(e.target.response); 384 | }; 385 | xhr.open('GET', imageSrc); 386 | xhr.responseType = 'blob'; 387 | xhr.send(); 388 | } 389 | } 390 | }, { 391 | key: 'onPreImageLoaded', 392 | value: function onPreImageLoaded() { 393 | if (this.shouldRejectImage({ 394 | imageWidth: this.preImage.width, 395 | imageHeight: this.preImage.height, 396 | previewSize: this.previewSize, 397 | maxZoom: this.options.maxZoom, 398 | exportZoom: this.options.exportZoom, 399 | smallImage: this.options.smallImage 400 | })) { 401 | this.onImageError(_constants.ERRORS.SMALL_IMAGE); 402 | if (this.image.src) { 403 | this.setImageLoadedClass(); 404 | } 405 | return; 406 | } 407 | 408 | this.image.src = this.preImage.src; 409 | } 410 | }, { 411 | key: 'onImageLoaded', 412 | value: function onImageLoaded() { 413 | this.rotation = 0; 414 | this.setupZoomer(this.options.imageState && this.options.imageState.zoom || this._initialZoom); 415 | if (this.options.imageState && this.options.imageState.offset) { 416 | this.offset = this.options.imageState.offset; 417 | } else { 418 | this.centerImage(); 419 | } 420 | 421 | this.options.imageState = {}; 422 | 423 | this.$image.attr('src', this.image.src); 424 | if (this.options.imageBackground) { 425 | this.$bg.attr('src', this.image.src); 426 | } 427 | 428 | this.setImageLoadedClass(); 429 | 430 | this.imageLoaded = true; 431 | 432 | this.options.onImageLoaded(); 433 | } 434 | }, { 435 | key: 'onImageError', 436 | value: function onImageError() { 437 | this.options.onImageError.apply(this, arguments); 438 | this.removeImageLoadingClass(); 439 | } 440 | }, { 441 | key: 'setImageLoadingClass', 442 | value: function setImageLoadingClass() { 443 | this.$preview.removeClass(_constants.CLASS_NAMES.IMAGE_LOADED).addClass(_constants.CLASS_NAMES.IMAGE_LOADING); 444 | } 445 | }, { 446 | key: 'setImageLoadedClass', 447 | value: function setImageLoadedClass() { 448 | this.$preview.removeClass(_constants.CLASS_NAMES.IMAGE_LOADING).addClass(_constants.CLASS_NAMES.IMAGE_LOADED); 449 | } 450 | }, { 451 | key: 'removeImageLoadingClass', 452 | value: function removeImageLoadingClass() { 453 | this.$preview.removeClass(_constants.CLASS_NAMES.IMAGE_LOADING); 454 | } 455 | }, { 456 | key: 'getEventPosition', 457 | value: function getEventPosition(e) { 458 | if (e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0]) { 459 | e = e.originalEvent.touches[0]; 460 | } 461 | if (e.clientX && e.clientY) { 462 | return { x: e.clientX, y: e.clientY }; 463 | } 464 | } 465 | }, { 466 | key: 'onPreviewEvent', 467 | value: function onPreviewEvent(e) { 468 | if (!this.imageLoaded) { 469 | return; 470 | } 471 | 472 | this.moveContinue = false; 473 | this.$imageContainer.off(_constants.EVENTS.PREVIEW_MOVE); 474 | 475 | if (e.type === 'mousedown' || e.type === 'touchstart') { 476 | this.origin = this.getEventPosition(e); 477 | this.moveContinue = true; 478 | this.$imageContainer.on(_constants.EVENTS.PREVIEW_MOVE, this.onMove.bind(this)); 479 | } else { 480 | (0, _jquery2['default'])(document.body).focus(); 481 | } 482 | 483 | e.stopPropagation(); 484 | return false; 485 | } 486 | }, { 487 | key: 'onMove', 488 | value: function onMove(e) { 489 | var eventPosition = this.getEventPosition(e); 490 | 491 | if (this.moveContinue && eventPosition) { 492 | this.offset = { 493 | x: this.offset.x + eventPosition.x - this.origin.x, 494 | y: this.offset.y + eventPosition.y - this.origin.y 495 | }; 496 | } 497 | 498 | this.origin = eventPosition; 499 | 500 | e.stopPropagation(); 501 | return false; 502 | } 503 | }, { 504 | key: 'fixOffset', 505 | value: function fixOffset(offset) { 506 | if (!this.imageLoaded) { 507 | return offset; 508 | } 509 | 510 | var ret = { x: offset.x, y: offset.y }; 511 | 512 | if (!this.options.freeMove) { 513 | if (this.imageWidth * this.zoom >= this.previewSize.width) { 514 | ret.x = Math.min(0, Math.max(ret.x, this.previewSize.width - this.imageWidth * this.zoom)); 515 | } else { 516 | ret.x = Math.max(0, Math.min(ret.x, this.previewSize.width - this.imageWidth * this.zoom)); 517 | } 518 | 519 | if (this.imageHeight * this.zoom >= this.previewSize.height) { 520 | ret.y = Math.min(0, Math.max(ret.y, this.previewSize.height - this.imageHeight * this.zoom)); 521 | } else { 522 | ret.y = Math.max(0, Math.min(ret.y, this.previewSize.height - this.imageHeight * this.zoom)); 523 | } 524 | } 525 | 526 | ret.x = (0, _utils.round)(ret.x); 527 | ret.y = (0, _utils.round)(ret.y); 528 | 529 | return ret; 530 | } 531 | }, { 532 | key: 'centerImage', 533 | value: function centerImage() { 534 | if (!this.image.width || !this.image.height || !this.zoom) { 535 | return; 536 | } 537 | 538 | this.offset = { 539 | x: (this.previewSize.width - this.imageWidth * this.zoom) / 2, 540 | y: (this.previewSize.height - this.imageHeight * this.zoom) / 2 541 | }; 542 | } 543 | }, { 544 | key: 'onZoomSliderChange', 545 | value: function onZoomSliderChange() { 546 | if (!this.imageLoaded) { 547 | return; 548 | } 549 | 550 | this.zoomSliderPos = Number(this.$zoomSlider.val()); 551 | var newZoom = this.zoomer.getZoom(this.zoomSliderPos); 552 | if (newZoom === this.zoom) { 553 | return; 554 | } 555 | this.zoom = newZoom; 556 | } 557 | }, { 558 | key: 'enableZoomSlider', 559 | value: function enableZoomSlider() { 560 | this.$zoomSlider.removeAttr('disabled'); 561 | this.options.onZoomEnabled(); 562 | } 563 | }, { 564 | key: 'disableZoomSlider', 565 | value: function disableZoomSlider() { 566 | this.$zoomSlider.attr('disabled', true); 567 | this.options.onZoomDisabled(); 568 | } 569 | }, { 570 | key: 'setupZoomer', 571 | value: function setupZoomer(zoom) { 572 | this.zoomer.setup({ 573 | imageSize: this.imageSize, 574 | previewSize: this.previewSize, 575 | exportZoom: this.options.exportZoom, 576 | maxZoom: this.options.maxZoom, 577 | minZoom: this.options.minZoom, 578 | smallImage: this.options.smallImage 579 | }); 580 | this.zoom = (0, _utils.exists)(zoom) ? zoom : this._zoom; 581 | 582 | if (this.isZoomable()) { 583 | this.enableZoomSlider(); 584 | } else { 585 | this.disableZoomSlider(); 586 | } 587 | } 588 | }, { 589 | key: 'fixZoom', 590 | value: function fixZoom(zoom) { 591 | return this.zoomer.fixZoom(zoom); 592 | } 593 | }, { 594 | key: 'isZoomable', 595 | value: function isZoomable() { 596 | return this.zoomer.isZoomable(); 597 | } 598 | }, { 599 | key: 'renderImage', 600 | value: function renderImage() { 601 | var transformation = '\n translate(' + this.rotatedOffset.x + 'px, ' + this.rotatedOffset.y + 'px)\n scale(' + this.zoom + ')\n rotate(' + this.rotation + 'deg)'; 602 | 603 | this.$image.css({ 604 | transform: transformation, 605 | webkitTransform: transformation 606 | }); 607 | if (this.options.imageBackground) { 608 | this.$bg.css({ 609 | transform: transformation, 610 | webkitTransform: transformation 611 | }); 612 | } 613 | } 614 | }, { 615 | key: 'rotateCW', 616 | value: function rotateCW() { 617 | if (this.shouldRejectImage({ 618 | imageWidth: this.image.height, 619 | imageHeight: this.image.width, 620 | previewSize: this.previewSize, 621 | maxZoom: this.options.maxZoom, 622 | exportZoom: this.options.exportZoom, 623 | smallImage: this.options.smallImage 624 | })) { 625 | this.rotation = (this.rotation + 180) % 360; 626 | } else { 627 | this.rotation = (this.rotation + 90) % 360; 628 | } 629 | } 630 | }, { 631 | key: 'rotateCCW', 632 | value: function rotateCCW() { 633 | if (this.shouldRejectImage({ 634 | imageWidth: this.image.height, 635 | imageHeight: this.image.width, 636 | previewSize: this.previewSize, 637 | maxZoom: this.options.maxZoom, 638 | exportZoom: this.options.exportZoom, 639 | smallImage: this.options.smallImage 640 | })) { 641 | this.rotation = (this.rotation + 180) % 360; 642 | } else { 643 | this.rotation = (this.rotation + 270) % 360; 644 | } 645 | } 646 | }, { 647 | key: 'shouldRejectImage', 648 | value: function shouldRejectImage(_ref) { 649 | var imageWidth = _ref.imageWidth; 650 | var imageHeight = _ref.imageHeight; 651 | var previewSize = _ref.previewSize; 652 | var maxZoom = _ref.maxZoom; 653 | var exportZoom = _ref.exportZoom; 654 | var smallImage = _ref.smallImage; 655 | 656 | if (smallImage !== 'reject') { 657 | return false; 658 | } 659 | 660 | return imageWidth * maxZoom < previewSize.width * exportZoom || imageHeight * maxZoom < previewSize.height * exportZoom; 661 | } 662 | }, { 663 | key: 'getCroppedImageData', 664 | value: function getCroppedImageData(exportOptions) { 665 | if (!this.image.src) { 666 | return; 667 | } 668 | 669 | var exportDefaults = { 670 | type: 'image/png', 671 | quality: 0.75, 672 | originalSize: false, 673 | fillBg: '#fff' 674 | }; 675 | exportOptions = _jquery2['default'].extend({}, exportDefaults, exportOptions); 676 | 677 | var exportZoom = exportOptions.originalSize ? 1 / this.zoom : this.options.exportZoom; 678 | 679 | var zoomedSize = { 680 | width: this.zoom * exportZoom * this.image.width, 681 | height: this.zoom * exportZoom * this.image.height 682 | }; 683 | 684 | var canvas = (0, _jquery2['default'])('