美文网首页我的 ionicIonic之路ionic2实战
ionic2实战-自定义添加/预览图片组件

ionic2实战-自定义添加/预览图片组件

作者: 昵称已被使用_ | 来源:发表于2017-05-30 21:43 被阅读2586次

效果展示

前言

  • app有许多页面需要添加图片并实现预览功能.所以有必要封装一个公共的组件去调用
  • 由于代码比较多.不便贴出来.所以这里介绍一下大致结构.自己去github上看完整代码.

简书上贴出的代码都有可能改动,请以github上为准

准备

  1. 插件准备
    camera插--拍照获得照片
    Image Picker--用于从相册多选照片
  • 认识Swiper3--用于实现图片预览
  • ionic版本最低为3.0

核心代码

  • select-pic.ts单击图片放大看红色标注

  • viewer-pic.ts

使用

  • 如果你的app也分了多个Module,在使用前需要把导入Module.


  • 调用组件


最后

angular自定义组件就是学会使用@input()@output().本文也演示了自定义双向数据绑定的方法

@Input() name;
@Output() nameChange;

相关文章

网友评论

  • 104a8c7a6ab6:hello, <page-select-picture>是怎么定义的呢?
  • 麻辣小面瘫:小军大神,求指导。image picker 在ios10的情况下 多选不能做限定,,,可以无限多选。。你那边有遇到么??好像是更新了插件之后遇到的问题
    昵称已被使用_:@麻辣小面瘫 更新插件https://github.com/yanxiaojun617/ionic2_tabs/tree/master/plugins/com.synconset.imagepicker
  • 小妖_34:大神您好,我这边打包的时候报错。我看好像是因为引用了import {Observable} from "rxjs";
    Error: ./node_modules/rxjs/observable/BoundNodeCallbackObservable.js
    Module build failed: TypeError: Cannot read property 'type' of undefined
    at Object.getEffectiveTypeAnnotationNode
    小妖_34:大神我找到解决办法了,import { Observable } from 'rxjs/Observable';我的这么引用就对了。
  • c542a29d055e:为嘛子上传图片都会有网络技术这几个字的水印啊 军哥
    昵称已被使用_:@一息_2326 :innocent:
    c542a29d055e:@小军617 :sweat: 实在无可奈何啊
  • 450e5419129f:Image Picker从图库中选择多张照片的时候,为什么你是中文的啊,我的是英文的,而且我转imagebase64位总是不成功,后来发现 原来 var reader = new FileReader(); 实例FileReader();的时候,不走cordova-plugin-file里面的FileReader.而是走了 build里面的 polyfills.js:2。请问大神这要怎么搞啊?这个问题已经困扰我很久了,望大神指导
    昵称已被使用_:@乄Zoe小情绪 这个不清除,你试试和我的代码对比一下.
    450e5419129f:@小军617 那你知道为什么 我的 在转化为base64图片的时候,执行new FileReader();的时候 没办法自己找到 cordova-plugin-file里面的FileReader.js文件,而是自己关联到polyfills.js:2 里面。在debug 走下来的时候,我看了FileReader 的对象,我的显示为:_zone_symbol_orignalInstance:FileReader.而正常的应该是:指向的是cordova-plugin-file里面的FileReader.对象
    昵称已被使用_:我手动更改了imagepicker插件的源码.修改两个文件.https://github.com/yanxiaojun617/ionic2_tabs/blob/master/plugins/com.synconset.imagepicker/src/android/Library/res/values/multiimagechooser_strings_en.xml
    第200行:
    https://github.com/yanxiaojun617/ionic2_tabs/blob/master/plugins/com.synconset.imagepicker/src/android/Library/src/MultiImageChooserActivity.java
  • f5c169986b1a: 大神,我想问一下:我浏览器测试时,ionic serve第一次打开时slide切换不了,一定要手动刷新一次才能切换;这怎么解决;用你这个图片预览也是这样
  • 尤里安的红茶:感谢博主精彩的分享,但是在android手机上,用Image Picker来选择相册,如果相册照片多,会很卡,并且OOM崩溃的,我在小米5,小米6测试均衡oom。
    昵称已被使用_:@尤里安的红茶 我找个空在测试一下
    尤里安的红茶: @小军617 😂我用博主的app,在小米4和小米5都会出问题,前提条件是相册里面的照片要有很多几十上百张,只有十几张的话是不会oom的。我之前也觉得是我哪里用错了,所以后来直接用博主的app测试。
    昵称已被使用_:@尤里安的红茶 是不是你哪里使用姿势不对,我在小米4上都还好.
  • 胡哈哈胡:您好,我想问一下这个组件的fileObjList是什么格式的,我用console.log打印不了,因为我想直接把上传的图片直接拼成这个fileObjList的数据格式,然后存在数据库里,访问的时候直接获取下来就能解析到的这种形式🤗
    昵称已被使用_:@OldHu的胡 图片还是存文件的号,显示图片的的时候指定图片src="url"
    胡哈哈胡: @小军617 拼一个这个形式的让fileObjList = fileObj就能让他显示图片吗?😅今天试了一下存数据库,发现图片转成base64的字符串太大了,还是得存在文件夹里,不想转换成图片存,所以准备存成json的,应该可以吧😁😁😁
    昵称已被使用_:https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/model/FileObj.ts
  • 胡哈哈胡:这么说2.3的版本没法实现咯
    昵称已被使用_:@胡玉军 升级主要是改package.json.你可以现在一个最新版的app,然后用代码对比工具(Beyond.Compare.v3.3.13.18981),对比一下package.json,app.component.ts,app.module.ts等文件内容就行了
    胡哈哈胡: @小军617 可以从2直接升级到3吗?还是从新开始一个3的项目🤐
    昵称已被使用_: @胡玉军 升级这么简单的事情,还懒得升?不要等到开发遇瓶颈的时候才去升级

本文标题:ionic2实战-自定义添加/预览图片组件

本文链接:https://www.haomeiwen.com/subject/ybarfxtx.html