图片裁剪上传
程序员文章站
2022-03-02 12:47:54
...
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 onload="init();">
<div id="container">
<a id="selectBtn" href="javascript:void(0);" onclick="document.getElementById('input').click();">选择</a>
<a id="saveBtn" href="javascript:void(0);" onclick="saveImage();">保存</a>
<input type="file" id="input" size="10" style="visibility:hidden;" onchange="selectImage(this.files)" />
<div id="wrapper">
<canvas id="cropper"></canvas>
<a id="rotateLeftBtn" href="javascript:void(0);" onclick="rotateImage(event);">向左旋转</a>
<a id="rotateRightBtn" href="javascript:void(0);" onclick="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);