基于angular上传图片并能对图片裁剪，放大缩小，压缩size及在图片上添加文字等编辑操作，并能手动限制上传图片数量

最新推荐文章于 2024-08-23 07:40:51 发布
最新推荐文章于 2024-08-23 07:40:51 发布
阅读量3.4k 收藏
点赞数
分类专栏： Angular 文章标签： 图片编辑 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36146776/article/details/79239612
版权

最近公司业务需要客户在进行上传图片时，不满足要求的图片必须进行编辑后才能上传，满足条件的直接可以上传。

于是花了不少时间来研究这个，想必学习angualrjs的人都知道，angualr不直接对dom进行操作，而网上的各种案例教程基本上都是用的document.getElementById("img")等基于dom进行图片的操作。若要解决这个问题，必须跳出这个固定思维——

抽空将我实现的原理进行一一讲解

要是有人需要源代码的话等我把代码优化完毕后也可以进行分享。。。。。

先看实现效果

吃瓜群众欢乐多
关注
专栏目录
Angular 图片裁剪上传插件
licaomeng的专栏
08-23 2648
本文将介绍基于Angular的图片裁剪上传插件。 github: https://github.com/licaomeng/angular-image-upload 插件效果如下： 该插件的图片裁剪是通过图片的放大、缩小、拖动完成的。而不同于我们通常所见到的拖动剪裁范围，进行的图片剪裁。这是一种反向思维。imgZoomCanvas.js图片的放大、缩小、拖动，全部是在html5的Canvas上
angular 上传图片并显示_AngularJS实现图片上传和预览功能的方法分析
weixin_35598388的博客
12-31 660
本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考，具体如下：html5原生方法先看一下html5原生方法上传和预览图片的实现：// var imgPreview = document.getElementById("img-preview");// var imgInput= document.getElementById("img-input");imgInpu...
angular仿微信图片放大功能
qq_25610161的博客
04-19 1752
近期要写一个移动端两个手指图片放大的功能，由于我们项目是angular框架。一时间没有思路只能百度找一些angualr的文档，果然一下就出来了，而且非常实用。我用根据自己的需求改动了一下，最后完成的效果是图片自适应屏幕大小，图片超过一屏的时候图片是出现滚动的效果。没有超过一屏图片会居中显示。上下留有黑色背景。下面看代码上面用了ng-zoom 和ng-pinch 的指令，我的方法是根据指令判断图片大...
Angular Editor Fabric.js 使用教程
最新发布
gitblog_00748的博客
08-23 823
Angular Editor Fabric.js 使用教程 angular-editor-fabric-jsDrag-and-drop editor based on Fabricjs for Angular.io项目地址:https://gitcode.com/gh_mirrors/an/angular-editor-fabric-js 项目介绍 Angular Editor Fabric.j...
Angular图片缩放指令（手机端，手动放大缩小）
LuQiaoYa的博客
03-14 2190
Angular手机端图片放大缩小 首先在controller中写一个指令，Angular中使用.directive声明一个指令 var demoForDirective = angular.module('demoForDirective', ['demoForDirective.controller']); //图片缩放指令 demoForDirective.directive('p...
angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)
aoxiao6487的博客
09-18 586
笔记:angularjs1 制作自定义图片查看器(可旋转、放大、缩小、拖拽) 2018-01-12 更新 可以在我的博客 查看我 已经封装好的 纯 js写的图片查看器插件 博客链接 懒得把它封装成插件(其实把angularjs的点击事件成js的点击事件就行了) 下面贴代码(打包好的 记得用服务器打开、火狐也行) 打包文件(百度网盘上) ...
推荐使用：uiCropper - 简洁高效的AngularJS图像裁剪库
gitblog_00031的博客
06-06 349
推荐使用：uiCropper - 简洁高效的AngularJS图像裁剪库 ui-cropperImage Crop directive for AngularJS项目地址:https://gitcode.com/gh_mirrors/ui/ui-cropper 项目介绍 uiCropper是一个专为AngularJS设计的轻量级图像裁剪指令，它支持圆形、正方形和矩形裁剪。这个项目的目标是提供一个...
angularjs客户端实现压缩图片文件并上传实例
10-23
主要介绍了angularjs客户端实现压缩图片文件并上传实例,本文直接给出代码实例,需要的朋友可以参考下
Angular下H5上传图片的方法（可多张上传）
11-26
在Angular框架下实现H5的图片上传功能，可以支持多张图片上传，主要涉及的关键技术包括自定义指令、文件读取、图片预览以及压缩。下面将详细解释这些知识点： 1. **自定义指令 ng-file-select**： Angular本身并不...
angularjs点击图片放大实现上传图片预览
10-20
最后，为了实现图片预览的完整效果，需要在CSS中设置相关的样式，如遮罩层的透明度、位置以及大图的样式等。例如： ```css .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; ...
img-views:angular查看大图（轮播、放大、缩小、旋转、拖拽）
05-13
指令说明 点击图片查看大图 大图旋转、轮播、鼠标滚轮放大或缩小、拖拽 使用示例   组件参数说明 cameraList:'=', //图片列表(array, [{url: '图片地址', title: '图片名称',single:true}]) //single: true不显示切换按钮，false显示切换；默认false，非必须属性 needlessSize:'=', //选填(boolean, 默认false) true:自定义图片大小;false:沿用组件默认大小 width:'=', //选填(int,单位：px,eg:200,默认100) needlessSize为false时无效 height:'=', //选填(int,单位：px,eg:200,默认100) needl
基于angularjs实现图片放大镜效果
11-22
前言 一开始打算用原生的angularjs写，但是发现用原生angularjs，无论如何都不能获取里面图片的宽度和高度，因为angularjs内置的jquery方法里没有winth()  、height()方法。 最好我还是引入了jquery，在同一scope上绑定了宽度高度。下面上源码，顺便我会把里面的一些注意的点说一下。 效果图 首先说明下 1、首先使用了两个同级指令，并在两个同级指令间进行通信，同级指令间通信，非常简单，就是不要让同级的指令生成独立的scope，并且在同一个作用域下就完成了。如果指令scope没有特殊声明，那么就是父scope。指令生成的模板没有特殊意义，除非在特
angular上传图片
07-30
angular实现上传图片，并且可以预览。代码中有注释，非常简单
angular-image-edit:用于编辑图像（裁剪和调整大小）的角度指令
06-15
ImageEdit 角度模块 使用图像，编辑它以适合特定尺寸，您可以使用它随时随地上传 安装 将 angular-image-edit.js 和 angular-image-edi.css 文件复制到您的项目中，并使用正确的路径添加以下行： [removed][removed] <link rel="stylesheet" href="/path/to/scripts/angular-image-edit.css"> 或者，如果您使用的是 bower，则可以将其添加到您的 component.json（或 bower.json）中： "angular-image-edit": "~0.2.0" 或者干脆跑 bower install angular-image-edit 检查对您的 html
ngx-image-cropper:Angular的图像裁剪器
04-29
Angular图像裁剪器 安装 npm install ngx-image-cropper --save 升级说明 有关重大更改和更新说明的列表，请访问。 用法示例 将ImageCropperModule添加到将使用Image Cropper的模块的导入中。 import { NgModule } from '@angular/core'; import { ImageCropperModule } from 'ngx-image-cropper'; @NgModule({ imports: [ ... ImageCropperModule ], declarations: [ ... ], exports: [ ... ], providers: [
angular 裁剪图片——上传图片-文件/及不能再次上传同一文件问题解决
前端的路上
03-04 563
1、npm install ngx-image-cropper --save 2、module导入 import { NgModule } from '@angular/core'; import { ImageCropperModule } from 'ngx-image-cropper'; @NgModule({ imports: [ ... ...
angular8 滚动多个图片加文字组件
Null_Bugs的博客
09-02 324
子组件html <div class="container" [ngStyle]="{ 'grid-template-rows': templateRows, 'grid-template-columns': templateColumns}" (scroll) ="handleScroll($event)" > <ng-conten...
基于angular的图片裁剪
小猴子的博客
04-02 1937
template/cropper.html     //自定义标签[html] view plain copy &lt;div id="item" ng-show="size ==='sm' " class="cropme" style="width: 200px; height: 200px;"&gt;&lt;/div&gt;  //angular.modal[javascript] view
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值