Angular 图片裁剪上传插件

本文详细介绍了基于Angular的图片裁剪上传插件,该插件使用imgZoomCanvas.js实现图片在Canvas上的放大、缩小和拖动裁剪。核心代码封装于imgZoomCanvas.js,提供四个方法。此外,通过imgUploader.js创建的imgUpload directive允许自定义上传逻辑,并通过onUpload回调在业务controller中处理上传。页面实现只需包含imageUploader指令。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文将介绍基于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);
                v
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值