Shulou(Shulou.com)06/03 Report--

Editor to share with you how to upload pictures based on layui+cropper.js clipping function, I believe that most people do not understand, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

The cutting of the front end I know can be divided into two types: flash and canvas. Canvas is often used now.

In fact, the most essential principle of cropping: get the picture through the tool (not the way JS gets the DOM, for example, flash gets the picture, any operation on the picture, canvas is the same, put the picture on the canvas, arbitrary operation)

This article uses canvas this way, with the help of cropper.js to achieve picture clipping.

Because the front-end page uses the layui framework, when using cropper, it is best to embed the cropper package into layui as an extension of layui, which is easy and easy to embed. For details, please refer to the code I encapsulated below.

Note: the format of the cropped image in cropper is png by default. If you need to customize the format of the uploaded image, you can refer to the following code. If you don't need it, please ignore it directly.

Cropper modifies the format of uploaded images:

Var cas=imageEle.cropper ('getCroppedCanvas'); var base64url=cas.toDataURL (' image/jpeg'); console.log (base64url); / / generate the format of the base64 picture / / two ways to display the cropped picture $('.cavans') .html (cas) / / display the canvas element / / mode II $('.canvans') .attr ("src", base64url) in body

The packaged cropper source code is as follows, including cropper-jQuery 's

Specific code:

Cropper-css

/ *! * Cropper.js v1.4.3 * https://fengyuanchen.github.io/cropperjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2018-10-24T13:07:11.429Z * / .cropper-container {direction: ltr; font-size: 0; line-height: 0; position: relative;-ms-touch-action: none; touch-action: none;-webkit-user-select: none;-moz-user-select: none -ms-user-select: none; user-select: none;}. Cropper-container img {display: block; height: 100%; image-orientation: 0deg0; max-height: none! important; max-width: none! important; min-height: 0! important; min-width: 0! important; width: 100%;} .cropper-wrap-box,.cropper-canvas,.cropper-drag-box,.cropper-crop-box,.cropper-modal {bottom: 0 Left: 0; position: absolute; right: 0; top: 0;} .cropper-wrap-box,.cropper-canvas {overflow: hidden;} .cropper-drag-box {background-color: # fff; opacity: 0;} .cropper-modal {background-color: # 000; opacity: .5;} .cropper-view-box {display: block; height: 100%; outline-color: rgba (51,153,255,0.75) Outline: 1px solid # 39f; overflow: hidden; width: 100%;} .cropper-dashed {border: 0 dashed # eee; display: block; opacity: .5; position: absolute;} .cropper-dashed.dashed-h {border-bottom-width: 1px; border-top-width: 1px; height: calc; left: 0; top: calc (100% / 3); width: 100% Cropper-dashed.dashed-v {border-left-width: 1px; border-right-width: 1px; height: 100%; left: calc (100% / 3); top: 0; width: calc (100% / 3);} .cropper-center {display: block; height: 0; left: 50%; opacity: .75; position: absolute; top: 50%; width: 0 }. Cropper-center:before,.cropper-center:after {background-color: # eee; content:'; display: block; position: absolute;}. Cropper-center:before {height: 1px; left:-3px; top: 0; width: 7px;} .cropper-center:after {height: 7px; left: 0; top:-3px; width: 1px } .cropper-face,.cropper-line,.cropper-point {display: block; height: 100%; opacity: .1; position: absolute; width: 100%;} .cropper-face {background-color: # fff; left: 0; top: 0;} .cropper-line {background-color: # 39f;} .cropper-line.line-e {cursor: ew-resize; right:-3px; top: 0; width: 5px Cropper-line.line-n {cursor: ns-resize; height: 5px; left: 0; top:-3px;} .cropper-line.line-w {cursor: ew-resize; left:-3px; top: 0; width: 5px;} .cropper-line.line-s {bottom:-3px; cursor: ns-resize; height: 5px; left: 0;} .cropper-point {background-color: # 39f Height: 5px; opacity: .75; width: 5px;} .cropper-point.point-e {cursor: ew-resize; margin-top:-3px; right:-3px; top: 50%;} .cropper-point.point-n {cursor: ns-resize; left: 50%; margin-left:-3px; top:-3px;} .cropper-point.point-w {cursor: ew-resize; left:-3px Margin-top:-3px; top: 50%;} .cropper-point.point-s {bottom:-3px; cursor: Smurresize; left: 50%; margin-left:-3px;} .cropper-point.point-ne {cursor: nesw-resize; right:-3px; top:-3px;} .cropper-point.point-nw {cursor: nwse-resize; left:-3px; top:-3px Cropper-point.point-sw {bottom:-3px; cursor: nesw-resize; left:-3px;} .cropper-point.point-se {bottom:-3px; cursor: nwse-resize; height: 20px; opacity: 1; right:-3px; width: 20px;} @ media (min-width: 768px) {.cropper-point.point-se {height: 15px; width: 15px } @ media (min-width: 992px) {.cropper-point.point-se {.cropper-point.point-se {height: 10px; width: 10px;} @ media (min-width: 1200px) {.cropper-point.point-se {.cropper-point.point-se {.cropper-point.point-se; opacity: .75; width: 5px;}} .cropper-point.point-se:before {background-color: # 39f; bottom:-50% Content:''; display: block; height: 200%; opacity: 0; position: absolute; right:-50%; width: 200%;}. Cropper-invisible {opacity: 0;}. Cropper-bg {background-image: url (_ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');}. Cropper-hide {display: block; height: 0; position: absolute Width: 0;}. Cropper-hidden {display: none! important;}. Cropper-move {cursor: move;}. Cropper-crop {cursor: crosshair;}. Cropper-disabled .cropper-drag-box,.cropper-disabled. Cropper-face,.cropper-disabled .cropper-line,.cropper-disabled. Cropper-point {cursor: not-allowed;} cropper-css

Cropper-js

/ *! * Cropper.js v1.4.3 * https://fengyuanchen.github.io/cropperjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2018-10-24T13:07:15.032Z * / (function (global, factory) {typeof exports = = 'object' & & typeof module! =' undefined'? Module.exports = factory (): typeof define = = 'function' & & define.amd? Define (factory): global.layui & & layui.define? Layui.define (function (exports) {exports ('cropper', factory ())}): (global.Cropper = factory ());} (this, (function ()) {' use strict') Function _ typeof (obj) {if (typeof Symbol = = "function" & & typeof Symbol.iterator = "symbol") {_ typeof = function (obj) {return typeof obj;};} else {_ typeof = function (obj) {return obj & & typeof Symbol = "function" & & obj.constructor = = Symbol & & obj! = = Symbol.prototype? "symbol": typeof obj;};} return _ typeof (obj);} function _ classCallCheck (instance, Constructor) {if (! (instance instanceof Constructor)) {throw new TypeError ("Cannot call a class as a function");}} function _ defineProperties (target, props) {for (var I = 0; I

< props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } } function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } var IN_BROWSER = typeof window !== 'undefined'; var WINDOW = IN_BROWSER ? window : {}; var NAMESPACE = 'cropper'; // Actions var ACTION_ALL = 'all'; var ACTION_CROP = 'crop'; var ACTION_MOVE = 'move'; var ACTION_ZOOM = 'zoom'; var ACTION_EAST = 'e'; var ACTION_WEST = 'w'; var ACTION_SOUTH = 's'; var ACTION_NORTH = 'n'; var ACTION_NORTH_EAST = 'ne'; var ACTION_NORTH_WEST = 'nw'; var ACTION_SOUTH_EAST = 'se'; var ACTION_SOUTH_WEST = 'sw'; // Classes var CLASS_CROP = "".concat(NAMESPACE, "-crop"); var CLASS_DISABLED = "".concat(NAMESPACE, "-disabled"); var CLASS_HIDDEN = "".concat(NAMESPACE, "-hidden"); var CLASS_HIDE = "".concat(NAMESPACE, "-hide"); var CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible"); var CLASS_MODAL = "".concat(NAMESPACE, "-modal"); var CLASS_MOVE = "".concat(NAMESPACE, "-move"); // Data keys var DATA_ACTION = "".concat(NAMESPACE, "Action"); var DATA_PREVIEW = "".concat(NAMESPACE, "Preview"); // Drag modes var DRAG_MODE_CROP = 'crop'; var DRAG_MODE_MOVE = 'move'; var DRAG_MODE_NONE = 'none'; // Events var EVENT_CROP = 'crop'; var EVENT_CROP_END = 'cropend'; var EVENT_CROP_MOVE = 'cropmove'; var EVENT_CROP_START = 'cropstart'; var EVENT_DBLCLICK = 'dblclick'; var EVENT_POINTER_DOWN = WINDOW.PointerEvent ? 'pointerdown' : 'touchstart mousedown'; var EVENT_POINTER_MOVE = WINDOW.PointerEvent ? 'pointermove' : 'touchmove mousemove'; var EVENT_POINTER_UP = WINDOW.PointerEvent ? 'pointerup pointercancel' : 'touchend touchcancel mouseup'; var EVENT_READY = 'ready'; var EVENT_RESIZE = 'resize'; var EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll'; var EVENT_ZOOM = 'zoom'; // Mime types var MIME_TYPE_JPEG = 'image/jpeg'; // RegExps var REGEXP_ACTIONS = /^(?:e|w|s|n|se|sw|ne|nw|all|crop|move|zoom)$/; var REGEXP_DATA_URL = /^data:/; var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/; var REGEXP_TAG_NAME = /^(?:img|canvas)$/i; var DEFAULTS = { // Define the view mode of the cropper viewMode: 0, // 0, 1, 2, 3 // Define the dragging mode of the cropper dragMode: DRAG_MODE_CROP, // 'crop', 'move' or 'none' // Define the initial aspect ratio of the crop box initialAspectRatio: NaN, // Define the aspect ratio of the crop box aspectRatio: NaN, // An object with the previous cropping result data data: null, // A selector for adding extra containers to preview preview: '', // Re-render the cropper when resize the window responsive: true, // Restore the cropped area after resize the window restore: true, // Check if the current image is a cross-origin image checkCrossOrigin: false, // Check the current image's Exif Orientation information checkOrientation: true, // Show the black modal modal: true, // Show the dashed lines for guiding guides: true, // Show the center indicator for guiding center: true, // Show the white modal to highlight the crop box highlight: true, // Show the grid background background: true, // Enable to crop the image automatically when initialize autoCrop: true, // Define the percentage of automatic cropping area when initializes autoCropArea: 0.8, // Enable to move the image movable: true, // Enable to rotate the image rotatable: true, // Enable to scale the image scalable: true, // Enable to zoom the image zoomable: true, // Enable to zoom the image by dragging touch zoomOnTouch: true, // Enable to zoom the image by wheeling mouse zoomOnWheel: true, // Define zoom ratio when zoom the image by wheeling mouse wheelZoomRatio: 0.1, // Enable to move the crop box cropBoxMovable: true, // Enable to resize the crop box cropBoxResizable: true, // Toggle drag mode between "crop" and "move" when click twice on the cropper toggleDragModeOnDblclick: true, // Size limitation minCanvasWidth: 0, minCanvasHeight: 0, minCropBoxWidth: 0, minCropBoxHeight: 0, minContainerWidth: 200, minContainerHeight: 100, // Shortcuts of events ready: null, cropstart: null, cropmove: null, cropend: null, crop: null, zoom: null }; var TEMPLATE = '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; /** * Check if the given value is not a number. */ var isNaN = Number.isNaN || WINDOW.isNaN; /** * Check if the given value is a number. * @param {*} value - The value to check. * @returns {boolean} Returns `true` if the given value is a number, else `false`. */ function isNumber(value) { return typeof value === 'number' && !isNaN(value); } /** * Check if the given value is undefined. * @param {*} value - The value to check. * @returns {boolean} Returns `true` if the given value is undefined, else `false`. */ function isUndefined(value) { return typeof value === 'undefined'; } /** * Check if the given value is an object. * @param {*} value - The value to check. * @returns {boolean} Returns `true` if the given value is an object, else `false`. */ function isObject(value) { return _typeof(value) === 'object' && value !== null; } var hasOwnProperty = Object.prototype.hasOwnProperty; /** * Check if the given value is a plain object. * @param {*} value - The value to check. * @returns {boolean} Returns `true` if the given value is a plain object, else `false`. */ function isPlainObject(value) { if (!isObject(value)) { return false; } try { var _constructor = value.constructor; var prototype = _constructor.prototype; return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf'); } catch (e) { return false; } } /** * Check if the given value is a function. * @param {*} value - The value to check. * @returns {boolean} Returns `true` if the given value is a function, else `false`. */ function isFunction(value) { return typeof value === 'function'; } /** * Iterate the given data. * @param {*} data - The data to iterate. * @param {Function} callback - The process function for each element. * @returns {*} The original data. */ function forEach(data, callback) { if (data && isFunction(callback)) { if (Array.isArray(data) || isNumber(data.length) /* array-like */ ) { var length = data.length; var i; for (i = 0; i < length; i += 1) { if (callback.call(data, data[i], i, data) === false) { break; } } } else if (isObject(data)) { Object.keys(data).forEach(function (key) { callback.call(data, data[key], key, data); }); } } return data; } /** * Extend the given object. * @param {*} obj - The object to be extended. * @param {*} args - The rest objects which will be merged to the first object. * @returns {Object} The extended object. */ var assign = Object.assign || function assign(obj) { for (var _len = arguments.length, args = new Array(_len >

1? _ len-1: 0), _ key = 1; _ key

< _len; _key++) { args[_key - 1] = arguments[_key]; } if (isObject(obj) && args.length >

0) {args.forEach (function (arg) {if (isObject (arg)) {Object.keys (arg) .forEach (function (key) {obj [key] = arg [key];});}});} return obj;} Var REGEXP_DECIMALS = /\.\ d * (?: 0 | 9) {12}\ d Normalize decimal number. * Check out {@ link http://0.30000000000000004.com/} * @ param {number} value-The value to normalize. * @ param {number} [times=100000000000]-The times for normalizing. * @ returns {number} Returns the normalized number. * / function normalizeDecimalNumber (value) {var times = arguments.length > 1 & & arguments [1]! = = undefined? Arguments [1]: 100000000000000; return REGEXP_DECIMALS.test (value)? Math.round (value * times) / times: value;} var REGEXP_SUFFIX = / ^ (?: width | height | left | top | marginLeft | marginTop) $/; / * Apply styles to the given element. * @ param {Element} element-The target element. * @ param {Object} styles-The styles for applying. * / function setStyle (element, styles) {var style = element.style; forEach (styles, function (value, property) {if (REGEXP_SUFFIX.test (property) & & isNumber (value)) {value + = 'px';} style [property] = value;});} / * * Check if the given element has a special class. * @ param {Element} element-The element to check. * @ param {string} value-The class to search. * @ returns {boolean} Returns `true` if the special class was found. * / function hasClass (element, value) {return element.classList? Element.classList.contains (value): element.className.indexOf (value) >-1;} / * * Add classes to the given element. * @ param {Element} element-The target element. * @ param {string} value-The classes to be added. * / function addClass (element, value) {if (! value) {return;} if (isNumber (element.length)) {forEach (element, function (elem) {addClass (elem, value);}); return;} if (element.classList) {element.classList.add (value) Return;} var className = element.className.trim (); if (! className) {element.className = value;} else if (className.indexOf (value)

< 0) { element.className = "".concat(className, " ").concat(value); } } /** * Remove classes from the given element. * @param {Element} element - The target element. * @param {string} value - The classes to be removed. */ function removeClass(element, value) { if (!value) { return; } if (isNumber(element.length)) { forEach(element, function (elem) { removeClass(elem, value); }); return; } if (element.classList) { element.classList.remove(value); return; } if (element.className.indexOf(value) >

< _len2; _key2++) { args[_key2] = arguments[_key2]; } listener.apply(element, args); }; if (!listeners[event]) { listeners[event] = {}; } if (listeners[event][listener]) { element.removeEventListener(event, listeners[event][listener], options); } listeners[event][listener] = _handler; element.listeners = listeners; } element.addEventListener(event, _handler, options); }); } /** * Dispatch event on the target element. * @param {Element} element - The event target. * @param {string} type - The event type(s). * @param {Object} data - The additional event data. * @returns {boolean} Indicate if the event is default prevented or not. */ function dispatchEvent(element, type, data) { var event; // Event and CustomEvent on IE9-11 are global objects, not constructors if (isFunction(Event) && isFunction(CustomEvent)) { event = new CustomEvent(type, { detail: data, bubbles: true, cancelable: true }); } else { event = document.createEvent('CustomEvent'); event.initCustomEvent(type, true, true, data); } return element.dispatchEvent(event); } /** * Get the offset base on the document. * @param {Element} element - The target element. * @returns {Object} The offset data. */ function getOffset(element) { var box = element.getBoundingClientRect(); return { left: box.left + (window.pageXOffset - document.documentElement.clientLeft), top: box.top + (window.pageYOffset - document.documentElement.clientTop) }; } var location = _WINDOW.location; var REGEXP_ORIGINS = /^(https?:)\/\/([^:/?#]+):?(\d*)/i; /** * Check if the given URL is a cross origin URL. * @param {string} url - The target URL. * @returns {boolean} Returns `true` if the given URL is a cross origin URL, else `false`. */ function isCrossOriginURL(url) { var parts = url.match(REGEXP_ORIGINS); return parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port); } /** * Add timestamp to the given URL. * @param {string} url - The target URL. * @returns {string} The result URL. */ function addTimestamp(url) { var timestamp = "timestamp=".concat(new Date().getTime()); return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp; } /** * Get transforms base on the given object. * @param {Object} obj - The target object. * @returns {string} A string contains transform values. */ function getTransforms(_ref) { var rotate = _ref.rotate, scaleX = _ref.scaleX, scaleY = _ref.scaleY, translateX = _ref.translateX, translateY = _ref.translateY; var values = []; if (isNumber(translateX) && translateX !== 0) { values.push("translateX(".concat(translateX, "px)")); } if (isNumber(translateY) && translateY !== 0) { values.push("translateY(".concat(translateY, "px)")); } // Rotate should come first before scale to match orientation transform if (isNumber(rotate) && rotate !== 0) { values.push("rotate(".concat(rotate, "deg)")); } if (isNumber(scaleX) && scaleX !== 1) { values.push("scaleX(".concat(scaleX, ")")); } if (isNumber(scaleY) && scaleY !== 1) { values.push("scaleY(".concat(scaleY, ")")); } var transform = values.length ? values.join(' ') : 'none'; return { WebkitTransform: transform, msTransform: transform, transform: transform }; } /** * Get the max ratio of a group of pointers. * @param {string} pointers - The target pointers. * @returns {number} The result ratio. */ function getMaxZoomRatio(pointers) { var pointers2 = assign({}, pointers); var ratios = []; forEach(pointers, function (pointer, pointerId) { delete pointers2[pointerId]; forEach(pointers2, function (pointer2) { var x1 = Math.abs(pointer.startX - pointer2.startX); var y1 = Math.abs(pointer.startY - pointer2.startY); var x2 = Math.abs(pointer.endX - pointer2.endX); var y2 = Math.abs(pointer.endY - pointer2.endY); var z1 = Math.sqrt(x1 * x1 + y1 * y1); var z2 = Math.sqrt(x2 * x2 + y2 * y2); var ratio = (z2 - z1) / z1; ratios.push(ratio); }); }); ratios.sort(function (a, b) { return Math.abs(a) < Math.abs(b); }); return ratios[0]; } /** * Get a pointer from an event object. * @param {Object} event - The target event object. * @param {boolean} endOnly - Indicates if only returns the end point coordinate or not. * @returns {Object} The result pointer contains start and/or end point coordinates. */ function getPointer(_ref2, endOnly) { var pageX = _ref2.pageX, pageY = _ref2.pageY; var end = { endX: pageX, endY: pageY }; return endOnly ? end : assign({ startX: pageX, startY: pageY }, end); } /** * Get the center point coordinate of a group of pointers. * @param {Object} pointers - The target pointers. * @returns {Object} The center point coordinate. */ function getPointersCenter(pointers) { var pageX = 0; var pageY = 0; var count = 0; forEach(pointers, function (_ref3) { var startX = _ref3.startX, startY = _ref3.startY; pageX += startX; pageY += startY; count += 1; }); pageX /= count; pageY /= count; return { pageX: pageX, pageY: pageY }; } /** * Check if the given value is a finite number. */ var isFinite = Number.isFinite || WINDOW.isFinite; /** * Get the max sizes in a rectangle under the given aspect ratio. * @param {Object} data - The original sizes. * @param {string} [type='contain'] - The adjust type. * @returns {Object} The result sizes. */ function getAdjustedSizes(_ref4) // or 'cover' { var aspectRatio = _ref4.aspectRatio, height = _ref4.height, width = _ref4.width; var type = arguments.length >

1 & & arguments [1]! = = undefined? Arguments [1]: 'contain'; var isValidNumber = function isValidNumber (value) {return isFinite (value) & & value > 0;}; if (isValidNumber (width) & & isValidNumber (height)) {var adjustedWidth = height * aspectRatio; if (type = =' contain' & & adjustedWidth > width | type = = 'cover' & & adjustedWidth

< width) { height = width / aspectRatio; } else { width = height * aspectRatio; } } else if (isValidNumber(width)) { height = width / aspectRatio; } else if (isValidNumber(height)) { width = height * aspectRatio; } return { width: width, height: height }; } /** * Get the new sizes of a rectangle after rotated. * @param {Object} data - The original sizes. * @returns {Object} The result sizes. */ function getRotatedSizes(_ref5) { var width = _ref5.width, height = _ref5.height, degree = _ref5.degree; degree = Math.abs(degree) % 180; if (degree === 90) { return { width: height, height: width }; } var arc = degree % 90 * Math.PI / 180; var sinArc = Math.sin(arc); var cosArc = Math.cos(arc); var newWidth = width * cosArc + height * sinArc; var newHeight = width * sinArc + height * cosArc; return degree >

90? {width: newHeight, height: newWidth}: {width: newWidth, height: newHeight};} / * * Get a canvas which drew the given image. * @ param {HTMLImageElement} image-The image for drawing. * @ param {Object} imageData-The image data. * @ param {Object} canvasData-The canvas data. * @ param {Object} options-The options. * @ returns {HTMLCanvasElement} The result canvas. * / function getSourceCanvas (image, _ ref6, _ ref7, _ ref8) {var imageAspectRatio = _ ref6.aspectRatio, imageNaturalWidth = _ ref6.naturalWidth, imageNaturalHeight = _ ref6.naturalHeight, _ ref6 $rotate = _ ref6.rotate, rotate = _ ref6 $rotate = = void 0? 0: _ ref6 $rotate, _ ref6 $scaleX = _ ref6.scaleX, scaleX = _ ref6 $scaleX = void 0? 1: _ ref6 $scaleX _ ref6 $scaleY = _ ref6.scaleY, scaleY = _ ref6 $scaleY = void 0? 1: _ ref6 $scaleY Var aspectRatio = _ ref7.aspectRatio, naturalWidth = _ ref7.naturalWidth, naturalHeight = _ ref7.naturalHeight; var _ ref8 $fillColor = _ ref8.fillColor, fillColor = _ ref8 $fillColor = void 0? 'transparent': _ ref8 $fillColor, _ ref8 $imageSmoothingE = _ ref8.imageSmoothingEnabled, imageSmoothingEnabled = _ ref8 $imageSmoothingE = void 0? True: _ ref8 $imageSmoothingE, _ ref8 $imageSmoothingQ = _ ref8.imageSmoothingQuality, imageSmoothingQuality = _ ref8 $imageSmoothingQ = void 0? 'low': _ ref8 $imageSmoothingQ, _ ref8 $maxWidth = _ ref8.maxWidth, maxWidth = _ ref8 $maxWidth = void 0? Infinity: _ ref8 $maxWidth, _ ref8 $maxHeight = _ ref8.maxHeight, maxHeight = _ ref8 $maxHeight = void 0? Infinity: _ ref8 $maxHeight, _ ref8 $minWidth = _ ref8.minWidth, minWidth = _ ref8 $minWidth = void 0? 0: _ ref8 $minWidth, _ ref8 $minHeight = _ ref8.minHeight, minHeight = _ ref8 $minHeight = = void 0? 0: _ ref8 $minHeight; var canvas = document.createElement ('canvas'); var context = canvas.getContext (' 2d') Var maxSizes = getAdjustedSizes ({aspectRatio: aspectRatio, width: maxWidth, height: maxHeight}); var minSizes = getAdjustedSizes ({aspectRatio: aspectRatio, width: minWidth, height: minHeight}, 'cover'); var width = Math.min (maxSizes.width, Math.max (minSizes.width, naturalWidth)) Var height = Math.min (maxSizes.height, Math.max (minSizes.height, naturalHeight)); / / Note: should always use image's natural sizes for drawing as / / imageData.naturalWidth = = canvasData.naturalHeight when rotate% 180 = = 90 var destMaxSizes = getAdjustedSizes ({aspectRatio: imageAspectRatio, width: maxWidth, height: maxHeight}) Var destMinSizes = getAdjustedSizes ({aspectRatio: imageAspectRatio, width: minWidth, height: minHeight}, 'cover'); var destWidth = Math.min (destMaxSizes.width, Math.max (destMinSizes.width, imageNaturalWidth)); var destHeight = Math.min (destMaxSizes.height, Math.max (destMinSizes.height, imageNaturalHeight)); var params = [- destWidth / 2,-destHeight / 2, destWidth, destHeight] Canvas.width = normalizeDecimalNumber (width); canvas.height = normalizeDecimalNumber (height); context.fillStyle = fillColor; context.fillRect (0,0, width, height); context.save (); context.translate (width / 2, height / 2); context.rotate (rotate * Math.PI / 180); context.scale (scaleX, scaleY); context.imageSmoothingEnabled = imageSmoothingEnabled; context.imageSmoothingQuality = imageSmoothingQuality Context.drawImage.apply (context, [image] .concat (_ toConsumableArray (params.map (function (param) {return Math.floor (normalizeDecimalNumber (param));}); context.restore (); return canvas;} var fromCharCode = String.fromCharCode; / * Get string from char code in data view. * @ param {DataView} dataView-The data view for read. * @ param {number} start-The start index. * @ param {number} length-The read length. * @ returns {string} The read result. * / function getStringFromCharCode (dataView, start, length) {var str =''; var i; length + = start; for (I = start; I

< length; i += 1) { str += fromCharCode(dataView.getUint8(i)); } return str; } var REGEXP_DATA_URL_HEAD = /^data:.*,/; /** * Transform Data URL to array buffer. * @param {string} dataURL - The Data URL to transform. * @returns {ArrayBuffer} The result array buffer. */ function dataURLToArrayBuffer(dataURL) { var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, ''); var binary = atob(base64); var arrayBuffer = new ArrayBuffer(binary.length); var uint8 = new Uint8Array(arrayBuffer); forEach(uint8, function (value, i) { uint8[i] = binary.charCodeAt(i); }); return arrayBuffer; } /** * Transform array buffer to Data URL. * @param {ArrayBuffer} arrayBuffer - The array buffer to transform. * @param {string} mimeType - The mime type of the Data URL. * @returns {string} The result Data URL. */ function arrayBufferToDataURL(arrayBuffer, mimeType) { var chunks = []; var chunkSize = 8192; var uint8 = new Uint8Array(arrayBuffer); while (uint8.length >

0) {chunks.push (fromCharCode.apply (void 0, _ toConsumableArray (uint8.subarray (0, chunkSize); uint8 = uint8.subarray (chunkSize);} return _ "data:" .concat (mimeType, "; base64,") .concat (btoa (chunks.join (');} / * * Get orientation value from given array buffer. * @ param {ArrayBuffer} arrayBuffer-The array buffer to read. * @ returns {number} The read orientation value. * / function resetAndGetOrientation (arrayBuffer) {var dataView = new DataView (arrayBuffer); var orientation; / / Ignores range error when the image does not have correct Exif information try {var littleEndian; var app1Start; var ifdStart / / Only handle JPEG image (start by 0xFFD8) if (dataView.getUint8 (0) = 0xFF & & dataView.getUint8 (1) = = 0xD8) {var length = dataView.byteLength; var offset = 2; while (offset + 1)

< length) { if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) { app1Start = offset; break; } offset += 1; } } if (app1Start) { var exifIDCode = app1Start + 4; var tiffOffset = app1Start + 10; if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') { var endianness = dataView.getUint16(tiffOffset); littleEndian = endianness === 0x4949; if (littleEndian || endianness === 0x4D4D /* bigEndian */ ) { if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) { var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian); if (firstIFDOffset >

= 0x00000008) {ifdStart = tiffOffset + firstIFDOffset;}} if (ifdStart) {var _ length = dataView.getUint16 (ifdStart, littleEndian); var _ offset Var i; for (I = 0; I)

< _length; i += 1) { _offset = ifdStart + i * 12 + 2; if (dataView.getUint16(_offset, littleEndian) === 0x0112 /* Orientation */ ) { // 8 is the offset of the current tag's value _offset += 8; // Get the original orientation value orientation = dataView.getUint16(_offset, littleEndian); // Override the orientation with its default value dataView.setUint16(_offset, 1, littleEndian); break; } } } } catch (e) { orientation = 1; } return orientation; } /** * Parse Exif Orientation value. * @param {number} orientation - The orientation to parse. * @returns {Object} The parsed result. */ function parseOrientation(orientation) { var rotate = 0; var scaleX = 1; var scaleY = 1; switch (orientation) { // Flip horizontal case 2: scaleX = -1; break; // Rotate left 180° case 3: rotate = -180; break; // Flip vertical case 4: scaleY = -1; break; // Flip vertical and rotate right 90° case 5: rotate = 90; scaleY = -1; break; // Rotate right 90° case 6: rotate = 90; break; // Flip horizontal and rotate right 90° case 7: rotate = 90; scaleX = -1; break; // Rotate left 90° case 8: rotate = -90; break; default: } return { rotate: rotate, scaleX: scaleX, scaleY: scaleY }; } var render = { render: function render() { this.initContainer(); this.initCanvas(); this.initCropBox(); this.renderCanvas(); if (this.cropped) { this.renderCropBox(); } }, initContainer: function initContainer() { var element = this.element, options = this.options, container = this.container, cropper = this.cropper; addClass(cropper, CLASS_HIDDEN); removeClass(element, CLASS_HIDDEN); var containerData = { width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200), height: Math.max(container.offsetHeight, Number(options.minContainerHeight) || 100) }; this.containerData = containerData; setStyle(cropper, { width: containerData.width, height: containerData.height }); addClass(element, CLASS_HIDDEN); removeClass(cropper, CLASS_HIDDEN); }, // Canvas (image wrapper) initCanvas: function initCanvas() { var containerData = this.containerData, imageData = this.imageData; var viewMode = this.options.viewMode; var rotated = Math.abs(imageData.rotate) % 180 === 90; var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth; var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight; var aspectRatio = naturalWidth / naturalHeight; var canvasWidth = containerData.width; var canvasHeight = containerData.height; if (containerData.height * aspectRatio >

< canvasData.minWidth) { canvasData.left = canvasData.oldLeft; } if (canvasData.height >

CanvasData.maxHeight | | canvasData.height

< canvasData.minHeight) { canvasData.top = canvasData.oldTop; } canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth); canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight); this.limitCanvas(false, true); canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft); canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop); canvasData.oldLeft = canvasData.left; canvasData.oldTop = canvasData.top; setStyle(this.canvas, assign({ width: canvasData.width, height: canvasData.height }, getTransforms({ translateX: canvasData.left, translateY: canvasData.top }))); this.renderImage(changed); if (this.cropped && this.limited) { this.limitCropBox(true, true); } }, renderImage: function renderImage(changed) { var canvasData = this.canvasData, imageData = this.imageData; var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth); var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight); assign(imageData, { width: width, height: height, left: (canvasData.width - width) / 2, top: (canvasData.height - height) / 2 }); setStyle(this.image, assign({ width: imageData.width, height: imageData.height }, getTransforms(assign({ translateX: imageData.left, translateY: imageData.top }, imageData)))); if (changed) { this.output(); } }, initCropBox: function initCropBox() { var options = this.options, canvasData = this.canvasData; var aspectRatio = options.aspectRatio || options.initialAspectRatio; var autoCropArea = Number(options.autoCropArea) || 0.8; var cropBoxData = { width: canvasData.width, height: canvasData.height }; if (aspectRatio) { if (canvasData.height * aspectRatio >

CanvasData.width) {cropBoxData.height = cropBoxData.width / aspectRatio;} else {cropBoxData.width = cropBoxData.height * aspectRatio;}} this.cropBoxData = cropBoxData; this.limitCropBox (true, true) / / Initialize auto crop area cropBoxData.width = Math.min (Math.max (cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth); cropBoxData.height = Math.min (Math.max (cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight); / / The width/height of auto crop area must large than "minWidth/Height" cropBoxData.width = Math.max (cropBoxData.minWidth, cropBoxData.width * autoCropArea) CropBoxData.height = Math.max (cropBoxData.minHeight, cropBoxData.height * autoCropArea); cropBoxData.left = canvasData.left + (canvasData.width-cropBoxData.width) / 2; cropBoxData.top = canvasData.top + (canvasData.height-cropBoxData.height) / 2; cropBoxData.oldLeft = cropBoxData.left; cropBoxData.oldTop = cropBoxData.top; this.initialCropBoxData = assign ({}, cropBoxData) }, limitCropBox: function limitCropBox (sizeLimited, positionLimited) {var options = this.options, containerData = this.containerData, canvasData = this.canvasData, cropBoxData = this.cropBoxData, limited = this.limited; var aspectRatio = options.aspectRatio If (sizeLimited) {var minCropBoxWidth = Number (options.minCropBoxWidth) | | 0; var minCropBoxHeight = Number (options.minCropBoxHeight) | | 0; var maxCropBoxWidth = limited? Math.min (containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width-canvasData.left): containerData.width; var maxCropBoxHeight = limited? Math.min (containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height-canvasData.top): containerData.height; / / The min/maxCropBoxWidth/Height must be less than container's width/height minCropBoxWidth = Math.min (minCropBoxWidth, containerData.width); minCropBoxHeight = Math.min (minCropBoxHeight, containerData.height) If (aspectRatio) {if (minCropBoxWidth & & minCropBoxHeight) {if (minCropBoxHeight * aspectRatio > minCropBoxWidth) {minCropBoxHeight = minCropBoxWidth / aspectRatio;} else {minCropBoxWidth = minCropBoxHeight * aspectRatio }} else if (minCropBoxWidth) {minCropBoxHeight = minCropBoxWidth / aspectRatio;} else if (minCropBoxHeight) {minCropBoxWidth = minCropBoxHeight * aspectRatio } if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) {maxCropBoxHeight = maxCropBoxWidth / aspectRatio;} else {maxCropBoxWidth = maxCropBoxHeight * aspectRatio }} / / The minWidth/Height must be less than maxWidth/Height cropBoxData.minWidth = Math.min (minCropBoxWidth, maxCropBoxWidth); cropBoxData.minHeight = Math.min (minCropBoxHeight, maxCropBoxHeight); cropBoxData.maxWidth = maxCropBoxWidth; cropBoxData.maxHeight = maxCropBoxHeight } if (positionLimited) {if (limited) {cropBoxData.minLeft = Math.max (0, canvasData.left); cropBoxData.minTop = Math.max (0, canvasData.top); cropBoxData.maxLeft = Math.min (containerData.width, canvasData.left + canvasData.width)-cropBoxData.width CropBoxData.maxTop = Math.min (containerData.height, canvasData.top + canvasData.height)-cropBoxData.height;} else {cropBoxData.minLeft = 0; cropBoxData.minTop = 0; cropBoxData.maxLeft = containerData.width-cropBoxData.width; cropBoxData.maxTop = containerData.height-cropBoxData.height }, renderCropBox: function renderCropBox () {var options = this.options, containerData = this.containerData, cropBoxData = this.cropBoxData; if (cropBoxData.width > cropBoxData.maxWidth | | cropBoxData.width

< cropBoxData.minWidth) { cropBoxData.left = cropBoxData.oldLeft; } if (cropBoxData.height >

CropBoxData.maxHeight | | cropBoxData.height

< cropBoxData.minHeight) { cropBoxData.top = cropBoxData.oldTop; } cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth); cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight); this.limitCropBox(false, true); cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft); cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop); cropBoxData.oldLeft = cropBoxData.left; cropBoxData.oldTop = cropBoxData.top; if (options.movable && options.cropBoxMovable) { // Turn to move the canvas when the crop box is equal to the container setData(this.face, DATA_ACTION, cropBoxData.width >

< minLeft) { range.x = minLeft - left; } break; case ACTION_NORTH: if (top + range.y < minTop) { range.y = minTop - top; } break; case ACTION_SOUTH: if (bottom + range.y >

MaxHeight) {range.y = maxHeight-bottom;} break; default:}} Switch (action) {/ / Move crop box case ACTION_ALL: left + = range.x; top + = range.y; break / / Resize crop box case ACTION_EAST: if (range.x > = 0 & & (right > = maxWidth | | aspectRatio & & (top = maxHeight)) {renderable = false; break;} check (ACTION_EAST) Width + = range.x; if (width

< 0) { action = ACTION_WEST; width = -width; left -= width; } if (aspectRatio) { height = width / aspectRatio; top += (cropBoxData.height - height) / 2; } break; case ACTION_NORTH: if (range.y = 0) { if (bottom < maxHeight) { height += range.y; } } else { height += range.y; } } if (width < 0 && height < 0) { action = ACTION_NORTH_WEST; height = -height; width = -width; top -= height; left -= width; } else if (width < 0) { action = ACTION_SOUTH_WEST; width = -width; left -= width; } else if (height < 0) { action = ACTION_NORTH_EAST; height = -height; top -= height; } break; // Move canvas case ACTION_MOVE: this.move(range.x, range.y); renderable = false; break; // Zoom canvas case ACTION_ZOOM: this.zoom(getMaxZoomRatio(pointers), e); renderable = false; break; // Create crop box case ACTION_CROP: if (!range.x || !range.y) { renderable = false; break; } offset = getOffset(this.cropper); left = pointer.startX - offset.left; top = pointer.startY - offset.top; width = cropBoxData.minWidth; height = cropBoxData.minHeight; if (range.x >

0) {action = range.y > 0? ACTION_SOUTH_EAST: ACTION_NORTH_EAST;} else if (range.x

< 0) { left -= width; action = range.y >

0? ACTION_SOUTH_WEST: ACTION_NORTH_WEST;} if (range.y

< 0) { top -= height; } // Show the crop box if is hidden if (!this.cropped) { removeClass(this.cropBox, CLASS_HIDDEN); this.cropped = true; if (this.limited) { this.limitCropBox(true, true); } } break; default: } if (renderable) { cropBoxData.width = width; cropBoxData.height = height; cropBoxData.left = left; cropBoxData.top = top; this.action = action; this.renderCropBox(); } // Override forEach(pointers, function (p) { p.startX = p.endX; p.startY = p.endY; }); } }; var methods = { // Show the crop box manually crop: function crop() { if (this.ready && !this.cropped && !this.disabled) { this.cropped = true; this.limitCropBox(true, true); if (this.options.modal) { addClass(this.dragBox, CLASS_MODAL); } removeClass(this.cropBox, CLASS_HIDDEN); this.setCropBoxData(this.initialCropBoxData); } return this; }, // Reset the image and crop box to their initial states reset: function reset() { if (this.ready && !this.disabled) { this.imageData = assign({}, this.initialImageData); this.canvasData = assign({}, this.initialCanvasData); this.cropBoxData = assign({}, this.initialCropBoxData); this.renderCanvas(); if (this.cropped) { this.renderCropBox(); } } return this; }, // Clear the crop box clear: function clear() { if (this.cropped && !this.disabled) { assign(this.cropBoxData, { left: 0, top: 0, width: 0, height: 0 }); this.cropped = false; this.renderCropBox(); this.limitCanvas(true, true); // Render canvas after crop box rendered this.renderCanvas(); removeClass(this.dragBox, CLASS_MODAL); addClass(this.cropBox, CLASS_HIDDEN); } return this; }, /** * Replace the image's src and rebuild the cropper * @param {string} url - The new URL. * @param {boolean} [hasSameSize] - Indicate if the new image has the same size as the old one. * @returns {Cropper} this */ replace: function replace(url) { var hasSameSize = arguments.length >

1 & & arguments [1]! = = undefined? Arguments [1]: false; if (! this.disabled & & url) {if (this.isImg) {this.element.src = url;} if (hasSameSize) {this.url = url; this.image.src = url If (this.ready) {this.viewBoxImage.src = url; forEach (this.previews, function (element) {element.getElementsByTagName ('img') [0] .src = url;}) }} else {if (this.isImg) {this.replaced = true;} this.options.data = null; this.uncreate (); this.load (url) }} return this;}, / / Enable (unfreeze) the cropper enable: function enable () {if (this.ready & & this.disabled) {this.disabled = false; removeClass (this.cropper, CLASS_DISABLED);} return this }, / / Disable (freeze) the cropper disable: function disable () {if (this.ready & &! this.disabled) {this.disabled = true; addClass (this.cropper, CLASS_DISABLED);} return this }, / * Destroy the cropper and remove the instance from the image * @ returns {Cropper} this * / destroy: function destroy () {var element = this.element; if (! element [NAMESPACE]) {return this;} element [NAMESPACE] = undefined If (this.isImg & & this.replaced) {element.src = this.originalUrl;} this.uncreate (); return this;}, / * Move the canvas with relative offsets * @ param {number} offsetX-The relative offset distance on the x-axis. * @ param {number} [offsetY=offsetX]-The relative offset distance on the y-axis. * @ returns {Cropper} this * / move: function move (offsetX) {var offsetY = arguments.length > 1 & & arguments [1]! = undefined? Arguments [1]: offsetX; var _ this$canvasData = this.canvasData, left = _ this$canvasData.left, top = _ this$canvasData.top; return this.moveTo (isUndefined (offsetX)? OffsetX: left + Number (offsetX), isUndefined (offsetY)? OffsetY: top + Number (offsetY);}, / * Move the canvas to an absolute point * @ param {number} x-The x-axis coordinate. * @ param {number} [yellowx]-The y-axis coordinate. * @ returns {Cropper} this * / moveTo: function moveTo (x) {var y = arguments.length > 1 & & arguments [1]! = = undefined? Arguments [1]: x; var canvasData = this.canvasData; var changed = false; x = Number (x); y = Number (y); if (this.ready & &! this.disabled & & this.options.movable) {if (isNumber (x)) {canvasData.left = x Changed = true;} if (isNumber (y)) {canvasData.top = y; changed = true;} if (changed) {this.renderCanvas (true) }} return this;}, / * * Zoom the canvas with a relative ratio * @ param {number} ratio-The target ratio. * @ param {Event} _ originalEvent-The original event if any. * @ returns {Cropper} this * / zoom: function zoom (ratio, _ originalEvent) {var canvasData = this.canvasData; ratio = Number (ratio); if (ratio

< 0) { ratio = 1 / (1 - ratio); } else { ratio = 1 + ratio; } return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent); }, /** * Zoom the canvas to an absolute ratio * @param {number} ratio - The target ratio. * @param {Object} pivot - The zoom pivot point coordinate. * @param {Event} _originalEvent - The original event if any. * @returns {Cropper} this */ zoomTo: function zoomTo(ratio, pivot, _originalEvent) { var options = this.options, canvasData = this.canvasData; var width = canvasData.width, height = canvasData.height, naturalWidth = canvasData.naturalWidth, naturalHeight = canvasData.naturalHeight; ratio = Number(ratio); if (ratio >

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.