[js开源组件开发]-手机端照片预览组件

手机端照片预览组件

可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目。它的github地址是:https://github.com/tianxiangbing/mobile-photo-preview

下面是预览图,它的完整demo请点击这里手机端照片预览组件demo

使用方法案例:

 var photoPreview = new MobilePhotoPreview();
	    photoPreview.init({
	        target: $(‘.preview-list‘),
	        trigger: ‘.preview‘,
	        show: function(c) {
	            var del = $(‘<span class="icon-del"><span>‘);
	            $(‘.imgViewTop‘, c).append(del);
	            del.tap(function() {
	                photoPreview.current.remove();
	                photoPreview.hide();
	            });
	        }
	    });

  

或者:

 $(‘.preview-list‘).MobilePhotoPreview({
	        trigger: ‘.preview‘,
	        show: function(c) {
	            var del = $(‘<span class="icon-del"><span>‘);
	            $(‘.imgViewTop‘, c).append(del);
	            var _this = this;
	            del.tap(function() {
	                _this.current.remove();
	                _this.hide();
	            });
	        }
	    });

  

注:两种方法没有本质的区别,推荐第一种。

API 属性、方法及回调:

target:

    表示是在这个容器内的元素会触发事件,它是一个范围,与trigger一同使用,委托事件节点,所以是必须的。建议不作根结点的委托.

trigger:

    表示触发事件的对象,它可以是动态的,默认是target下面的a链接触发

show:

    显示之后的回调,参数是dialog容器,当前this指向MobilePhotoPreview的实例。这是一个为了扩展更多功能的回调方法。为了更好的用到这个回调,你可以会对下面的属性有兴趣了解

this下的属性及方法:

current:

    当前的结点对象

currentIndex:

    当前索引

objArr:

    数组对象,在这里,你可以得到一个集合,包括索引、element、宽、高。这将会是很有用的东西。

hide:

    调用的是dialog的hide.
时间: 2024-08-01 09:59:18

[js开源组件开发]-手机端照片预览组件的相关文章

基于vue.js的图片预览组件2.0.1

基于vue.js的图片预览组件 Github github 安装 npm install enlargeimg --save-dev import enlargeimg from 'enlargeimg'; 基础用法 <enlargeImg :data="files"></enlargeImg> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App'

移动端上传照片 预览+draw on Canvas demo(解决iOS等设备照片旋转90度的bug)

背景: 本人的一个移动端H5项目,需求如下: 手机相册选取或拍摄照片后在页面上预览 然后绘制在canvas画布上. 这里,我们先看一个demo(http://jsfiddle.net/q3011893/83qfqpk8/embedded/) 操作步骤: 1.点击选择文件,拍摄一张照片,此时"预览:"文字下会显示你刚才拍摄的照片: 2.再点击"draw on Canvas",该按钮下的画布会绘制你刚才拍摄的照片. 正常的结果: 正文: 让input file支持拍照+

Android开发:实时处理摄像头预览帧视频------浅析PreviewCallback,onPreviewFrame,AsyncTask的综合应用(转)

原文地址:http://blog.csdn.net/yanzi1225627/article/details/8605061# 很多时候,android摄像头模块不仅预览,拍照这么简单,而是需要在预览视频的时候,能够做出一些检测,比如最常见的人脸检测.在未按下拍照按钮前,就检测出人脸然后矩形框标示出来,再按拍照.那么如何获得预览帧视频么? 只需要在Activity里继承PreviewCallback这个接口就行了.示例如下: public class RectPhoto extends Acti

AppleWatch开发入门六——Glance(预览)扩展的应用

AppleWatch开发入门六--Glance(预览)扩展的应用 一.简介 Glance是watchOS中类似iOS的today插件一样的预览扩展.提供了Glance功能的WatchApp可以在手表主页上唤起Glance,展示app相关信息,然而这个扩展只能作为展示作用,并不能进行太多的交互,界面的布局也有很大的限制,因此,Glance的应用主要在于展示备忘信息等.特点如下: 1.扩展的样式布局我们并不能完全个性化,只能通过系统模板来布局. 2.扩展中不能添加交互功能,只能展示信息,点击界面间唤

李洪强iOS开发之苹果使用预览截图

李洪强iOS开发之苹果使用预览截图 01 在预览的图片中选中你要截得区域  02 - command + C   03 - Command + N 04 - Command + S (保存)

vux 组件打造手机端项目

其实,我用vux组件的过程是这样的,哇!太方便了!!功能好全!!太简单了!!然后,就各种"跳坑".以下排坑环节. 1.安装vux:cnpm i -S vux;   比较顺利吧. 2.导入组件: import {ViewBox, XHeader, Tabbar, TabbarItem} from 'vux'export default { name: 'app', components: {ViewBox, XHeader, Tabbar, TabbarItem}} 报错!原因是vux内

WeX5 快速开发平台V3.6预览版发布(2016-9-1)

WeX5 V3.6 预览版核心特性: 一.打包特性增强:    1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换(手机app开发ty300.com),使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸:    2- App资源更新新增Hash模式,除实现APP资源增量.快速更新外,部署时文件路径不会每次动态生成了,也就解决了页面分享及微信端运行更新版本后要修改绑定地址的问题:二.开发与调试能力重要更新:    1- 提供了手机端调试用的APP工具Applo

用openoffice+jodconverter+webuploader+pdf.js实现文件上传、在线预览功能

一.背景 最近公司一个项目要实现一个文件上传以及多文档在线预览的功能,之前一直做无线工具开发的,没有涉及到这些东西.另外项目组缺java开发人员,而且自己也只是一个半吊子前端加小半吊子java开发人员,所以让我一个人先弄个Demo出来瞧瞧.在网上搜索了不少资料,在这里只是整理一下,留作以后查阅. 二.插件以及工具包 1.pdfjs-v1.7.225  前端pdf格式文件的显示组件 2.webuploader-0.1.5  百度的文件上传组件 3.video-js-6.2.5 html5视频播放组

iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

在公司做项目一直使用Storyboard,虽然有时会遇到团队合作的Storyboard冲突问题,但是对于Storyboard开发效率之高还是比较划算的.在之前的博客中也提到过,团队合作使用Storyboard时,避免冲突有效的解决方法是负责UI开发的同事最好每人维护一个Storyboard, 公用的组件使用轻量级的xib或者纯代码来实现.这样不但提高了开发效率,而且可以有效的避免Storyboard的冲突.如果每个人维护一个Storyboard, 遇到冲突了就以你自己的为准就OK了. 言归正传,