图片裁剪上传

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

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

demo：

<!DOCTYPE html>
    <html>
    <head>
    	<title>图片裁剪</title>
    	<style type="text/css">
    		body{padding: 0;margin: 0; height: 100%;background-color: #eee;font-size: 12px;color: #666;}
    
    		a{text-decoration: none; color: #333;}
    
    		a:hover{text-decoration: none;color: #f00;}
    
    		#container{position: absolute; left: 20px;top: 20px;}
    
    		#wrapper{ position: absolute; left: 0px; top: 40px;}
    
    		#cropper{ position: absolute; left: 0px; top: 0px; border: 1px solid #ccc;}
    
    		#previewContainer{ position: absolute; left: 350px; top: 60px;}
    
    		.preview{ border: 1px solid #ccc;}
    
    		#selectBtn{ position: absolute; left: 0px;top: 0px; width: 119px; height: 27px;}
    
    		#saveBtn{ position: absolute; left: 150px; top: 0px; width: 67px; height: 27px;}
    
    		#rotateLeftBtn{ position: absolute; left: 0px;top: 315px;width: 100px;height: 22px;padding-left: 25px; padding-top: 2px;}
    
    		#rotateRightBtn{ position: absolute;left: 225px;top: 315px;width: 50px;height: 22px;padding-right: 25px;padding-top: 2px;}
    	</style>
    
    </head>
    <body οnlοad="init();">
        <div id="container">
            <a id="selectBtn" href="javascript:void(0);" οnclick="document.getElementById('input').click();">选择</a>
            <a id="saveBtn" href="javascript:void(0);" οnclick="saveImage();">保存</a>
            <input type="file" id="input" size="10" style="visibility:hidden;" οnchange="selectImage(this.files)" />
    
            <div id="wrapper">
                <canvas id="cropper"></canvas>
                <a id="rotateLeftBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向左旋转</a>
                <a id="rotateRightBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向右旋转</a>
    
                <span id="status" style="position:absolute;left:350px;top:10px;width:100px;"></span>
                <div id="previewContainer">
                    <canvas id="preview180" width="180" height="180" class="preview"></canvas>
                    <span style="display:block;width:100%;padding-top:5px;text-align:center;">大尺寸图片，180x180像素</span>
    
                    <canvas id="preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
                    <span style="position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸图片 100x100像素</span>
    
                    <canvas id="preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
                    <span style="position:absolute;left:245px;top:210px;width:70px;text-align:center;">小尺寸图片 50x50像素</span>
                </div>
            </div>
    
        </div>
    	<script type="text/javascript" src='jquery-1.7.2.min.js'></script>
    	<script type="text/javascript" src='imagecropper.js'></script>
        <script type="text/javascript">
    		var cropper;
    		function init(){   
    		    //绑定
    		    cropper = new ImageCropper(300, 300, 180, 180);
    		    cropper.setCanvas("cropper");
    		    cropper.addPreview("preview180");
    		    cropper.addPreview("preview100");
    		    cropper.addPreview("preview50");
    		    //检测用户浏览器是否支持imagecropper插件
    		    if(!cropper.isAvaiable())
    		    {
    		        alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
    		    }
    		}
    
    		//打开本地图片
    		function selectImage(fileList){
    		    cropper.loadImage(fileList[0]);
    		}
    
    		//旋转图片
    		function rotateImage(e){
    		    switch(e.target.id)
    		    {
    		        case "rotateLeftBtn":
    		            cropper.rotate(-90);
    		            break;
    		        case "rotateRightBtn":
    		            cropper.rotate(90);
    		            break;
    		    }
    		}
    
    		//上传图片
    		function saveImage(){
    		    //选个你需要的大小
    		    var imgData = cropper.getCroppedImageData(180, 180);
    		    console.log("上传了："+imgData);
    		    //在这里写你的上传代码
    		}
    	</script>
    </body>
    </html>

imagecropper.js插件源码

/*多尺寸 zc*/
    (function (i) {
        var c = function (a, b, d, e) {
            this.width = a;
            this.height = b;
            this.cropWidth = d;
            this.cropHeight = e;
            this.imageContext = this.imageCanvas = this.image = null;
            this.imageScale = 1;
            this.imageViewTop = this.imageViewLeft = this.imageTop = this.imageLeft = this.imageRotation = 0;
            this.context = this.canvas = null;
            this.previews = [];
            this.maskGroup = [];
            this.maskAlpha = 0.4;
            this.maskColor = "#fff";
            this.cropTop = this.cropLeft = 0;
            this.cropViewWidth = d;
            this.cropViewHeight = e;
            this.dragSize = 7;
            this.dragColor = "#fff";
            this.mouseY = this.mouseX = this.dragTop =
            this.dragLeft = 0;
            this.isResizing = this.isMoving = this.inDragger = this.inCropper = false;
            this.cropStartHeight = this.cropStartWidth = this.cropStartTop = this.cropStartLeft = this.mouseStartY = this.mouseStartX = 0
        };
        i.ImageCropper = c;
        c.prototype.setCanvas = function (a) {
            this.canvas = document.getElementById(a) || a;
            this.context = this.canvas.getContext("2d");
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.canvas.oncontextmenu = this.canvas.onselectstart = function () {
                return false
            };
            this.imageCanvas = document.createElement("canvas");
            this.imageContext = this.imageCanvas.getContext("2d");
            this.imageCanvas.width = this.width;
            this.imageCanvas.height = this.height
        };
        c.prototype.addPreview = function (a) {
            this.previews.push((document.getElementById(a) || a).getContext("2d"))
        };
        c.prototype.loadImage = function (a) {
            if (this.isAvaiable() && this.isImage(a)) {
                var b = new FileReader,
                    d = this;
                b.readAsDataURL(a);
                b.onload = function (e) {
                    if (!d.image) d.image = new Image;
                    d.image.onload = function () {
                        d._init()
                    };
                    d.image.src = e.target.result
                }
            }
        };
        c.prototype._init = function () {
            var a =
            Math.min(this.width / this.image.width, this.height / this.image.height);
            if (a > 1) a = Math.min(this.cropViewWidth / this.image.width, this.cropViewHeight / this.image.height);
            if (this.image.width * a < this.cropViewWidth) a = Math.min(a, this.cropViewWidth / this.image.width);
            if (this.image.height * a < this.cropViewHeight) a = Math.min(a, this.cropViewHeight / this.image.height);
            this.imageViewLeft = this.imageLeft = (this.width - this.image.width * a) / 2;
            this.imageViewTop = this.imageTop = (this.height - this.image.height * a) / 2;
            this.imageScale = a;
            this.imageRotation = 0;
            a = Math.min(this.image.width * a, this.image.height * a);
            this.cropViewWidth = Math.min(a, this.cropWidth);
            this.cropViewHeight = Math.min(a, this.cropHeight);
            this.cropLeft = (this.width - this.cropViewWidth) / 2;
            this.cropTop = (this.height - this.cropViewHeight) / 2;
            this.dragLeft = this.cropLeft + this.cropViewWidth - this.dragSize / 2;
            this.dragTop = this.cropTop + this.cropViewHeight - this.dragSize / 2;
            this._update();
            var b = this;
            this.canvas.onmousedown = function (d) {
                b._mouseHandler.call(b, d)
            };
            this.canvas.onmouseup = function (d) {
                b._mouseHandler.call(b, d)
            };
            this.canvas.onmousemove = function (d) {
                b._mouseHandler.call(b, d)
            }
        };
        c.prototype._mouseHandler = function (a) {
            if (a.type == "mousemove") {
                var b = this.canvas.getClientRects()[0];
                this.mouseX = a.pageX - b.left - $(window).scrollLeft();
                this.mouseY = a.pageY - b.top - $(window).scrollTop();
                this._checkMouseBounds();
                this.canvas.style.cursor = this.inCropper || this.isMoving ? "move" : this.inDragger || this.isResizing ? "se-resize" : "";
                this.isMoving ? this._move() : this.isResizing && this._resize()
            } else if (a.type == "mousedown") {
                this.mouseStartX = this.mouseX;
                this.mouseStartY = this.mouseY;
                this.cropStartLeft = this.cropLeft;
                this.cropStartTop = this.cropTop;
                this.cropStartWidth = this.cropViewWidth;
                this.cropStartHeight = this.cropViewHeight;
                this.inCropper ? this.isMoving = true : this.inDragger && (this.isResizing = true)
            } else if (a.type == "mouseup") this.isMoving = this.isResizing = false
        };
        c.prototype._checkMouseBounds = function () {
            this.inCropper = this.mouseX >= this.cropLeft && this.mouseX <= this.cropLeft + this.cropViewWidth && this.mouseY >= this.cropTop && this.mouseY <= this.cropTop + this.cropViewHeight;
            this.inDragger = this.mouseX >= this.dragLeft && this.mouseX <= this.dragLeft + this.dragSize && this.mouseY >= this.dragTop && this.mouseY <= this.dragTop + this.dragSize;
            this.inCropper = this.inCropper && !this.inDragger
        };
        c.prototype._move = function () {
            var a = this.mouseY - this.mouseStartY;
            this.cropLeft = Math.max(this.imageViewLeft, this.cropStartLeft + (this.mouseX - this.mouseStartX));
            this.cropLeft = Math.min(this.cropLeft, this.width - this.imageViewLeft - this.cropViewWidth);
            this.cropTop = Math.max(this.imageViewTop, this.cropStartTop + a);
            this.cropTop = Math.min(this.cropTop, this.height - this.imageViewTop - this.cropViewHeight);
            this.dragLeft = this.cropLeft + this.cropViewWidth - this.dragSize / 2;
            this.dragTop = this.cropTop + this.cropViewHeight - this.dragSize / 2;
            this._update()
        };
        c.prototype._resize = function () {
            var a = Math.min(this.mouseX - this.mouseStartX, this.mouseY - this.mouseStartY),
                b = Math.max(10, this.cropStartWidth + a);
            a = Math.max(10, this.cropStartHeight + a);
            b = Math.min(b, this.width - this.cropStartLeft - this.imageViewLeft);
            a = Math.min(a, this.height - this.cropStartTop - this.imageViewTop);
            this.cropViewWidth =
            this.cropViewHeight = Math.round(Math.min(b, a));
            this.dragLeft = this.cropLeft + this.cropViewWidth - this.dragSize / 2;
            this.dragTop = this.cropTop + this.cropViewHeight - this.dragSize / 2;
            this._update()
        };
        c.prototype.rotate = function (a) {
            if (this.image) {
                this.imageRotation += a;
                this.imageViewLeft = (a = Math.abs(this.imageRotation % 180) == 90) ? this.imageTop : this.imageLeft;
                this.imageViewTop = a ? this.imageLeft : this.imageTop;
                this.cropLeft = (this.width - this.cropViewWidth) / 2;
                this.cropTop = (this.height - this.cropViewHeight) / 2;
                this.dragLeft =
                this.cropLeft + this.cropViewWidth - this.dragSize / 2;
                this.dragTop = this.cropTop + this.cropViewHeight - this.dragSize / 2;
                this._update()
            }
        };
        c.prototype._update = function () {
            this.context.clearRect(0, 0, this.width, this.height);
            this._drawImage();
            this._drawMask();
            this._drawDragger();
            this._drawPreview()
        };
        c.prototype._drawImage = function () {
            this.imageContext.clearRect(0, 0, this.width, this.height);
            this.imageContext.save();
            var a = this.imageRotation % 360;
            this.imageContext.translate(this.imageViewLeft, this.imageViewTop);
            this.imageContext.scale(this.imageScale, this.imageScale);
            this.imageContext.rotate(this.imageRotation * Math.PI / 180);
            switch ((360 - a) % 360) {
            case 90:
                this.imageContext.drawImage(this.image, -this.image.width, 0);
                break;
            case 180:
                this.imageContext.drawImage(this.image, -this.image.width, -this.image.height);
                break;
            case 270:
                this.imageContext.drawImage(this.image, 0, -this.image.height);
                break;
            default:
                this.imageContext.drawImage(this.image, 0, 0)
            }
            this.imageContext.restore();
            this.context.drawImage(this.imageCanvas, 0, 0)
        };
        c.prototype._drawPreview = function () {
            for (var a =
            0; a < this.previews.length; a++) {
                var b = this.previews[a];
                b.clearRect(0, 0, b.canvas.width, b.canvas.height);
                b.save();
                b.drawImage(this.imageCanvas, this.cropLeft, this.cropTop, this.cropViewWidth, this.cropViewHeight, 0, 0, b.canvas.width, b.canvas.height);
                b.restore()
            }
        };
        c.prototype._drawMask = function () {
            this._drawRect(this.imageViewLeft, this.imageViewTop, this.cropLeft - this.imageViewLeft, this.height, this.maskColor, null, this.maskAlpha);
            this._drawRect(this.cropLeft + this.cropViewWidth, this.imageViewTop, this.width - this.cropViewWidth - this.cropLeft + this.imageViewLeft, this.height, this.maskColor, null, this.maskAlpha);
            this._drawRect(this.cropLeft, this.imageViewTop, this.cropViewWidth, this.cropTop - this.imageViewTop, this.maskColor, null, this.maskAlpha);
            this._drawRect(this.cropLeft, this.cropTop + this.cropViewHeight, this.cropViewWidth, this.height - this.cropViewHeight - this.cropTop + this.imageViewTop, this.maskColor, null, this.maskAlpha)
        };
        c.prototype._drawDragger = function () {
            this._drawRect(this.dragLeft, this.dragTop, this.dragSize, this.dragSize, null, this.dragColor, null)
        };
        c.prototype._drawRect = function (a, b, d, e, f, g, h) {
            this.context.save();
            if (f !== null) this.context.fillStyle = f;
            if (g !== null) this.context.strokeStyle = g;
            if (h !== null) this.context.globalAlpha = h;
            this.context.beginPath();
            this.context.rect(a, b, d, e);
            this.context.closePath();
            f !== null && this.context.fill();
            g !== null && this.context.stroke();
            this.context.restore()
        };
        c.prototype.getCroppedImageData = function (a, b, d) {
            var e = document.createElement("canvas");
            e.width = a || this.cropWidth;
            e.height = b || this.cropHeight;
            e.getContext("2d").drawImage(this.imageCanvas, this.cropLeft, this.cropTop, this.cropViewWidth, this.cropViewHeight, 0, 0, e.width, e.height);
            return e.toDataURL(d || "image/jpeg")
        };
        c.prototype.isAvaiable = function () {
            return typeof FileReader !== "undefined"
        };
        c.prototype.isImage = function (a) {
            return /image/i.test(a.type)
        }
    })(window);