Question

我一直在研究并尝试编写一个应用程序，它可以获取HTML5 canvas元素上的任何图像并将其发送给客户端。当尝试使用canvas.toDataURL（）获取图像，压缩并将其发送回服务器时，客户端有时会显示图像，有时不显示发送的内容。首先我认为可能是数据已损坏，但是在本地服务器上工作并且有29/30个损坏的数据对我来说没有意义，所以我试图看看发生了什么并注册了base64图像并注意到它的长度在变化，尽管画布的内容没有变化。为什么会这样？

我写了一个简单的页面，你可以通过绘制画布内容来编辑画布内容：

<!DOCTYPE html>
<html>
    <head>
        <title>Draw</title>
        <style>
            body{margin:0;}
        </style>
        <script>
            addEventListener("load", Load, false);

            var board = undefined;
            var ctx = undefined;

            var loaded = false;

            var mousehold = false;
            var mousex = 0;
            var mousey = 0;
            var lastx = 0;
            var lasty = 0;
            var firstclick = false;

            function Load(e)
            {
                loaded = true;
                board = document.getElementById("board");
                ctx = board.getContext("2d");

                board.width = window.innerWidth;
                board.height = window.innerHeight;

                addEventListener("mousedown", function(e)
                {
                    mousehold = true;
                }, false);

                addEventListener("mouseup", function(e)
                {
                    mousehold = false;
                    firstclick = false;
                }, false);

                addEventListener("mousemove", function(e)
                {
                    mousex = e.clientX;
                    mousey = e.clientY;

                    // if(mousehold == true) console.log(mousex + " " + mousey);
                }, false);

                ctx.beginPath();
                ctx.lineWidth = 5;
                UpdateBoard();
            }

            function UpdateBoard()
            {
                if(mousehold == true)
                {
                    if(firstclick == false)
                    {
                        lastx = mousex;
                        lasty = mousey;
                        firstclick = true;
                    }

                    ctx.moveTo(lastx, lasty);
                    ctx.lineTo(mousex, mousey);
                    ctx.stroke();

                    lastx = mousex, lasty = mousey;
                }

                window.requestAnimationFrame(UpdateBoard);
            }

            function send()
            {
                var img = board.toDataURL();
                console.log(img.length);
            }
        </script>
    </head>
    <body>
        <canvas id="board"></canvas>
        <button style="right:10px;bottom:10px;position:fixed;z-index:999999;" onclick="send();">Send</button>
    </body>
</html>

单击“发送”按钮将在控制台上记录base64图像长度。如果你在屏幕上绘制内容，画布的内容会明显改变，但如果你停止绘图并单击“发送”按钮几次（不触及画布内容），你会发现它似乎生成了不同的base64图像。为什么会这样？有可能防止这种情况发生吗？我的应用程序需要不断更新内容（压缩，但我已经尝试过没有压缩，问题也一样）。

为了证明这个问题，我已经上传了一张图片来表达：{{3} } （忽略图片中的拼写错误）。

感谢您的关注。

Answer 1

发生这种情况的原因是您已将所有事件侦听器附加到window对象而不是画布（mousedown，其他人可以在窗口上）mousedown将当你点击发送按钮时也要注册。

这意味着每个帧重绘最后一个路径，因为mousehold将为真，累积影响alpha通道的抗锯齿像素，因此会改变位图。

示例修复（只需将mousedown处理程序附加到画布）：

addEventListener("load", Load, false);

var board = undefined;
var ctx = undefined;

var loaded = false;

var mousehold = false;
var mousex = 0;
var mousey = 0;
var lastx = 0;
var lasty = 0;
var firstclick = false;

function Load(e) {
  loaded = true;
  board = document.getElementById("board");
  ctx = board.getContext("2d");

  board.width = window.innerWidth;
  board.height = window.innerHeight;

  // this must be at canvas element
  board.addEventListener("mousedown", function(e) {
    mousehold = true;
  }, false);

  addEventListener("mouseup", function(e) {
    mousehold = false;
    firstclick = false;
  }, false);

  addEventListener("mousemove", function(e) {
    mousex = e.clientX;
    mousey = e.clientY;

    // if(mousehold == true) console.log(mousex + " " + mousey);
  }, false);

  ctx.beginPath();
  ctx.lineWidth = 5;
  UpdateBoard();
}

function UpdateBoard() {
  if (mousehold == true) {
    if (firstclick == false) {
      lastx = mousex;
      lasty = mousey;
      firstclick = true;
    }

    ctx.moveTo(lastx, lasty);
    ctx.lineTo(mousex, mousey);
    ctx.stroke();

    lastx = mousex, lasty = mousey;
  }

  window.requestAnimationFrame(UpdateBoard);
}

function send() {
  var img = board.toDataURL();
  console.log(img.length);
}

body {margin:0}

<canvas id="board"></canvas>
<button style="right:10px;bottom:10px;position:fixed;z-index:999999;" onclick="send();">Send</button>

即使canvas没有更改，canvas.toDataURL（）值也会更改

1 个答案: