AngularJs + html 5 实现 裁剪上传
直接上代码
directive.js
app.directive('fileUploadersm', function () {
return {
restrict: 'E',
transclude: true,
template: '<input type="file" accept="images/*" id="files" >' + '<div class="containertsm"></div><button ng-click="upload()" class="btn btn-danger">确定上传</button><br/>' + '<ul><li ng-repeat="file in files"> - </li></ul>',
controller: function ($scope, $fileUpload) {
$scope.notReady = true;
$scope.addfood = function () {
$fileUpload.upload($scope.files);
};
},
link: function ($scope, $element) {
////////////
var tmp = $('<div class="resizer">' + '<div class="inner">' + '<img class="imgs">' + '<div class="frames"></div>' + '</div>' + '<button class="ok">✓</button>' + '</div>');
$.imageResizer = function () {
if (Uint8Array && HTMLCanvasElement && atob && Blob) {
}
else {
return false;
}
var resizer = tmp.clone();
resizer.image = resizer.find('img')[0];
resizer.frames = resizer.find('.frames');
resizer.okButton = resizer.find('button.ok');
resizer.frames.offset = {
top: 0,
left: 0
};
resizer.okButton.click(function () {
resizer.clipImage();
});
resizer.clipImage = function () {
var nh = this.image.naturalHeight, nw = this.image.naturalWidth, size = nw > nh ? nh : nw;
size = size > 150 ? 150 : size;
var canvas = $('<canvas class="tcanvas" width="' + size + '" height="' + size + '"></canvas>')[0],
ctx = canvas.getContext('2d'),
scale = nw / this.offset.width,
x = this.frames.offset.left * scale,
y = this.frames.offset.top * scale,
w = this.frames.offset.size * scale,
h = this.frames.offset.size * scale;
ctx.drawImage(this.image, x, y, w, h, 0, 0, size, size);
var src = canvas.toDataURL();
this.canvas = canvas;
this.append(canvas);
this.addClass('uploading');
this.removeClass('have-img');
src = src.split(',')[1];
if (!src)
return this.doneCallback(null);
src = window.atob(src);
var ia = new Uint8Array(src.length);
for (var i = 0; i < src.length; i++) {
ia[i] = src.charCodeAt(i);
}
;
this.doneCallback(new Blob([ia], { type: "image/png" }));
Id = new Blob([ia], { type: "image/png" });//这里Id 存放的就是裁剪之后的相片你可以自定义全局参数
};
resizer.resize = function (file, done) {
this.reset();
this.doneCallback = done;
this.setFrameSize(0);
this.frames.css({
top: 0,
left: 0
});
var reader = new FileReader();
reader.onload = function () {
resizer.image.src = reader.result;
reader = null;
resizer.addClass('have-img');
resizer.setFrames();
};
reader.readAsDataURL(file);
};
resizer.reset = function () {
this.image.src = '';
this.removeClass('have-img');
this.removeClass('uploading');
this.find('canvas').detach();
};
resizer.setFrameSize = function (size) {
this.frames.offset.size = size;
return this.frames.css({
width: size + 'px',
height: size + 'px'
});
};
resizer.getDefaultSize = function () {
var width = this.find(".inner").width(), height = this.find(".inner").height();
this.offset = {
width: width,
height: height
};
console.log(this.offset);
return width > height ? height : width;
};
resizer.moveFrames = function (offset) {
var x = offset.x, y = offset.y, top = this.frames.offset.top, left = this.frames.offset.left, size = this.frames.offset.size, width = this.offset.width, height = this.offset.height;
if (x + size + left > width) {
x = width - size;
}
else {
x = x + left;
}
;
if (y + size + top > height) {
y = height - size;
}
else {
y = y + top;
}
;
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
this.frames.css({
top: y + 'px',
left: x + 'px'
});
this.frames.offset.top = y;
this.frames.offset.left = x;
};
(function () {
var time;
function setFrames() {
var size = resizer.getDefaultSize();
resizer.setFrameSize(size);
}
;
window.onresize = function () {
clearTimeout(time);
time = setTimeout(function () {
setFrames();
}, 1000);
};
resizer.setFrames = setFrames;
})();
(function () {
var lastPoint = null;
function getOffset(event) {
event = event.originalEvent;
var x, y;
if (event.touches) {
var touch = event.touches[0];
x = touch.clientX;
y = touch.clientY;
}
else {
x = event.clientX;
y = event.clientY;
}
if (!lastPoint) {
lastPoint = {
x: x,
y: y
};
}
;
var offset = {
x: x - lastPoint.x,
y: y - lastPoint.y
};
lastPoint = {
x: x,
y: y
};
return offset;
}
;
resizer.frames.on('touchstart mousedown', function (event) {
getOffset(event);
});
resizer.frames.on('touchmove mousemove', function (event) {
if (!lastPoint)
return;
var offset = getOffset(event);
resizer.moveFrames(offset);
});
resizer.frames.on('touchend mouseup', function (event) {
lastPoint = null;
});
})();
return resizer;
};
var resizer = $.imageResizer(), resizedImage;
if (!resizer) {
resizer = $("<p>Your browser doesn't support these feature:</p><ul><li>canvas</li><li>Blob</li><li>Uint8Array</li><li>FormData</li><li>atob</li></ul>");
}
;
$('.containertsm').append(resizer);
///////////////////
var fileInput = $element.find('input[type="file"]');
fileInput.bind('change', function (e) {
var file = this.files[0];
resizer.resize(file, function (file) {
resizedImage = file;
});
$scope.notReady = e.target.files.length == 0;
$scope.files = [];
for (i in e.target.files) {
//Only push if the type is object for some stupid-ass reason browsers like to include functions and other junk
if (typeof e.target.files[i] == 'object')
$scope.files.push(e.target.files[i]);
}
});
// var file=this.files[0];
// resizer.resize(file,function(file){
// resizedImage=file;
// });
}
};
});
部分内容 请参照 html5 实现本地上传裁剪 http://www.webrube.com/jquery-html5-web_rube/4300
html 代码
<div class="col-sm-6">
<div>
<file-uploader></file-uploader>
</div>
</div>
