1(function (root, factory) { 2 "use strict"; 3 if (typeof define === "function" && define.amd) { 4 define(["jquery", "iscroll-zoom", "hammer", "lrz"], factory); 5 } else if (typeof exports === "object") { 6 module.exports = factory(require("jquery"), require("iscroll-zoom"), require("hammer"), require("lrz")); 7 } else { 8 root.bjj = root.bjj || {}; 9 root.bjj.PhotoClip = factory(root.jQuery, root.IScroll, root.Hammer, root.lrz); 10 } 11}(this, function ($, IScroll, Hammer, lrz) { 12 "use strict"; 13 var defaultOption = { 14 size: [260, 260], 15 outputSize: [0, 0], 16 file: "", 17 view: "", 18 ok: "", 19 PicSize: "", 20 loadStart: function () {}, 21 loadComplete: function () {}, 22 loadError: function () {}, 23 clipFinish: function () {} 24 } 25 26 function PhotoClip(container, option) { 27 if (!window.FileReader) { 28 alert("æ¨çæµè§å¨ä¸æ¯æ HTML5 ç FileReader APIï¼ å æ¤æ æ³åå§åå¾çè£åªæ件ï¼è¯·æ´æ¢ææ°çæµè§å¨ï¼"); 29 return; 30 } 31 var opt = $.extend({}, defaultOption, option); 32 var returnValue = photoClip(container, opt); 33 this.destroy = returnValue.destroy; 34 } 35 36 function photoClip(container, option) { 37 var size = option.size, 38 outputSize = option.outputSize, 39 file = option.file, 40 view = option.view, 41 ok = option.ok, 42 quality = option.quality, 43 PicSize = option.PicSize, 44 outputType = "image/jpeg", 45 loadStart = option.loadStart, 46 loadComplete = option.loadComplete, 47 loadError = option.loadError, 48 clipFinish = option.clipFinish; 49 if (!isArray(size)) { 50 size = [260, 260]; 51 } 52 if (!isArray(outputSize)) { 53 outputSize = [0, 0]; 54 } 55 var clipWidth = size[0] || 260, 56 clipHeight = size[1] || 260, 57 outputWidth = Math.max(outputSize[0], 0), 58 outputHeight = Math.max(outputSize[1], 0); 59 var $file = $(file); 60 if (!$file.length) 61 return; 62 var $img, imgWidth, imgHeight, imgLoaded; 63 64 65 66 $file.attr("accept", "image/*"); 67 $file.on("change", function () { 68 if (!this.files.length) 69 return; 70 var files = this.files[0]; 71 console.log(files) 72 if((files.type!='image/jpeg')&&(files.type!='image/png')){ 73 outputType='image/jpeg' 74 }else{ 75 outputType=files.type 76 } 77 78 if (!/image\/(jpeg|jpg|gif|png)/.test(files.type)) { 79 alert("å¾çæ ¼å¼ä¸æ£ç¡®ï¼è¯·éæ©æ£ç¡®æ ¼å¼çå¾çæ件ï¼"); 80 return false; 81 } else if ((files.size / 1024) < PicSize || PicSize == 0) { 82 var fileReader = new FileReader(); 83 console.log(fileReader) 84 console.log(files) 85 86 var dd = new compression({ 87 //domId: "img", // ä¸ä¼ å¾ççDom ç®ååªæ¯æidï¼ 88 files:files, 89 fidelity:quality, 90 imgFile: function (base64) { 91 // alert(base64) // å缩好çåè° 92 console.log(base64) 93 createImg(base64) 94 } 95 }); 96 97 loadStart.call(fileReader, files); 98 } else { 99 alert("å¾çè¿å¤§,请ä¸ä¼ " + (PicSize / 1024).toFixed(2) + "MB以å çå¾ç"); 100 return 101 } 102 }); 103 $file.click(function () { 104 this.value = ""; 105 }); 106 var $container, $clipView, $moveLayer, $rotateLayer, $view, canvas, hammerManager, myScroll, containerWidth, containerHeight; 107 init(); 108 initScroll(); 109 initEvent(); 110 initClip(); 111 var $ok = $(ok); 112 if ($ok.length) { 113 $ok.click(function () { 114 clipImg(); 115 }); 116 } 117 var $win = $(window); 118 resize(); 119 $win.resize(resize); 120 var atRotation, curX, curY, curAngle; 121 122 function imgLoad() { 123 imgLoaded = true; 124 $rotateLayer.append(this); 125 hideAction.call(this, $img, function () {
126 imgWidth = this.naturalWidth; 127 imgHeight = this.naturalHeight; 128 }); 129 hideAction($moveLayer, function () { 130 resetScroll(); 131 }); 132 133 loadComplete.call(this, this.src); 134 } 135 136 function initScroll() { 137 var options = { 138 zoom: true, 139 scrollX: true, 140 scrollY: true, 141 freeScroll: true, 142 mouseWheel: true, 143 wheelAction: "zoom" 144 } 145 myScroll = new IScroll($clipView[0], options); 146 } 147 148 function resetScroll() { 149 curX = 0; 150 curY = 0; 151 curAngle = 0; 152 $rotateLayer.css({ 153 "width": imgWidth, 154 "height": imgHeight 155 }); 156 setTransform($rotateLayer, curX, curY, curAngle); 157 calculateScale(imgWidth, imgHeight); 158 myScroll.zoom(myScroll.options.zoomStart); 159 refreshScroll(imgWidth, imgHeight); 160 var posX = (clipWidth - imgWidth * myScroll.options.zoomStart) * .5, 161 posY = (clipHeight - imgHeight * myScroll.options.zoomStart) * .5; 162 myScroll.scrollTo(posX, posY); 163 } 164 165 function refreshScroll(width, height) { 166 $moveLayer.css({ 167 "width": width, 168 "height": height 169 }); 170 $clipView.append($moveLayer); 171 myScroll.refresh(); 172 } 173 174 function initEvent() { 175 var is_mobile = !!navigator.userAgent.match(/mobile/i); 176 if (is_mobile) { 177 hammerManager = new Hammer($moveLayer[0]); 178 hammerManager.add(new Hammer.Rotate()); 179 var rotation, rotateDirection; 180 hammerManager.on("rotatemove", function (e) { 181 if (atRotation) 182 return; 183 rotation = e.rotation; 184 if (rotation > 180) { 185 rotation -= 360; 186 } else if (rotation < -180) { 187 rotation += 360; 188 } 189 rotateDirection = rotation > 0 ? 1 : rotation < 0 ? -1 : 0; 190 }); 191 hammerManager.on("rotateend", function (e) { 192 if (atRotation) 193 return; 194 if (Math.abs(rotation) > 30) { 195 if (rotateDirection == 1) { 196 rotateCW(e.center); 197 } else if (rotateDirection == -1) { 198 rotateCCW(e.center); 199 } 200 } 201 }); 202 } else { 203 $moveLayer.on("dblclick", function (e) { 204 rotateCW({ 205 x: e.clientX, 206 y: e.clientY 207 }); 208 }); 209 } 210 } 211 212 function rotateCW(point) { 213 rotateBy(90, point); 214 } 215 216 function rotateCCW(point) { 217 rotateBy(-90, point); 218 } 219 220 function rotateBy(angle, point) { 221 if (atRotation) 222 return; 223 atRotation = true; 224 var loacl; 225 if (!point) { 226 loacl = loaclToLoacl($moveLayer, $clipView, clipWidth * .5, clipHeight * .5); 227 } else { 228 loacl = globalToLoacl($moveLayer, point.x, point.y); 229 } 230 var origin = calculateOrigin(curAngle, loacl), 231 originX = origin.x, 232 originY = origin.y, 233 offsetX = 0, 234 offsetY = 0, 235 parentOffsetX = 0, 236 parentOffsetY = 0, 237 newAngle = curAngle + angle, 238 curImgWidth, curImgHeight; 239 if (newAngle == 90 || newAngle == -270) { 240 offsetX = originX + originY; 241 offsetY = originY - originX; 242 if (newAngle > curAngle) { 243 parentOffsetX = imgHeight - originX - originY; 244 parentOffsetY = originX - originY; 245 } else if (newAngle < curAngle) { 246 parentOffsetX = (imgHeight - originY) - (imgWidth - originX); 247 parentOffsetY = originX + originY - imgHeight; 248 } 249 curImgWidth = imgHeight; 250 curImgHeight = imgWidth; 251 } else if (newAngle == 180 || newAngle == -180) { 252 offsetX = originX * 2; 253 offsetY = originY * 2; 254 if (newAngle > curAngle) { 255 parentOffsetX = (imgWidth - originX) - (imgHeight - originY); 256 parentOffsetY = imgHeight - (originX + originY); 257 } else if (newAngle < curAngle) { 258 parentOffsetX = imgWidth - (originX + originY); 259 parentOffsetY = (imgHeight - originY) - (imgWidth - originX); 260 } 261 curImgWidth = imgWidth; 262 curImgHeight = imgHeight; 263 } else if (newAngle == 270 || newAngle == -90) { 264 offsetX = originX - originY; 265 offsetY = originX + originY; 266 if (newAngle > curAngle) { 267 parentOffsetX = originX + originY - imgWidth; 268 parentOffsetY = (imgWidth - originX) - (imgHeight - originY); 269 } else if (newAngle < curAngle) { 270 parentOffsetX = originY - originX; 271 parentOffsetY = imgWidth - originX - originY; 272 } 273 curImgWidth = imgHeight; 274 curImgHeight = imgWidth; 275 } else if (newAngle == 0 || newAngle == 360 || newAngle == -360) { 276 offsetX = 0; 277 offsetY = 0; 278 if (newAngle > curAngle) { 279 parentOffsetX = originX - originY; 280 parentOffsetY = originX + originY - imgWidth; 281 } else if (newAngle < curAngle) { 282 parentOffsetX = originX + originY - imgHeight; 283 parentOffsetY = originY - originX; 284 } 285 curImgWidth = imgWidth; 286 curImgHeight = imgHeight; 287 } 288 if (curAngle == 0) { 289 curX = 0; 290 curY = 0; 291 } else if (curAngle == 90 || curAngle == -270) { 292 curX -= originX + originY; 293 curY -= originY - originX; 294 } else if (curAngle == 180 || curAngle == -180) { 295 curX -= originX * 2; 296 curY -= originY * 2; 297 } else if (curAngle == 270 || curAngle == -90) { 298 curX -= originX - originY; 299 curY -= originX + originY; 300 } 301 curX = curX.toFixed(2) - 0; 302 curY = curY.toFixed(2) - 0; 303 setTransform($rotateLayer, curX, curY, curAngle, originX, originY); 304 setTransition($rotateLayer, curX, curY, newAngle, 200, function () { 305 atRotation = false; 306 curAngle = newAngle % 360; 307 curX += offsetX + parentOffsetX; 308 curY += offsetY + parentOffsetY; 309 curX = curX.toFixed(2) - 0; 310 curY = curY.toFixed(2) - 0; 311 setTransform($rotateLayer, curX, curY, curAngle); 312 myScroll.scrollTo(myScroll.x - parentOffsetX * myScroll.scale, myScroll.y - parentOffsetY * myScroll.scale); 313 calculateScale(curImgWidth, curImgHeight); 314 if (myScroll.scale < myScroll.options.zoomMin) { 315 myScroll.zoom(myScroll.options.zoomMin); 316 } 317 refreshScroll(curImgWidth, curImgHeight); 318 }); 319 } 320 321 function initClip() { 322 canvas = document.createElement("canvas"); 323 } 324 325 function clipImg() { 326 if (!imgLoaded) { 327 alert("亲ï¼å½å没æå¾çå¯ä»¥è£åª!"); 328 return; 329 }else{ 330 var local = loaclToLoacl($moveLayer, $clipView); 331 var scale = myScroll.scale; 332 var ctx = canvas.getContext("2d"); 333 ctx.clearRect(0, 0, canvas.width, canvas.height); 334 ctx.save(); 335 if (!outputWidth || !outputHeight) { 336 canvas.width = clipWidth / scale; 337 canvas.height = clipHeight / scale; 338 } else { 339 canvas.width = outputWidth; 340 canvas.height = outputHeight; 341 ctx.scale(outputWidth / clipWidth * scale, outputHeight / clipHeight * scale); 342 } 343 ctx.translate(curX - local.x / scale, curY - local.y / scale); 344 ctx.rotate(curAngle * Math.PI / 180); 345 ctx.drawImage($img[0], 0, 0);
346 ctx.restore(); 347 console.log(outputType) 348 console.log(quality) 349 var dataURL = canvas.toDataURL(outputType, quality); 350 351 //$view.css("background-image", "url(" + dataURL + ")"); 352 clipFinish.call($img[0], dataURL); 353 } 354 355 } 356 //å缩æ¯ä¾ 357 function resize() { 358 hideAction($container, function () { 359 containerWidth = $container.width(); 360 containerHeight = $container.height(); 361 }); 362 } 363 364 function loaclToLoacl($layerOne, $layerTwo, x, y) { 365 x = x || 0; 366 y = y || 0; 367 var layerOneOffset, layerTwoOffset; 368 hideAction($layerOne, function () { 369 layerOneOffset = $layerOne.offset(); 370 }); 371 hideAction($layerTwo, function () { 372 layerTwoOffset = $layerTwo.offset(); 373 }); 374 return { 375 x: layerTwoOffset.left - layerOneOffset.left + x, 376 y: layerTwoOffset.top - layerOneOffset.top + y 377 }; 378 } 379 380 function globalToLoacl($layer, x, y) { 381 x = x || 0; 382 y = y || 0; 383 var layerOffset; 384 hideAction($layer, function () { 385 layerOffset = $layer.offset(); 386 }); 387 return { 388 x: x + $win.scrollLeft() - layerOffset.left, 389 y: y + $win.scrollTop() - layerOffset.top 390 }; 391 } 392 393 function hideAction(jq, func) { 394 var $hide = $(); 395 $.each(jq, function (i, n) { 396 var $n = $(n); 397 var $hidden = $n.parents().andSelf().filter(":hidden"); 398 var $none; 399 for (var i = 0; i < $hidden.length; i++) { 400 if (!$n.is(":hidden")) 401 break; 402 $none = $hidden.eq(i); 403 if ($none.css("display") == "none") 404 $hide = $hide.add($none.show()); 405 } 406 }); 407 if (typeof (func) == "function") 408 func.call(this); 409 $hide.hide(); 410 } 411 412 function calculateOrigin(curAngle, point) { 413 var scale = myScroll.scale; 414 var origin = {}; 415 if (curAngle == 0) { 416 origin.x = point.x / scale; 417 origin.y = point.y / scale; 418 } else if (curAngle == 90 || curAngle == -270) { 419 origin.x = point.y / scale; 420 origin.y = imgHeight - point.x / scale; 421 } else if (curAngle == 180 || curAngle == -180) { 422 origin.x = imgWidth - point.x / scale; 423 origin.y = imgHeight - point.y / scale; 424 } else if (curAngle == 270 || curAngle == -90) { 425 origin.x = imgWidth - point.y / scale; 426 origin.y = point.x / scale; 427 } 428 return origin; 429 } 430 431 function getScale(w1, h1, w2, h2) { 432 var sx = w1 / w2; 433 var sy = h1 / h2; 434 return sx > sy ? sx : sy; 435 } 436 437 function calculateScale(width, height) { 438 myScroll.options.zoomMin = getScale(clipWidth, clipHeight, width, height); 439 myScroll.options.zoomMax = Math.max(1, myScroll.options.zoomMin); 440 myScroll.options.zoomStart = Math.min(myScroll.options.zoomMax, getScale(containerWidth, containerHeight, width, height)); 441 } 442 443 function clearImg() { 444 if ($img && $img.length) { 445 $img.remove(); 446 delete $img[0]; 447 } 448 } 449 450 function createImg(src) { 451 clearImg(); 452 $img = $("<img>").css({ 453 "user-select": "none", 454 "pointer-events": "none" 455 }); 456 $img.load(imgLoad); 457 $img.attr("src", src); 458 } 459 460 function setTransform($obj, x, y, angle, originX, originY) { 461 originX = originX || 0; 462 originY = originY || 0; 463 var style = {}; 464 style[prefix + "transform"] = "translateZ(0) translate(" + x + "px," + y + "px) rotate(" + angle + "deg)"; 465 style[prefix + "transform-origin"] = originX + "px " + originY + "px"; 466 $obj.css(style); 467 } 468 469 function setTransition($obj, x, y, angle, dur, fn) { 470 $obj.css(prefix + "transform"); 471 $obj.css(prefix + "transition", prefix + "transform " + dur + "ms"); 472 $obj.one(transitionEnd, function () { 473 $obj.css(prefix + "transition", ""); 474 fn.call(this); 475 }); 476 $obj.css(prefix + "transform", "translateZ(0) translate(" + x + "px," + y + "px) rotate(" + angle + "deg)"); 477 } 478 479 function isArray(obj) { 480 return Object.prototype.toString.call(obj) === "[object Array]"; 481 } 482
483 function init() { 484 $container = $(container).css({ 485 "user-select": "none", 486 "overflow": "hidden" 487 }); 488 if ($container.css("position") == "static") 489 $container.css("position", "relative"); 490 $clipView = $("<div class='photo-clip-view'>").css({ 491 "position": "absolute", 492 "left": "50%", 493 "top": "50%", 494 "width": clipWidth, 495 "height": clipHeight, 496 "margin-left": -clipWidth / 2, 497 "margin-top": -clipHeight / 2 498 }).appendTo($container); 499 $moveLayer = $("<div class='photo-clip-moveLayer'>").appendTo($clipView); 500 $rotateLayer = $("<div class='photo-clip-rotateLayer'>").appendTo($moveLayer); 501 var $mask = $("<div class='photo-clip-mask'>").css({ 502 "position": "absolute", 503 "left": 0, 504 "top": 0, 505 "width": "100%", 506 "height": "100%", 507 "pointer-events": "none" 508 }).appendTo($container); 509 var $mask_left = $("<div class='photo-clip-mask-left'>").css({ 510 "position": "absolute", 511 "left": 0, 512 "right": "50%", 513 "top": "50%", 514 "bottom": "50%", 515 "width": "auto", 516 "height": clipHeight, 517 "margin-right": clipWidth / 2, 518 "margin-top": -clipHeight / 2, 519 "margin-bottom": -clipHeight / 2, 520 "background-color": "rgba(0,0,0,.5)" 521 }).appendTo($mask); 522 var $mask_right = $("<div class='photo-clip-mask-right'>").css({ 523 "position": "absolute", 524 "left": "50%", 525 "right": 0, 526 "top": "50%", 527 "bottom": "50%", 528 "margin-left": clipWidth / 2, 529 "margin-top": -clipHeight / 2, 530 "margin-bottom": -clipHeight / 2, 531 "background-color": "rgba(0,0,0,.5)" 532 }).appendTo($mask); 533 var $mask_top = $("<div class='photo-clip-mask-top'>").css({ 534 "position": "absolute", 535 "left": 0, 536 "right": 0, 537 "top": 0, 538 "bottom": "50%", 539 "margin-bottom": clipHeight / 2, 540 "background-color": "rgba(0,0,0,.5)" 541 }).appendTo($mask); 542 var $mask_bottom = $("<div class='photo-clip-mask-bottom'>").css({ 543 "position": "absolute", 544 "left": 0, 545 "right": 0, 546 "top": "50%", 547 "bottom": 0, 548 "margin-top": clipHeight / 2, 549 "background-color": "rgba(0,0,0,.5)" 550 }).appendTo($mask); 551 var $clip_area = $("<div class='photo-clip-area'>").css({ 552 "border": "1px dashed #ddd", 553 "position": "absolute", 554 "left": "50%", 555 "top": "50%", 556 "width": clipWidth, 557 "height": clipHeight, 558 "margin-left": -clipWidth / 2 - 1, 559 "margin-top": -clipHeight / 2 - 1 560 }).appendTo($mask); 561 $view = $(view); 562 if ($view.length) { 563 $view.css({ 564 "background-color": "#666", 565 "background-repeat": "no-repeat", 566 "background-position": "center", 567 "background-size": "contain" 568 }); 569 } 570 } 571 572 function destroy() { 573 $file.off("change"); 574 $file = null; 575 if (hammerManager) { 576 hammerManager.off("rotatemove"); 577 hammerManager.off("rotateend"); 578 hammerManager = null; 579 } else { 580 $moveLayer.off("dblclick"); 581 } 582 myScroll.destroy(); 583 myScroll = null; 584 $container.empty(); 585 $container = null; 586 $clipView = null; 587 $moveLayer = null; 588 $rotateLayer = null; 589 $view.css({ 590 "background-color": "", 591 "background-repeat": "", 592 "background-position": "", 593 "background-size": "" 594 }); 595 $view = null; 596 } 597 return { 598 destroy: destroy 599 }; 600 } 601 var prefix = '', 602 transitionEnd; 603 (function () { 604 var eventPrefix, vendors = { 605 Webkit: 'webkit', 606 Moz: '', 607 O: 'o' 608 }, 609 testEl = document.documentElement, 610 normalizeEvent = function (name) { 611 return eventPrefix ? eventPrefix + name : name.toLowerCase() 612 }; 613 for (var i in vendors) { 614 if (testEl.style[i + 'TransitionProperty'] !== undefined) { 615 prefix = '-' + i.toLowerCase() + '-';
616 eventPrefix = vendors[i]; 617 break; 618 } 619 } 620 transitionEnd = normalizeEvent('TransitionEnd'); 621 })(); 622 return PhotoClip; 623}));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.