nito
nito
  • 发布:2019-03-22 14:16
  • 更新:2019-03-22 14:16
  • 阅读:276

請問一个裁切图片的问题?

分类:HTML5+

在浏览器上可以跑
打包到手机里却没办法跑
想请问一下应该要如何修改
是因为事件event 在手机上不支援的关系吗
onmousedown="clipstart(event)"
onmouseup="clipstop(event)"
onmousemove="onmove(event)"

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title></title>  
    <style type="text/css">  
        div#imgarea{  
            background-image: url(images/XXX.jpg);  
            background-repeat: no-repeat;float: left;  
        }  
        canvas#pCanvas{  
            cursor: pointer;  
        }  
        canvas#cimage{  
            border: 1px dotted;  
        }  
    </style>  
    <script type="text/javascript">  

        document.addEventListener('plusready', function(){  
            //console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。"  

        });  
        var canvas, context, image, ccanvas , ccontext;  
        function init () {  
            ccanvas = document.getElementById("cimage");  
            ccontext = ccanvas.getContext("2d");  
            canvas = document.getElementById("pCanvas");  
            context =canvas.getContext("2d");  
            context.lineWidth=6;              
            context.strokeStyle='silver';     
            image=new Image();  
            image.src="images/XXX.jpg";  

        }  
        var startx=0,starty=0;  
        var stopx=0;  
        var stopy=0;  
        var cb=0;  
        function clipstart(event){  
            startx=event.x;  
            starty=event.y;  
            cb=1;  
        }  
        function clipstop(event){  
            stopx=event.x;  
            stopy=event.y;  
            cb=0;                 
        }  
        function onmove(event){  
            if (cb==1){  
                context.clearRect(0,0,canvas.width,canvas.height);  
                var h = event.y - starty;  
                var w = event.x - startx;  
                context.strokeRect(startx,starty,w,h);  
            }  
        }  
        function drawCImage(event){  
            ccontext.clearRect(0,0,ccanvas.width,ccanvas.height);  
            var h = stopy - starty;  
            var w = stopx - startx;  
            ccontext.drawImage(image,startx,starty,w,h,0,0,w,h);  
        }  

    </script>  
</head>  
<body>  
    <body onload="init()">  
        <div>  
            <div id="imgarea">  
                <canvas id="pCanvas" width="600" height="400"  
                    onmousedown="clipstart(event)"  
                    onmouseup="clipstop(event)"  
                    onmousemove="onmove(event)"  
                ></canvas>  
            </div>  

            <div>  
                <canvas id="cimage" width="600" height="400" onmousedown="drawCImage(event)">  
                </canvas>  

            </div>  

        </div>  

    </body>  
</body>  
</html>
2019-03-22 14:16 负责人:无 分享
已邀请:

要回复问题请先登录注册