直接上代码
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>
时间: 2024-11-05 13:29:59