预览本地图片--Angular4

最新推荐文章于 2025-04-04 23:37:04 发布
原创 最新推荐文章于 2025-04-04 23:37:04 发布 · 6.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular4 #本地图片

本文介绍如何在Angular4中实现本地图片预览功能。通过构造函数注入DomSanitizer服务，结合js处理，实现选择图片后即时预览的效果。

今天就是想弄一个，在本地可以预览选择的图片，然后做相应的操作，如上传等。

  • 选择图片的方法：
<input type="file" (change)="onChangeSelectFile($event)">
  • 显示图片
    <div class="header" *ngIf="HeadPortrait">
      <img [src]="imageUrl">
    </div>
  • js怎么处理呢，很简单

                

                
                
        

    


  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
Angular中引入viewerjs实现图片查看器

				
			

			

				

					qq_40020447的博客
				

				

					07-02
					
					1781
					
				

			

		

		

			
				
目录
一、 前言
二、 正文
2.1 下载viewerjs
2.2 引入到Angular项目中
2.3 封装成组件
2.4 其它地方调用

一、前言
项目中需要对图片进行缩放，旋转，拖动操作，无奈自身技术有限，加上原生方法太多，于是找到组件viewerjs，可惜的是，它不支持angular直接导入。
先来看一下成功之后的效果：

由于公司项目，怕泄露太多信息，所以截图成这样了。它下面的操作按钮是一张雪碧图。
正文
2.1 下载viewerjs
下载这个库的方式有很多，可以去官网下载，也可以像我一样懒一点直接

			
		

	



                

            
              



	

		

			

				
					
angularjs点击图片放大实现上传图片预览

				
			

			

				

					10-20
				

			

		

		

			
				
主要为大家详细介绍了angularjs点击图片放大实现上传图片预览的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	



              


  
              

                


	

		

			

				
					
angularjs实现上传图片并且预览

				
			

			

				

					04-18
				

			

		

		

			
				
angularjs实现上传图片并且预览

			
		

	





	

		

			

				
					
angular_上传图片、预览图片

				
			

			

				

					大自然界的一颗沙子，它磨练久了会变成珍珠的。
				

				

					02-09
					
					474
					
				

			

		

		

			
				
大致思路：

写了个fileModel指令，用于选择文件时触发，指令中调用控制器方法进行图形回显处理。

伪代码：

jsp:

<div class="form-group">

<label class="col-md-4 control-label">系统图标</label>

<div class="col-md-4">

<input...

			
		

	



		

			
		



	

		

			

				
					
Angular 图片预览组件

				
			

			

				

					liwan09的博客
				

				

					07-30
					
					2924
					
				

			

		

		

			
				
写在前面

环境 ：Angular8

图片预览组件实现的功能包括：全屏查看；放大、缩小（鼠标滚轮可放大、缩小图片）；翻页（ 键盘左右按键翻页）；旋转；拖拽

功能实现

首先创建angular项目，在项目中创建图片预览组件以及全屏显示的中间件



全屏显示 中间件实现代码


import { Directive, Input, ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';

@Directive({
  se.

			
		

	





	

		

			

          精选资源
				
					
angular-file-upload-demo:angular.js 文件上传演示

				
			

			

				

					07-13
				

			

		

		

			
				
1. **AngularJS指令**：AngularJS通过自定义指令扩展HTML，"angular-file-upload"库提供了一个名为`ngFileUpload`的指令，用于处理文件选择、预览、上传等操作。它允许开发者轻松地将文件上传功能集成到AngularJS...

			
		

	





	

		

			

				
					
grunt-bower-angular

				
			

			

				

					05-01
				

			

		

		

			
				
若要预览项目，可以使用`grunt serve`命令启动一个本地开发服务器，并在浏览器中查看应用。这通常会开启自动刷新功能，当源代码更改时，浏览器会实时更新。  对于测试，"grunt-bower-angular"项目提到了使用Karma...

			
		

	





	

		

			

				
					
Angular4实现图片上传预览路径不安全的问题解决

				
			

			

				

					08-28
				

			

		

		

			
				
在Angular4中，图片上传预览功能的实现可能会遇到一个安全性问题，即“sanitizing unsafe URL value”的警告。这是因为Angular的内置安全机制会阻止直接使用可能不安全的URL，如本地文件路径，来设置`<img>`标签的`...

			
		

	





	

		

			

          精选资源
				
					
ng-management-system:Angular后台管理系统，基于NG-ZORRO样式框架

				
			

			

				

					03-11
				

			

		

		

			
				
图片预览 安装步骤 git clone https://github.com/howzy/ng-management-system.git      // 把项目下载到本地 cd ng-management-system // 进入项目目录 npm install // 安装项目依赖，等待安装完成之后 本地开发 //...

			
		

	





	

		

			

				
					
在angular中实现图片/视频的预览

				
			

			

				

					qq_50780641的博客
				

				

					04-08
					
					2161
					
				

			

		

		

			
				
在angular中实现图片/视频的预览
需要预览功能的ts文件
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-test-upload-file',
  templateUrl: './test-upload-file.component.html',
  styleUrls: ['./test-upload-file.component.css']
})
export class Test

			
		

	





	

		

			

				
					
ImageViewer-Angular-Directive:用于显示图像列表的 Angular 指令

				
			

			

				

					06-01
				

			

		

		

			
				
角度项目的图像查看器指令
设置步骤：
 在命令提示符“npm install”中运行
然后“凉亭安装”
 然后“grunt release”（生成输出文件）
 示例用法：
 输入：images：指定图像路径数组。

			
		

	





	

		

			

				
					
ngImageInputWithPreview:基于FileReader的Angular指令，可轻松预览和上传图像文件

				
			

			

				

					05-09
				

			

		

		

			
				
ngImageInputWithPreview
 基于FileReader的Angular指令，可轻松预览和上传图像文件。
 现场演示：  : 
安装
npm install --save ng-image-input-with-preview
或者
bower install --save ng-image-input-with-preview
安装问题：
 如果bower无法加载模块，请尝试将以下内容添加到bower.json ：
 "overrides" : {
    "ng-image-input-with-preview" : {
      "main" : "./dist/ng-image-input-with-preview.js"
    }
}
入门
在模块定义中包括依赖项：
 angular . module ( 'app' , [
   // ... other 

			
		

	





	

		

			

				
					
angularjs-pdf-master 在线预览

				
			

			

				

					04-12
				

			

		

		

			
				
angularjs框架中，实现移动端pdf文档在线预览功能

			
		

	





	

		

			

				
					
angular查看pdf

				
			

			

				

					07-10
				

			

		

		

			
				
angularJS 查看pdf的demo                 HTML5开发小样

			
		

	





	

		

			

				
					
angular 上传图片并显示_angular 上传图片预览

				
			

			

				

					weixin_39612228的博客
				

				

					12-22
					
					886
					
				

			

		

		

			
				
在本周的项目中接触到了文件上传的功能，总的说来难度不大，但在第一次使用时仍然碰到了不少的问题，好在全部都解决了。先说说上传文件上传文件自然就是input将type设置为file,需要注意的是这里通过chang方法传递的值应是$event.target.files。开始时我就想着用ngModel去绑定这个值，但打印出来的东西一看就不对,还多亏黄庭祥告诉我需要用这个。import { Componen...

			
		

	





	

		

			

				
					
Angularjs 实现多图片上传预览

				
			

			

				

					xuehu837769474的博客
				

				

					08-29
					
					1296
					
				

			

		

		

			
				
先看效果图



图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。

我们先写一个读取图片的服务，这是网上的一位大神写的，直接用了

/** * 图片上传获取返回的url */


function fileReader ($q, $log){
    var onLoad = function(reader, de...

			
		

	





	

		

			

				
					
Angular4 实现多图片上传预览

				
			

			

				

					不忘初心
				

				

					09-25
					
					9478
					
				

			

		

		

			
				
之前写了一个angular1x的实现，但手痒痒于是就搞了一下angular4的实现方式，不BB直接上代码了。样式里用到了fontawesome的图标首先我们直接看如何调用 
别忘了我们还要在父元素的component.ts上创建previewImgFile这个变量，否则就会报错，这里之所以和父组件通信，就是要把我们上传的file对象传给服务器，所以需要监听子组件的上传图片<app-previewim

			
		

	





	

		

			

				
					
angular框架下图片预览组件（新手版）

					
最新发布

				
			

			

				

					pdd55772233的博客
				

				

					04-04
					
					278
					
				

			

		

		

			
				
【代码】angular框架下图片预览组件（新手版）

			
		

	





	

		

			

				
					
angularjs 上传照片 电脑选取照片 并且预览

				
			

			

				

					大树之殇的博客
				

				

					08-23
					
					921
					
				

			

		

		

			
				
html 中代码：


 
    
      
    



controller中代码：


  $scope.getFile = function (aaaa,bbbbb) {
         console.log("--------------");
         console.log($scope.file);
      console.log(aaa

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			
			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值