1

ボタンをクリックすると、スクリプトを呼び出してキャンバス イメージを取得します。場所を取ります。この画像ソースを、この画像を表示する必要がある別の jsp ファイルに渡す必要があります。

これで私を助けてくれませんか。

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <script>
        function draw() {
             var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "black";
            ctx.beginPath();
            var x;
            var y;
            canvas.onmousedown = function(e) {
                x = e.clientX;
                y = e.clientY;
                ctx.moveTo(x, y);
            }
            canvas.onmouseup = function(e) {
                x = null;
                y = null;
            }
            canvas.onmousemove = function(e) {
                if (x == null || y == null) {
                    return;
                }
                x = e.clientX;
                y = e.clientY;
                x -= canvas.offsetLeft;
                y -= canvas.offsetTop;
                ctx.lineTo(x, y);
                ctx.stroke();
                ctx.moveTo(x, y);
            }
        };
        function to_image(){
            var canvas = document.getElementById("canvas");
            document.getElementById("theimage").src = canvas.toDataURL();
        }
        function clear_image(){
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.fillStyle = '#ffffff';
            context.clearRect(0, 0, canvas.width, canvas.height);
            canvas.width = canvas.width;
         }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="300"
style="border: 1px solid black;"></canvas>
<div><button onclick="to_image()">Draw to Image</button></div>
<div><button onclick="clear_image()">Clear</button></div>
<image id="theimage"></image>
</body>
</html>

document.getElementById("theimage").src の値を別の jsp に渡し、その値にアクセスして画像を表示する必要があります。

誰でもこれで私を助けることができますか？

4

1 に答える 1

0

最初のページ（コードを貼り付けたページ）からボタンをクリックすると、その2番目のページに画像が読み込まれることを意味する場合は、コードを次のように更新します。

    {

        var canvas = document.getElementById("canvas");
        var dataUrl = canvas.toDataURL();

        //-- Following code can be placed wherever you want to call another page.
        window.location = "urlToSecondJSPPage.jsp?imgUrl="+dataUrl;

    }

そして、2ページ目からimgUrl(urlパラメータ)にアクセスできるようになります。

于 2012-10-26T06:50:34.513 に答える