html5 照片取景上传

最新推荐文章于 2024-01-25 18:36:00 发布

dianlu7032

最新推荐文章于 2024-01-25 18:36:00 发布

阅读量203

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/jmzs/p/4932676.html

版权

html5 canvas 处理图片

第一个问题，C:\fakepath 图片路径问题。

function preImg(sourceId) {
        if (typeof FileReader === 'undefined') {
            alert('Your browser does not support FileReader...');
            return;
        }
        var reader = new FileReader();  

        reader.onload = function(e) {
            //图片宽高比例
            var c=document.getElementById("bg");
            var cxt=c.getContext("2d");
            img.src=this.result;
            var p = getrealpoint(c,img);
            cxt.clearRect(0,0,c.width,c.height);
            imgmax.l=(c.width-imgmax.x)/2;imgmax.t=(c.height-imgmax.y)/2;
            cxt.drawImage(img,imgmax.l,imgmax.t,imgmax.x,imgmax.y);  
        }
        reader.readAsDataURL(document.getElementById(sourceId).files[0]);
    }

第二个问题，兼容pc和移动端

    var ismobile = !!navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i)
    var touchEvents={
        touchstart:"touchstart",
        touchmove:"touchmove",
        touchend:"touchend",
        touchcancle:"touchcancle",
        initTouchEvents:function(){
            if(!ismobile){
                this.touchstart="mousedown";
                this.touchmove="mousemove";
                this.touchend="mouseup";
                this.touchcancle="mouseleave";
            }
        }
    };

然后就没问题了，处理鼠标或触摸事件在canvas上绘图

obj.addEventListener(touchEvents.touchstart, function(e) {  
            isdown=true;
            //只处理两个以下的触摸点
            if(e.touches && e.touches.length<2){  
                downx=e.touches[0].clientX;
                downy=e.touches[0].clientY;
            }else{
                downx=e.clientX;
                downy=e.clientY;
            } 
            e.preventDefault();
            e.stopPropagation();
        }, false); 
        obj.addEventListener(touchEvents.touchend, function(e) {  
            if(isdown){
                imgmax.l=movel;
                imgmax.t=movet;
            }
            isdown=false; 
            e.preventDefault();
            e.stopPropagation();
        }, false); 
        obj.addEventListener(touchEvents.touchmove, function(e) {  
            if(isdown){ 
                var cxt=c.getContext("2d"),sx=0,sy=0;
                cxt.clearRect(0,0,c.width,c.height);
                if(e.touches){ 
                    sx=downx-e.touches[0].clientX;
                    sy=downy-e.touches[0].clientY;
                    movex=downx-e.touches[0].clientX;
                    movey=e.touches[0].clientY; 
                }else{
                    sx=downx-e.clientX;
                    sy=downy-e.clientY;
                    movex=downx-e.clientX;
                    movey=e.clientY; 
                }   
                cxt.drawImage(img,imgmax.l-sx,imgmax.t-sy,imgmax.x,imgmax.y); 
                movel=imgmax.l-sx;
                movet=imgmax.t-sy; 
            }
            e.preventDefault();
            e.stopPropagation();
        }, false); 
        obj.addEventListener(touchEvents.touchcancle,function(e){
            if(isdown){
                imgmax.l=movel;
                imgmax.t=movet;
            }
            isdown=false;  
            e.preventDefault();
            e.stopPropagation();
        })

注意canvas必须是内联高度和宽度，不然你会发现像素比例跟实际很大差别

<body>
        <input type="file" name="imgOne" id="imgOne" accept="image/*" onchange="preImg(this.id);" /> 
        <div id="bgdiv">
            <canvas id="bg" style="position:absolute;z-index:1000">
                
            </canvas>
            <canvas id="tp" style="position:absolute;z-index:1001">
                
            </canvas>  
        </div> 
    </body>