-1

我正在制作一个应用程序，因此当用户单击“保存”时，从画布上绘制的绘图被编译成图像。这在 iPod Touch 上完美运行：

http://i.stack.imgur.com/du4iC.png

但是，当我在笔记本电脑上尝试时，会发生这种情况：

http://i.stack.imgur.com/39dWC.png

我已经尝试将高度设置为“自动”和“100%”，但我似乎仍然无法让它工作。这是一个活生生的例子：
http://v1k.me /paint/

请帮助我，我急于部署我的应用程序，谢谢！

这是我的代码：

<style
type="text/css">body{margin:5px;padding:0}
    canvas{border:1px
    solid
    #999;-webkit-touch-callout:none;-webkit-user-select:none;height:
    auto;width:
    auto;}
    a{background-color:#CCC;border:1px
    solid
    #999;color:#333;display:block;height:40px;line-height:40px;text-align:center;text-decoration:none}</style>
    <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script
        type="text/javascript">jQuery(window).load(function(){setTimeout(function(){window.scrollTo(0,0)},50)});jQuery(function(e){var
            d=e("canvas"),h=e("form").find("input[
            name='u']"),j=e("a"),f=d[0].getContext("2d"),b=null,c=/iPhone/i.test(navigator.userAgent),g=function(a,c){var
            b=d.offset();return{x:a-b.left,y:c-b.top}},k=function(a){a=c?window.event.targetTouches[0]:a;a=g(a.pageX,a.pageY);b={x:a.x,y:a.y};f.lineTo(b.x,b.y);f.stroke()},l=function(){d.unbind(c?"touchmove":"mousemove");d.unbind(c?"touchend":"mouseup")};j.click(function(a){a.preventDefault();h.val(d[0].toDataURL("image/png"));a=document.getElementById("imgdata").value;document.getElementById("page").innerHTML="
            <center><em><b>Saving...</b> Please wait.</em>
            </center>";e.post("export.php",{u:a},function(a){document.getElementById("page").innerHTML=a})});d.bind(c?"touchstart":"mousedown",function(a){a=c?window.event.targetTouches[0]:a;a=g(a.pageX,a.pageY);b={x:a.x,y:a.y};f.beginPath();f.moveTo(b.x,b.y);d.bind(c?"touchmove":"mousemove",k);d.bind(c?"touchend":"mouseup",l);return!1})});</script>
            <body>
                <div
                id="page"
                align="center">
                    <canvas
                    id="canvas"
                    width="308"
                    height="358"></canvas>
                        <form
                        action="export.php"
                        method="post">
                            <input
                            type="hidden"
                            name="u"
                            id="imgdata"
                            value=""
                            /><a>Save Image</a>
                            </form>
</div>

这是一个 JSFiddle：jsfiddle.net/CPPpY/1/

4

1 回答 1

1

尝试在代码中使用它来初始化画布对象。

var canvas = document.getElementById("canvas");
canvas.width = document.body.clientWidth; //document.width is obsolete
canvas.height = document.body.clientHeight; //document.height is obsolete

这是您的应用程序的翻版，其中更改了 100% 的宽度和高度 :)

http://jsfiddle.net/h4CCy/22/

除了语法错误之外，它们的关键变化在第 34 和 35 行。

于 2013-09-23T14:09:29.370 回答