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>

  

时间: 2024-11-05 13:29:59

AngularJs + html 5 实现 裁剪上传的相关文章

小议头像预览裁剪上传的实现

在做头像上传的时候,浏览器默认是无法取得本地图片的,当然 HTML5 是可以的.不过IE6-8怎么破?目前比较通用的方案都是 flash 解决. 说道头像预览和裁剪,我最熟悉的就是 Discuz 的那个了,非常方便好用.不仅可以选择本地图片,还能直接调用摄像头拍摄,当然前提是你必须有个摄像头. 于是我心血来潮的想把他剥离出来给项目用,于是有就了此文..我就不说怎么提取怎么调用,就简单的谈谈他是怎么处理图片好了,反正不是我们想的那样,和我想的出入非常大. 这个插件呢,差不多分为四步处理:1. 前台

springMVC 头像裁剪上传并等比压

第一次写头像裁剪上传,原本想着直接本地预览裁剪再上传,可是时间有限,jquery.jcrop貌似并没有对 假设是ie下图片预览效果是滤镜做的  做出对应处理,也没有时间去改;仅仅好将就一下先把图片上传上去再预览 1.先看一下我引入的js <script src="${adminBasePath}resources/js/jquery.1.8.3.js"></script> <script src="${adminBasePath}resource

html5 canvas头像裁剪上传

效果: 在博客里有另一篇头像裁剪是用actionscript实现的头像裁剪上传,这里拥护html5,用canvas实现下.前两次的右键是为了说明不是用flash做的. 如果想要更严谨的,有技术支持的这个东西的话,可以用kissy的http://gallery.kissyui.com/imgcrop/2.0/guide/index.html. 原理很简单:裁剪框是用html做的,canvas的作用在于每次移动,变形后根据裁剪框的位置坐标以及大小,绘制图像的部分并缩放,还有绘制裁剪框区域外的灰色区域

java头像裁剪上传

原文:java头像裁剪上传 源代码下载地址:http://www.zuidaima.com/share/1550463771118592.htm jsp页面实现头像裁剪上传,带进度条,后台java接收 上传成功后

图片裁剪上传Jcrop

<link rel="stylesheet" href="../css/jquery.Jcrop.css"> <script src="../js/jquery.Jcrop.js"></script> 先是两个必不可少的东西 <style type="text/css"> /* Apply these styles only when #preview-pane has been

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看看核心代码: post的是base64,后端处理base64转存图片. 1 $("#clipArea").photoClip({ 2 width: 200, 3 height: 200, 4 file: "#file", 5 view: "#view"

使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码

?? 1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例: 3.编写的html代码如下: <div id="light" class="white_content"> <div class="vatitlee"> 封面截取 <div class=&

vue中使用cropperjs进行图片裁剪上传

下面代码直接就可以复制使用了,但是需要在本地下个cropperjs,下载命令:npm install cropperjs --save-dev <template> <div id="yin"> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img

图片裁剪上传插件——jquery.photoClip.js

想要裁剪图片上传: 需要依赖的的插件为: [jquery.photoClip.js] 插件[iscroll-zoom.js] 插件[hammer.js] 插件 [lrz.all.bundle.js] 插件 [jquery-2.1.3.min.js] 在前端页面调取: <div id="clipArea"></div> <input type="file" id="file"> <button id=&qu