cropper.js cropper.css Html使用

/*! * Cropper v0.9.2 * https://github.com/fengyuanchen/cropper * * Copyright (c) 2014-2015 Fengyuan Chen and contributors * Released under the MIT license * * Date: 2015-04-18T04:35:01.500Z */ (function (factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as anonymous module. define(['jquery'], factory); } else if (typeof exports === 'object') { // Node / CommonJS factory(require('jquery')); } else { // Browser globals. factory(jQuery); } })(function ($) { 'use strict'; var $window = $(window), $document = $(document), location = window.location, // Constants CROPPER_NAMESPACE = '.cropper', CROPPER_PREVIEW = 'preview' + CROPPER_NAMESPACE, // RegExps REGEXP_DRAG_TYPES = /^(e|n|w|s|ne|nw|sw|se|all|crop|move|zoom)$/, // Classes CLASS_MODAL = 'cropper-modal', CLASS_HIDE = 'cropper-hide', CLASS_HIDDEN = 'cropper-hidden', CLASS_INVISIBLE = 'cropper-invisible', CLASS_MOVE = 'cropper-move', CLASS_CROP = 'cropper-crop', CLASS_DISABLED = 'cropper-disabled', CLASS_BG = 'cropper-bg', // Events EVENT_MOUSE_DOWN = 'mousedown touchstart', EVENT_MOUSE_MOVE = 'mousemove touchmove', EVENT_MOUSE_UP = 'mouseup mouseleave touchend touchleave touchcancel', EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll', EVENT_DBLCLICK = 'dblclick', EVENT_RESIZE = 'resize' + CROPPER_NAMESPACE, // Bind to window with namespace EVENT_BUILD = 'build' + CROPPER_NAMESPACE, EVENT_BUILT = 'built' + CROPPER_NAMESPACE, EVENT_DRAG_START = 'dragstart' + CROPPER_NAMESPACE, EVENT_DRAG_MOVE = 'dragmove' + CROPPER_NAMESPACE, EVENT_DRAG_END = 'dragend' + CROPPER_NAMESPACE, EVENT_ZOOM_IN = 'zoomin' + CROPPER_NAMESPACE, EVENT_ZOOM_OUT = 'zoomout' + CROPPER_NAMESPACE, // Supports SUPPORT_CANVAS = $.isFunction($('<canvas>')[0].getContext), // Others sqrt = Math.sqrt, min = Math.min, max = Math.max, abs = Math.abs, sin = Math.sin, cos = Math.cos, num = parseFloat, // Prototype prototype = {}; function isNumber(n) { return typeof n === 'number'; } function isUndefined(n) { return typeof n === 'undefined'; } function toArray(obj, offset) { var args = []; if (isNumber(offset)) { // It's necessary for IE8 args.push(offset); } return args.slice.apply(obj, args); } // Custom proxy to avoid jQuery's guid function proxy(fn, context) { var args = toArray(arguments, 2); return function () { return fn.apply(context, args.concat(toArray(arguments))); }; } function isCrossOriginURL(url) { var parts = url.match(/^(https?:)\/\/([^\:\/\?#]+):?(\d*)/i); return parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port); } function addTimestamp(url) { var timestamp = 'timestamp=' + (new Date()).getTime(); return (url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp); } function inRange(source, target) { return target.left < 0 && source.width < (target.left + target.width) && target.top < 0 && source.height < (target.top + target.height); } function getRotateValue(degree) { return degree ? 'rotate(' + degree + 'deg)' : 'none'; } function getRotatedSizes(data, reverse) { var deg = abs(data.degree) % 180, arc = (deg > 90 ? (180 - deg) : deg) * Math.PI / 180, sinArc = sin(arc), cosArc = cos(arc), width = data.width, height = data.height, aspectRatio = data.aspectRatio, newWidth, newHeight; if (!reverse) { newWidth = width * cosArc + height * sinArc; newHeight = width * sinArc + height * cosArc; } else { newWidth = width / (cosArc + sinArc / aspectRatio); newHeight = newWidth / aspectRatio; } return { width: newWidth, height: newHeight }; } function getSourceCanvas(image, data) { var canvas = $('<canvas>')[0], context = canvas.getContext('2d'), width = data.naturalWidth, height = data.naturalHeight, rotate = data.rotate, rotated = getRotatedSizes({ width: width, height: height, degree: rotate }); if (rotate) { canvas.width = rotated.width; canvas.height = rotated.height; context.save(); context.translate(rotated.width / 2, rotated.height / 2); context.rotate(rotate * Math.PI / 180); context.drawImage(image, -width / 2, -height / 2, width, height); context.restore(); } else { canvas.width = width; canvas.height = height; context.drawImage(image, 0, 0, width, height); } return canvas; } function Cropper(element, options) { this.$element = $(element); this.options = $.extend({}, Cropper.DEFAULTS, $.isPlainObject(options) && options); this.ready = false; this.built = false; this.rotated = false; this.cropped = false; this.disabled = false; this.canvas = null; this.cropBox = null; this.load(); } prototype.load = function (url) { var options = this.options, $this = this.$element, crossOrigin, bustCacheUrl, buildEvent, $clone; if (!url) { if ($this.is('img')) { if (!$this.attr('src')) { return; } url = $this.prop('src'); } else if ($this.is('canvas') && SUPPORT_CANVAS) { url = $this[0].toDataURL(); } } if (!url) { return; } buildEvent = $.Event(EVENT_BUILD); $this.one(EVENT_BUILD, options.build).trigger(buildEvent); // Only trigger once if (buildEvent.isDefaultPrevented()) { return; } if (options.checkImageOrigin && isCrossOriginURL(url)) { crossOrigin = 'anonymous'; if (!$this.prop('crossOrigin')) { // Only when there was not a "crossOrigin" property bustCacheUrl = addTimestamp(url); // Bust cache (#148) } } this.$clone = $clone = $('<img>'); $clone.one('load', $.proxy(function () { var naturalWidth = $clone.prop('naturalWidth') || $clone.width(), naturalHeight = $clone.prop('naturalHeight') || $clone.height(); this.image = { naturalWidth: naturalWidth, naturalHeight: naturalHeight, aspectRatio: naturalWidth / naturalHeight, rotate: 0 }; this.url = url; this.ready = true; this.build(); }, this)).one('error', function () { $clone.remove(); }).attr({ /* #134: Seems like the order is important for Chrome. */ crossOrigin: crossOrigin, src: bustCacheUrl || url }); // Hide and insert into the document $clone.addClass(CLASS_HIDE).insertAfter($this); }; prototype.build = function () { var $this = this.$element, $clone = this.$clone, options = this.options, $cropper, $cropBox; if (!this.ready) { return; } if (this.built) { this.unbuild(); } // Create cropper elements this.$cropper = $cropper = $(Cropper.TEMPLATE); // Hide the original image $this.addClass(CLASS_HIDDEN); // Show the clone iamge $clone.removeClass(CLASS_HIDE); this.$container = $this.parent().append($cropper); this.$canvas = $cropper.find('.cropper-canvas').append($clone); this.$dragBox = $cropper.find('.cropper-drag-box'); this.$cropBox = $cropBox = $cropper.find('.cropper-crop-box'); this.$viewBox = $cropper.find('.cropper-view-box')