Question

在按钮上单击我调用脚本来获取画布Image。我坐的位置。我需要将此图像源传递到另一个需要显示此图像的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并访问该值以显示图像。

任何人都可以帮助我吗？

Answer 1

如果您的意思是您将在第一页（已粘贴代码）的按钮上加载第二页图像，那么只需将代码更新为：

    {

        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;

    }

然后可以从第二页访问imgUrl（url参数）。

如何将图像从一个jsp传递到另一个jsp

1 个答案: