Angular 图片裁剪上传插件

分类：Angularjs作者：编程之家用户

本文将介绍基于Angular的图片裁剪上传插件。
github: https://github.com/licaomeng/angular-image-upload
希望大家帮忙Star一下我的项目，我会持续更新~O(∩_∩)O

插件效果如下：

该插件的图片裁剪是通过图片的放大、缩小、拖动完成的。而不同于我们通常所见到的拖动剪裁范围，进行的图片剪裁。这是一种反向思维。

imgZoomCanvas.js

图片的放大、缩小、拖动，全部是在html5的Canvas上面完成的。实现该算法的核心代码封装在 imgZoomCanvas.js 里面。

/** * Created by Caomeng Li on 8/23/2016. */
angular.module('appModule')
    .factory('imgZoomCanvas',[function () {

        //singleton
        var INSTANCE = null;

        var getInstance = function (options) {
            return INSTANCE || ( INSTANCE = new CanvasZoom(options) );
        }

        var destroyInstance = function () {
            if (INSTANCE) {
                INSTANCE = null;
            }
        }

        var stopAnimate = function () {
            return INSTANCE ? INSTANCE.stopAnimate() : null;
        }

        var onZoom = function (zoom) {
            return INSTANCE ? INSTANCE.doZoom(zoom) : null;
        }

        var CanvasZoom = function (options) {
            if (!options || !options.canvas) {
                throw 'CanvasZoom constructor: missing arguments canvas';
            }
            if (!options.image) {
                throw 'CanvasZoom constructor: missing arguments image';
            }

            this.canvas = options.canvas;
            this.image = options.image;
            this.currentAnimationId = 0;
            this.canvas.width = this.canvas.clientWidth;
            this.canvas.height = this.canvas.clientHeight;
            this.context = this.canvas.getContext('2d');

            this.lastX = 0;
            this.lastY = 0;

            this.position = {
                x: 0,y: 0
            };

            this.initPosition = {
                x: 0,y: 0
            }

            this.scale = {
                x: 1,y: 1
            };

            this.initScale = {
                x: 1,y: 1
            };

            this.init = false;

            this.checkRequestAnimationFrame();
            this.currentAnimationId = requestAnimationFrame(this.animate.bind(this));

            this.setEventListeners();
        }

        CanvasZoom.prototype = {
            stopAnimate: function () {
                cancelAnimationFrame(this.currentAnimationId);
            },animate: function () {
                this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
                var imgWidth = this.image.width,imgHeight = this.image.height;
                if (!this.init) {
                    if (imgWidth > imgHeight) {
                        this.scale.x = this.scale.y = this.canvas.height / imgHeight;
                    } else {
                        this.scale.x = this.scale.y = this.canvas.width / imgWidth;
                    }
                    this.initScale.x = this.scale.x;
                    this.initScale.y = this.scale.y;
                }
                var currentWidth = (this.image.width * this.scale.x);
                var currentHeight = (this.image.height * this.scale.y);

                if (!this.init) {
                    if (imgWidth > imgHeight) {
                        this.position.x = (currentWidth - this.canvas.width) / 2;
                        this.position.x = this.position.x > 0 ? -this.position.x : this.position.x;
                    } else {
                        this.position.y = (currentHeight - this.canvas.height) / 2;
                        this.position.y = this.position.y > 0 ? -this.position.y : this.position.y;
                    }
                    this.initPosition.x = this.position.x;
                    this.initPosition.y = this.position.y
                    this.init = true;
                }

                this.context.drawImage(this.image,this.position.x,this.position.y,currentWidth,currentHeight);
                this.currentAnimationId = requestAnimationFrame(this.animate.bind(this));
            },doZoom: function (zoom) {
                if (!zoom) return;

                //new scale
                var currentScale = this.scale.x;
                var newScale = this.scale.x + zoom * this.scale.x / 100;

                //some helpers
                var deltaScale = newScale - currentScale;
                var currentWidth = (this.image.width * this.scale.x);
                var currentHeight = (this.image.height * this.scale.y);
                var deltaWidth = this.image.width * deltaScale;
                var deltaHeight = this.image.height * deltaScale;

                //by default scale doesnt change position and only add/remove pixel to right and bottom
                //so we must move the image to the left to keep the image centered
                //ex: coefX and coefY = 0.5 when image is centered <=> move image to the left 0.5x pixels added to the right
                var canvasmiddleX = this.canvas.clientWidth / 2;
                var canvasmiddleY = this.canvas.clientHeight / 2;
                var xonmap = (-this.position.x) + canvasmiddleX;
                var yonmap = (-this.position.y) + canvasmiddleY;
                var coefX = -xonmap / (currentWidth);
                var coefY = -yonmap / (currentHeight);
                var newPosX = this.position.x + deltaWidth * coefX;
                var newPosY = this.position.y + deltaHeight * coefY;

                //edges cases
                var newWidth = currentWidth + deltaWidth;
                var newHeight = currentHeight + deltaHeight;

                if (newPosX > 0) {
                    newPosX = 0;
                }
                if (newPosX + newWidth < this.canvas.clientWidth) {
                    newPosX = this.canvas.clientWidth - newWidth;
                }

                if (newHeight < this.canvas.clientHeight) return;
                if (newPosY > 0) {
                    newPosY = 0;
                }
                if (newPosY + newHeight < this.canvas.clientHeight) {
                    newPosY = this.canvas.clientHeight - newHeight;
                }

                //finally affectations
                this.scale.x = newScale;
                this.scale.y = newScale;
                this.position.x = newPosX;
                this.position.y = newPosY;

                //edge cases
                if (this.scale.x < this.initScale.x) {
                    this.scale.x = this.initScale.x;
                    this.scale.y = this.initScale.x;
                    this.position.x = this.initPosition.x;
                    this.position.y = this.initPosition.y;
                }
            },doMove: function (relativeX,relativeY) {
                if (this.lastX && this.lastY) {

                    console.log('relativeX',relativeX);
                    console.log('relativeY',relativeY);

                    console.log('this.lastX',this.lastX);
                    console.log('this.lastY',this.lastY);

                    var deltaX = relativeX - this.lastX;
                    var deltaY = relativeY - this.lastY;
                    console.log('deltaX',deltaX);
                    console.log('deltaY',deltaY);

                    var currentWidth = (this.image.width * this.scale.x);
                    var currentHeight = (this.image.height * this.scale.y);

                    this.position.x += deltaX;
                    this.position.y += deltaY;
                    console.log('this.position.x',this.position.x);
                    console.log('this.position.y',this.position.y);

                    // edge cases
                    if (this.position.x >= 0) {
                        this.position.x = 0;
                    } else if (this.position.x < 0 && this.position.x + currentWidth < this.canvas.width) {
                        this.position.x = this.canvas.width - Math.round(currentWidth);
                    }

                    if (this.position.y >= 0) {
                        this.position.y = 0;
                    } else if (this.position.y < 0 && this.position.y + currentHeight < this.canvas.height) {
                        this.position.y = this.canvas.height - Math.round(currentHeight);
                    }
                }
                this.lastX = relativeX;
                this.lastY = relativeY;
            },setEventListeners: function () {
                this.canvas.addEventListener('mousedown',function (e) {
                    this.mdown = true;
                    this.lastX = 0;
                    this.lastY = 0;
                }.bind(this));

                this.canvas.addEventListener('mouseup',function (e) {
                    this.mdown = false;
                }.bind(this));

                this.canvas.addEventListener('mousemove',function (e) {
                    var relativeX = e.pageX - this.canvas.getBoundingClientRect().left;
                    var relativeY = e.pageY - this.canvas.getBoundingClientRect().top;

                    if (e.target == this.canvas && this.mdown) {
                        this.doMove(relativeX,relativeY);
                    }

                    if (relativeX <= 0 || relativeX >= this.canvas.clientWidth || relativeY <= 0 || relativeY >= this.canvas.clientHeight) {
                        this.mdown = false;
                    }
                }.bind(this));
            },checkRequestAnimationFrame: function () {
                var lastTime = 0;
                var vendors = ['ms','moz','webkit','o'];
                for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
                    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
                    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
                        || window[vendors[x] + 'CancelRequestAnimationFrame'];
                }

                if (!window.requestAnimationFrame) {
                    window.requestAnimationFrame = function (callback,element) {
                        var currTime = new Date().getTime();
                        var timeToCall = Math.max(0,16 - (currTime - lastTime));
                        var id = window.setTimeout(function () {
                            callback(currTime + timeToCall);
                        },timeToCall);
                        lastTime = currTime + timeToCall;
                        return id;
                    };
                }

                if (!window.cancelAnimationFrame) {
                    window.cancelAnimationFrame = function (id) {
                        clearTimeout(id);
                    };
                }
            }
        }
        return {
            getInstance: getInstance,destroyInstance: destroyInstance,stopAnimate: stopAnimate,onZoom: onZoom
        };
    }]);

imgZoomCanvas开放出了四个方法：

getInstance (生成单体实例) destroyInstance (销毁单体实例) stopAnimate (停止requestAnimationFrame产生的动画) onZoom (图片缩放。传入缩放的参数，放大为正，缩小为负)

imgUploader.js

接下来介绍imgUpload这个directive，就是上面那个GIF看到的图片上传组件。逻辑代码封装在imgUploader.js里面你可以自己定制这四个方法：

deleteAvatar(移除当前图片，并且上传到服务器) uploadAvatar(上传当前图片) zoomOut zoomIn (它们负责图片缩放的步长，为一正一负，参数可以自己慢慢调整。)

另外该directive开放出一个回调方法onUpload，可以在你的业务controller里面实现相关图片上传logic。onUpload有三个参数：

(image,isDelete,isHasAvatar)

第一个image是从Canvas上面导出的base64具体的实现在刚才介绍的deleteAvatar中：
canvas.toDataURL('png')

imgUploader对应的html：

<div id="img-uploader">
    <canvas class="avatar" id="myCanvas" width="150" height="150"></canvas>
    <div style="position: relative;left:156px;top:-1px">
        <div id="delete-avatar" ng-click="deleteAvatar()" class="delete-avatar">
            <img src="./image/delete.png">
        </div>
        <div class="edit-avatar">
            <img src="./image/edit.png">

            <div id="container" class="container">
                <input class="file-picker" id="file" type="file"/>
            </div>
        </div>
        <div id="upload-avatar" ng-show="fileSelected" ng-click="uploadAvatar()" class="upload-avatar">
            <img src="./image/upload.png">
        </div>
        <div id="zoom-out" ng-show="fileSelected" ng-click="zoomOut()" class="zoom-out">
            <img src="./image/zoom_out.png">
        </div>
        <div id="zoom-in" ng-show="fileSelected" ng-click="zoomIn()" class="zoom-in">
            <img src="./image/zoom_in.png">
        </div>
    </div>
</div>

最后就是我们的页面逻辑代码了，页面controller中只需要实现上面提到的回调方法onUpload即可：

$scope.upload = function (image,isHasAvatar) {
      // Write your image upload logic here
 }

页面html只需要加入我们刚才的directive imageUploader:

<img-uploader on-upload="upload(image,isHasAvatar)" image="image" is-editable="isEditable"></img-uploader>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解，前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要，通俗易懂，而有些中文文档读起来特别费力，基础差、底子薄的有可能一会就会被绕晕了，最起码英文文档中的代码与中文文档中的代码是一致的，但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于 5KB。   其中用到的软件：   Chart.js框架，版本1.0.2，一
AngularJS进阶(三十七)IE浏览器兼容性后续
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题，结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11-
AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目需求，需要在首页搜索框中添加语音输入功能，考虑到科大讯飞语音业务的强大能力，遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示： 涉及的源代码如下所示: //语音识别$rootScope.startRecognize = function() {var speech;
AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨前言 在修复控制角标正确变化过程中，发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》，如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
AngularJS进阶(三)HTML:让表单、文本框只读，不可编辑的方法
HTML:让表单、文本框只读，不可编辑的方法有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使中国">的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑
在AngularJS应用中实现微信认证授权遇到的坑前言 项目开发过程中，移动端新近增加了一个功能“微信授权登录”，由于自己不是负责移动端开发的，但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作，谁让自己是负责人呢？原来负责人就是负责最后把所有的BUG解决掉。 首先，熟悉一下微信授权部分的源代码，如下所示:
AngularJS进阶(二十七)实现二维码信息的集成思路
AngularJS实现二维码信息的集成思路需求 实现生成的二维码包含订单详情信息。思路获取的内容数据如下: 现在可以获取到第一级数据，第二级数据data获取不到。利用第一级数据的获取方法获取不到第二级数据。for(i in data){alert(i); //获得属性 if(typeof(data[i]) == "o
AngularJS进阶(十五)Cookie ‘data‘ possibly not set or overflowed because it was too large
Cookie'data'possiblynotsetoroverflowedbecauseitwastoolarge(5287>4096bytes)!故事起源 项目开发过程中遇到以上问题，刚开始以为只是个警告，没太在意。后来发现直接影响到了程序的执行效果。果断寻找解决方法。问题分析 根据Chrome浏览器信息定位，显示以下代码存在错误:
AngularJS进阶(九)控制器controller之间如何通信
AngularJS控制器controller之间如何通信angular控制器通信的方式有三种：1，利用作用域继承的方式。即子控制器继承父控制器中的内容2，基于事件的方式。即$on,$emit,$boardcast这三种方式3，服务方式。写一个服务的单例然后通过注入来使用利用作用域的继承方式由于作用域的继承是基于js的原型继承方式，所以这里分为两种情况，当作用域上面的值
AngularJS进阶(二)AngularJS路由问题解决
AngularJS路由问题解决遇到了一个棘手的问题：点击优惠详情时总是跳转到药店详情页面中去。再加一层地址解决了，但是后来发现问题还是来了:Couldnotresolve'yhDtlMaintain/yhdetail'fromstate'yhMaintain'药店详情http://192.168.1.118:8088/lmapp/index.html#/0优惠券详情
AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href
书海拾贝之特殊的ng-src和ng-href在说明这两个指令的特殊之前，需要先了解一下ng的启动及执行过程，如下：1)浏览器加载静态HTML文件并解析为DOM；2)浏览器加载angular.js文件；3)angular监听DOMContentLoaded事件，监听到时开始启动；4)angular寻找ng-app指令，确定作用范围；
AngularJS进阶(八)实现页面跳转并进行参数传递
angularjs实现页面跳转并进行参数传递Angular页面传参有多种办法，我在此列举4种最常见的:1.基于ui-router的页面跳转传参(1)在AngularJS的app.js中用ui-router定义路由，比如现在有两个页面，一个页面（producers.html）放置了多个producers，点击其中一个目标，页面跳转到对应的producer页，同时将producerId
AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
AngularJS实现表格数据的编辑,更新和删除效果实现首先，我们先建立一些数据，当然你可以从你任何地方读出你的数据var app = angular.module('plunker', ['ui.bootstrap']);app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $sc
AngularJS进阶(二十三)ANGULAR三宗罪之版本陷阱
ANGULAR三宗罪之版本陷阱      坑！碰到个大坑，前面由于绑定日期时将angular版本换为angular-1.3.0-beta.1时，后来午睡后，登录系统，发现无论如何都登陆不进去了，经过调试，发现数据视图已经无法实现双向绑定了。自己还以为又碰到了“僵尸程序”了呢，对比药店端的程序发现并没有什么不同之处。后来自己经过一番思索才隐约感觉到是不是angular的版本造成的，将版本换为之前
AngularJS进阶(二十六)实现分页操作
JS实现分页操作前言 项目开发过程中，进行查询操作时有可能会检索出大量的满足条件的查询结果。在一页中显示全部查询结果会降低用户的体验感，故需要实现分页显示效果。受前面“JS实现时间选择插件”的启发，自己首先需要查看一下HTML5能否实现此效果。 整了半天，不管是用纯CSS3也好，还是用tmpagination.js还是bootstrap组件也好，到最后自己静下心来理
AngularJS进阶(三十五)浏览器兼容性解决之道
浏览器兼容性解决之道前言 浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说，兼容IE6的性价比已经很低，而IE7则几乎已经绝迹。所以，常见的兼容性下限是IE8。这也正是Angular1.2x的兼容性目标，Angular团队声明：Angular的持续集成服务器会在IE8下运行所有的测试。但这些测试不会运行在IE7及以下版本，它们也不会保证An
AngularJS进阶(十三)JS利用正则表达式校验手机号
JS利用正则表达式校验手机号绪 由于项目需求，需要在前端实现手机号码的校验。当然了，对于基本的格式校验应该放在客户端进行，而不需要再将待校验的手机号发送至服务端，在服务端完成校验，然后将校验结果返回给客户端，客户端根据返回的结果再进行进一步的处理。如此反而复杂化了处理过程。 其实，处于安全考虑，应该在服务端进行二次校验。以下为在客户端的JS中校验手机号码格式
AngularJS进阶(三十九)基于项目实战解析ng启动加载过程
基于项目实例解析ng启动加载过程前言 在AngularJS项目开发过程中，自己将遇到的问题进行了整理。回过头来总结一下angular的启动过程。 下面以实际项目为例进行简要讲解。1.载入ng库2.等待，直到DOM树构造完毕。3.发现ng-app，自动进入启动引导阶段。4.根据ng-app名称找到相应的路由。5.加载默认地址。6.Js顺序执行，加载相应模版页sys_tpls/
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot