图片裁剪上传

矫情吗；* 2022-06-14 12:06 551阅读 0赞

1.实现方式:使用jquery插件 imagecropper.js

demo：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>图片裁剪</title>
  5.     <style type="text/css">
  6.         body{padding: 0;margin: 0; height: 100%;background-color: #eee;font-size: 12px;color: #666;}
  8.         a{text-decoration: none; color: #333;}
  10.         a:hover{text-decoration: none;color: #f00;}
  12.         #container{position: absolute; left: 20px;top: 20px;}
  14.         #wrapper{ position: absolute; left: 0px; top: 40px;}
  16.         #cropper{ position: absolute; left: 0px; top: 0px; border: 1px solid #ccc;}
  18.         #previewContainer{ position: absolute; left: 350px; top: 60px;}
  20.         .preview{ border: 1px solid #ccc;}
  22.         #selectBtn{ position: absolute; left: 0px;top: 0px; width: 119px; height: 27px;}
  24.         #saveBtn{ position: absolute; left: 150px; top: 0px; width: 67px; height: 27px;}
  26.         #rotateLeftBtn{ position: absolute; left: 0px;top: 315px;width: 100px;height: 22px;padding-left: 25px; padding-top: 2px;}
  28.         #rotateRightBtn{ position: absolute;left: 225px;top: 315px;width: 50px;height: 22px;padding-right: 25px;padding-top: 2px;}
  29.     </style>
  31. </head>
  32. <body οnlοad="init();">
  33.     <div id="container">
  34.         <a id="selectBtn" href="javascript:void(0);" οnclick="document.getElementById('input').click();">选择</a>
  35.         <a id="saveBtn" href="javascript:void(0);" οnclick="saveImage();">保存</a>
  36.         <input type="file" id="input" size="10" style="visibility:hidden;" οnchange="selectImage(this.files)" />
  38.         <div id="wrapper">
  39.             <canvas id="cropper"></canvas>
  40.             <a id="rotateLeftBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向左旋转</a>
  41.             <a id="rotateRightBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向右旋转</a>
  43.             <span id="status" style="position:absolute;left:350px;top:10px;width:100px;"></span>
  44.             <div id="previewContainer">
  45.                 <canvas id="preview180" width="180" height="180" class="preview"></canvas>
  46.                 <span style="display:block;width:100%;padding-top:5px;text-align:center;">大尺寸图片，180x180像素</span>
  48.                 <canvas id="preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
  49.                 <span style="position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸图片 100x100像素</span>
  51.                 <canvas id="preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
  52.                 <span style="position:absolute;left:245px;top:210px;width:70px;text-align:center;">小尺寸图片 50x50像素</span>
  53.             </div>
  54.         </div>
  56.     </div>
  57.     <script type="text/javascript" src='jquery-1.7.2.min.js'></script>
  58.     <script type="text/javascript" src='imagecropper.js'></script>
  59.     <script type="text/javascript">
  60.         var cropper;
  61.         function init(){   
  62.             //绑定
  63.             cropper = new ImageCropper(300, 300, 180, 180);
  64.             cropper.setCanvas("cropper");
  65.             cropper.addPreview("preview180");
  66.             cropper.addPreview("preview100");
  67.             cropper.addPreview("preview50");
  68.             //检测用户浏览器是否支持imagecropper插件
  69.             if(!cropper.isAvaiable())
  70.             {
  71.                 alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
  72.             }
  73.         }
  75.         //打开本地图片
  76.         function selectImage(fileList){
  77.             cropper.loadImage(fileList[0]);
  78.         }
  80.         //旋转图片
  81.         function rotateImage(e){
  82.             switch(e.target.id)
  83.             {
  84.                 case "rotateLeftBtn":
  85.                     cropper.rotate(-90);
  86.                     break;
  87.                 case "rotateRightBtn":
  88.                     cropper.rotate(90);
  89.                     break;
  90.             }
  91.         }
  93.         //上传图片
  94.         function saveImage(){
  95.             //选个你需要的大小
  96.             var imgData = cropper.getCroppedImageData(180, 180);
  97.             console.log("上传了："+imgData);
  98.             //在这里写你的上传代码
  99.         }
  100.     </script>
  101. </body>
  102. </html>

imagecropper.js插件源码

  1. /*多尺寸 zc*/
  2. (function (i) {
  3.     var c = function (a, b, d, e) {
  4.         this.width = a;
  5.         this.height = b;
  6.         this.cropWidth = d;
  7.         this.cropHeight = e;
  8.         this.imageContext = this.imageCanvas = this.image = null;
  9.         this.imageScale = 1;
  10.         this.imageViewTop = this.imageViewLeft = this.imageTop = this.imageLeft = this.imageRotation = 0;
  11.         this.context = this.canvas = null;
  12.         this.previews = [];
  13.         this.maskGroup = [];
  14.         this.maskAlpha = 0.4;
  15.         this.maskColor = "#fff";
  16.         this.cropTop = this.cropLeft = 0;
  17.         this.cropViewWidth = d;
  18.         this.cropViewHeight = e;
  19.         this.dragSize = 7;
  20.         this.dragColor = "#fff";
  21.         this.mouseY = this.mouseX = this.dragTop =
  22.         this.dragLeft = 0;
  23.         this.isResizing = this.isMoving = this.inDragger = this.inCropper = false;
  24.         this.cropStartHeight = this.cropStartWidth = this.cropStartTop = this.cropStartLeft = this.mouseStartY = this.mouseStartX = 0
  25.     };
  26.     i.ImageCropper = c;
  27.     c.prototype.setCanvas = function (a) {
  28.         this.canvas = document.getElementById(a) || a;
  29.         this.context = this.canvas.getContext("2d");
  30.         this.canvas.width = this.width;
  31.         this.canvas.height = this.height;
  32.         this.canvas.oncontextmenu = this.canvas.onselectstart = function () {
  33.             return false
  34.         };
  35.         this.imageCanvas = document.createElement("canvas");
  36.         this.imageContext = this.imageCanvas.getContext("2d");
  37.         this.imageCanvas.width = this.width;
  38.         this.imageCanvas.height = this.height
  39.     };
  40.     c.prototype.addPreview = function (a) {
  41.         this.previews.push((document.getElementById(a) || a).getContext("2d"))
  42.     };
  43.     c.prototype.loadImage = function (a) {
  44.         if (this.isAvaiable() && this.isImage(a)) {
  45.             var b = new FileReader,
  46.                 d = this;
  47.             b.readAsDataURL(a);
  48.             b.onload = function (e) {
  49.                 if (!d.image) d.image = new Image;
  50.                 d.image.onload = function () {
  51.                     d._init()
  52.                 };
  53.                 d.image.src = e.target.result
  54.             }
  55.         }
  56.     };
  57.     c.prototype._init = function () {
  58.         var a =
  59.         Math.min(this.width / this.image.width, this.height / this.image.height);
  60.         if (a > 1) a = Math.min(this.cropViewWidth / this.image.width, this.cropViewHeight / this.image.height);
  61.         if (this.image.width * a < this.cropViewWidth) a = Math.min(a, this.cropViewWidth / this.image.width);
  62.         if (this.image.height * a < this.cropViewHeight) a = Math.min(a, this.cropViewHeight / this.image.height);
  63.         this.imageViewLeft = this.imageLeft = (this.width - this.image.width * a) / 2;
  64.         this.imageViewTop = this.imageTop = (this.height - this.image.height * a) / 2;
  65.         this.imageScale = a;
  66.         this.imageRotation = 0;
  67.         a = Math.min(this.image.width * a, this.image.height * a);
  68.         this.cropViewWidth = Math.min(a, this.cropWidth);
  69.         this.cropViewHeight = Math.min(a, this.cropHeight);
  70.         this.cropLeft = (this.width - this.cropViewWidth) / 2;
  71.         this.cropTop = (this.height - this.cropViewHeight) / 2;
  72.         this.dragLeft = this.cropLeft + this.cropViewWidth - this.dragSize / 2;
  73.         this.dragTop = this.cropTop + this.cropViewHeight - this.dragSize / 2;
  74.         this._update();
  75.         var b = this;
  76.         this.canvas.onmousedown = function (d) {
  77.             b._mouseHandler.call(b, d)
  78.         };
  79.         this.canvas.onmouseup = function (d) {
  80.             b._mouseHandler.call(b, d)
  81.         };
  82.         this.canvas.onmousemove = function (d) {
  83.             b._mouseHandler.call(b, d)
  84.         }
  85.     };
  86.     c.prototype._mouseHandler = function (a) {
  87.         if (a.type == "mousemove") {
  88.             var b = this.canvas.getClientRects()[0];
  89.             this.mouseX = a.pageX - b.left - $(window).scrollLeft();
  90.             this.mouseY = a.pageY - b.top - $(window).scrollTop();
  91.             this._checkMouseBounds();
  92.             this.canvas.style.cursor = this.inCropper || this.isMoving ? "move" : this.inDragger || this.isResizing ? "se-resize" : "";
  93.             this.isMoving ? this._move() : this.isResizing && this._resize()
  94.         } else if (a.type == "mousedown") {
  95.             this.mouseStartX = this.mouseX;
  96.             this.mouseStartY = this.mouseY;
  97.             this.cropStartLeft = this.cropLeft;
  98.             this.cropStartTop = this.cropTop;
  99.             this.cropStartWidth = this.cropViewWidth;
  100.             this.cropStartHeight = this.cropViewHeight;
  101.             this.inCropper ? this.isMoving = true : this.inDragger && (this.isResizing = true)
  102.         } else if (a.type == "mouseup") this.isMoving = this.isResizing = false
  103.     };
  104.     c.prototype._checkMouseBounds = function () {
  105.         this.inCropper = this.mouseX >= this.cropLeft && this.mouseX <= this.cropLeft + this.cropViewWidth && this.mouseY >= this.cropTop && this.mouseY <= this.cropTop + this.cropViewHeight;
  106.         this.inDragger = this.mouseX >= this.dragLeft && this.mouseX <= this.dragLeft + this.dragSize && this.mouseY >= this.dragTop && this.mouseY <= this.dragTop + this.dragSize;
  107.         this.inCropper = this.inCropper && !this.inDragger
  108.     };
  109.     c.prototype._move = function () {
  110.         var a = this.mouseY - this.mouseStartY;
  111.         this.cropLeft = Math.max(this.imageViewLeft, this.cropStartLeft + (this.mouseX - this.mouseStartX));
  112.         this.cropLeft = Math.min(this.cropLeft, this.width - this.imageViewLeft - this.cropViewWidth);
  113.         this.cropTop = Math.max(this.imageViewTop, this.cropStartTop + a);
  114.         this.cropTop = Math.min(this.cropTop, this.height - this.imageViewTop - this.cropViewHeight);
  115.         this.dragLeft = this.cropLeft + this.cropViewWidth - this.dragSize / 2;
  116.         this.dragTop = this.cropTop + this.cropViewHeight - this.dragSize / 2;
  117.         this._update()
  118.     };
  119.     c.prototype._resize = function () {
  120.         var a = Math.min(this.mouseX - this.mouseStartX, this.mouseY - this.mouseStartY),
  121.             b = Math.max(10, this.cropStartWidth + a);
  122.         a = Math.max(10, this.cropStartHeight + a);
  123.         b = Math.min(b, this.width - this.cropStartLeft - this.imageViewLeft);
  124.         a = Math.min(a, this.height - this.cropStartTop - this.imageViewTop);
  125.         this.cropViewWidth =
  126.         this.cropViewHeight = Math.round(Math.min(b, a));
  127.         this.dragLeft = this.cropLeft + this.cropViewWidth - this.dragSize / 2;
  128.         this.dragTop = this.cropTop + this.cropViewHeight - this.dragSize / 2;
  129.         this._update()
  130.     };
  131.     c.prototype.rotate = function (a) {
  132.         if (this.image) {
  133.             this.imageRotation += a;
  134.             this.imageViewLeft = (a = Math.abs(this.imageRotation % 180) == 90) ? this.imageTop : this.imageLeft;
  135.             this.imageViewTop = a ? this.imageLeft : this.imageTop;
  136.             this.cropLeft = (this.width - this.cropViewWidth) / 2;
  137.             this.cropTop = (this.height - this.cropViewHeight) / 2;
  138.             this.dragLeft =
  139.             this.cropLeft + this.cropViewWidth - this.dragSize / 2;
  140.             this.dragTop = this.cropTop + this.cropViewHeight - this.dragSize / 2;
  141.             this._update()
  142.         }
  143.     };
  144.     c.prototype._update = function () {
  145.         this.context.clearRect(0, 0, this.width, this.height);
  146.         this._drawImage();
  147.         this._drawMask();
  148.         this._drawDragger();
  149.         this._drawPreview()
  150.     };
  151.     c.prototype._drawImage = function () {
  152.         this.imageContext.clearRect(0, 0, this.width, this.height);
  153.         this.imageContext.save();
  154.         var a = this.imageRotation % 360;
  155.         this.imageContext.translate(this.imageViewLeft, this.imageViewTop);
  156.         this.imageContext.scale(this.imageScale, this.imageScale);
  157.         this.imageContext.rotate(this.imageRotation * Math.PI / 180);
  158.         switch ((360 - a) % 360) {
  159.         case 90:
  160.             this.imageContext.drawImage(this.image, -this.image.width, 0);
  161.             break;
  162.         case 180:
  163.             this.imageContext.drawImage(this.image, -this.image.width, -this.image.height);
  164.             break;
  165.         case 270:
  166.             this.imageContext.drawImage(this.image, 0, -this.image.height);
  167.             break;
  168.         default:
  169.             this.imageContext.drawImage(this.image, 0, 0)
  170.         }
  171.         this.imageContext.restore();
  172.         this.context.drawImage(this.imageCanvas, 0, 0)
  173.     };
  174.     c.prototype._drawPreview = function () {
  175.         for (var a =
  176.         0; a < this.previews.length; a++) {
  177.             var b = this.previews[a];
  178.             b.clearRect(0, 0, b.canvas.width, b.canvas.height);
  179.             b.save();
  180.             b.drawImage(this.imageCanvas, this.cropLeft, this.cropTop, this.cropViewWidth, this.cropViewHeight, 0, 0, b.canvas.width, b.canvas.height);
  181.             b.restore()
  182.         }
  183.     };
  184.     c.prototype._drawMask = function () {
  185.         this._drawRect(this.imageViewLeft, this.imageViewTop, this.cropLeft - this.imageViewLeft, this.height, this.maskColor, null, this.maskAlpha);
  186.         this._drawRect(this.cropLeft + this.cropViewWidth, this.imageViewTop, this.width - this.cropViewWidth - this.cropLeft + this.imageViewLeft, this.height, this.maskColor, null, this.maskAlpha);
  187.         this._drawRect(this.cropLeft, this.imageViewTop, this.cropViewWidth, this.cropTop - this.imageViewTop, this.maskColor, null, this.maskAlpha);
  188.         this._drawRect(this.cropLeft, this.cropTop + this.cropViewHeight, this.cropViewWidth, this.height - this.cropViewHeight - this.cropTop + this.imageViewTop, this.maskColor, null, this.maskAlpha)
  189.     };
  190.     c.prototype._drawDragger = function () {
  191.         this._drawRect(this.dragLeft, this.dragTop, this.dragSize, this.dragSize, null, this.dragColor, null)
  192.     };
  193.     c.prototype._drawRect = function (a, b, d, e, f, g, h) {
  194.         this.context.save();
  195.         if (f !== null) this.context.fillStyle = f;
  196.         if (g !== null) this.context.strokeStyle = g;
  197.         if (h !== null) this.context.globalAlpha = h;
  198.         this.context.beginPath();
  199.         this.context.rect(a, b, d, e);
  200.         this.context.closePath();
  201.         f !== null && this.context.fill();
  202.         g !== null && this.context.stroke();
  203.         this.context.restore()
  204.     };
  205.     c.prototype.getCroppedImageData = function (a, b, d) {
  206.         var e = document.createElement("canvas");
  207.         e.width = a || this.cropWidth;
  208.         e.height = b || this.cropHeight;
  209.         e.getContext("2d").drawImage(this.imageCanvas, this.cropLeft, this.cropTop, this.cropViewWidth, this.cropViewHeight, 0, 0, e.width, e.height);
  210.         return e.toDataURL(d || "image/jpeg")
  211.     };
  212.     c.prototype.isAvaiable = function () {
  213.         return typeof FileReader !== "undefined"
  214.     };
  215.     c.prototype.isImage = function (a) {
  216.         return /image/i.test(a.type)
  217.     }
  218. })(window);

发表评论

表情：
评论列表 （有 0 条评论，551人围观）

还没有评论，来说两句吧...

相关阅读