手机端图片预览和缩放js

转至：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="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="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里面写就可以了。