转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html

1.手机端的图片选择和预览

《input type="file" id="preview"/》《img id="theImg"/》

var oBtn = document.getElementByIdx_x_x('preview');
    var oImg = document.getElementByIdx_x_x('theImg');
    oBtn.addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                    oImg.style.width = '10em';
                    oImg.src = event.target.result;
                    oImg.style.display = "block";
                };
            })(f);
            reader.readAsDataURL(f);
        }
    }

2.手机端的两个手指缩放图片

《img src="http://www.jzqing.net/images/p9.jpg" id="img" style="width:100%;height:1000px;position:absolute;left:0;top:0;margin-top:0;"/》

//全局变量,触摸开始位置
            var startX = 0, startY = 0;
            var startX1 = 0, startY1 = 0;
            var startDis = 0;
            var dis = [];
            //touchstart事件
            function touchSatrtFunc(evt) {
                try {
                    dis = [];
                    evt.preventDefault();//用来阻止手机的默认事件
                }
                catch (e) {
                    alert('touchSatrtFunc:' + e.message);
                }
            }
            var theKey = 1;
            //touchmove事件,这个事件无法获取坐标
            function touchMoveFunc(evt) {
                try {
                  
                   // evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
                    var touch = evt.targetTouches[0]; //获取第一个触点
                    var x = Number(touch.pageX); //页面触点X坐标
                    var y = Number(touch.pageY); //页面触点Y坐标
                  
                    if (evt.targetTouches.length == 2) {
                        var touch1 = evt.targetTouches[1]; //获取第2个触点
                        var x1 = Number(touch1.pageX); //页面触点X坐标
                        var y1 = Number(touch1.pageY); //页面触点Y坐标
                        dis.push(Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2)));
                    }
                    if (dis.length > 0) {
                        if (dis[0] > dis[dis.length - 1]) {
                            if (theKey <= 1) {
                                return false;
                            } else {
                                theKey -= 0.05;
                            }
                            document.getElementByIdx_x_x('img').style.webkitTransform = 'scale(' + theKey + ')';
                        } else {
                            theKey += 0.05;
                            document.getElementByIdx_x_x('img').style.webkitTransform = 'scale(' + theKey + ')';
                            return false;
                        }
                    }
                }
                catch (e) {
                  alert('touchMoveFunc:' + e.message);
                }
            }

//touchend事件
            function touchEndFunc(evt) {
                try {
                    evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动
                }
                catch (e) {
                    alert('touchEndFunc:' + e.message);
                }
            }

//绑定事件
            function bindEvent() {
                document.addEventListener('touchstart', touchSatrtFunc, false);
                document.addEventListener('touchmove', touchMoveFunc, false);
                document.addEventListener('touchend', touchEndFunc, false);
            }
           document.getElementByIdx_x_x('img').onload = bindEvent;

3.图片点击之后居中显示

《img src="http://www.jzqing.net/images/p9.jpg" id="img" style="width:100%;height:1000px;position:absolute;left:0;top:0;margin-top:0;"/》
方法:

//windows.innerWidth是查看手机端浏览器的有效可视高度

function clickFun(evt, obj) {
              var imgHeigt = windows.innerWidth * obj.height / obj.width; //获取大图片的高度
                if (imgHeigt >= window.screen.height) {
                    obj.style.top = 0;
                     obj.style.marginTop = 0;
                   } else {
                        obj.style.top = '50%';
                        obj.style.marginTop = -1 * imgHeigt / 2 + 'px';
                    }
              }
            document.getElementByIdx_x_x_x('img').addEventListener('click', function () { clickFun(event, this) }, false);

解释:

手机端的触屏事件的顺序是touchstart,touchmove,touchend,click,如果想要禁止click事件可以在touchstart时调用evt.preventDefault(); 来阻止之后的默认行为,但是如果想在响应手指滑动事件之后,还继续触发click事件,那么可以:不要在touchstart和touchend里面写preventDefault,只需要在touchmove里面写就可以了。

手机端图片预览和缩放js的更多相关文章

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

    手机端照片预览组件 可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上 ...

  2. 使用canvas实现图片预览、缩放(压缩)以及生成文件下载

    参考 https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/yuanzhiguo/p/8288822.html h ...

  3. html input type=file 选择图片,图片预览 纯html js实现图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【原创】iOS图片预览(支持缩放和移动)

    1.传入图片 PreViewController.h: #import <UIKit/UIKit.h> @interface PreViewController : UIViewContr ...

  5. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  6. js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  7. previewImage.js图片预览缩放保存插件

    previewImage.js好用的图片预览缩放保存插件

  8. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

  9. JS魔法堂之实战:纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

随机推荐

  1. bitmap运算

    概述 所谓bitmap就是用一个bit位来标记某个元素对应的value,而key即是这个元素.由于采用bit为单位来存储数据,因此在可以大大的节省存储空间     算法思想 32位机器上,一个整形,比 ...

  2. 一点ExtJS开发的感悟

    虽然项目一直采用ExtJS作为前端开发,接触到了一些ExtJS 的一些场景界面,自己也尝试封装一些组件,对于开发70%基本可以满足需求.遇到最为麻烦的就是Ext的模版或者直接拼接字符串再进行eval转 ...

  3. Determining IP information for eth0...failed 错误解决

    问题描述:虚拟机使用wget命令上网,执行service network restart后出现如下错误Determining IP information for eth0...failed解决办法: ...

  4. HTML5中常用的标签(及标签的属性和作用)

    1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...

  5. 两个栈实现队列 Python实现

    # coding=utf-8 MAX_LENGTH = 100 SUCCESS = 1 FAIL = 0 ERROR = -1 class Queue(object): stack_fir = Non ...

  6. Ztree学习(-)简单例子

    https://www.cnblogs.com/shinhwazt/p/5828031.html ztree包:https://pan.baidu.com/s/1vOgGm_elF-lF0VowoHw ...

  7. Egret 工具推荐

    Egret 工具推荐--打造最好的开发环境--IDE篇http://bbs.egret.com/forum.php?mod=viewthread&tid=13581&fromuid=1 ...

  8. React 简单介绍

    React 简单介绍 作者 RK_CODER 关注 2014.12.10 17:37* 字数 2516 阅读 55715评论 6喜欢 70 why React? React是Facebook开发的一款 ...

  9. linux文件格式转换:<U+FEFF> character showing up in files. How to remove them?

    You can easily remove them using vim, here are the steps: 1) In your terminal, open the file using v ...

  10. 关于Git的礼节

    (这里的内容本来是<怎样尊重一个程序员>的一小节,但由于Git的使用引起了很普遍的不尊重程序员的现象,现在特别将这一节提出来单独成文.) Git是现在最流行的代码版本控制工具.用外行话说, ...