Question

我正在创建一个允许用户在Canvas中绘制数字（使用鼠标）的应用程序。当他们点击提交时，图像应保存为JPEG，清除应删除画布中绘制的数字。我是HTML5 Canvas的新手。我看到一些创建画布的教程，但我无法保存并清除画布。真的很感激任何帮助。感谢。

这是我的HTML：

<div style="padding-bottom: 20px;padding-left: 210px;">
<div class="btn-group" role="group" aria-label="...">
    <button type="button" id="save" class="btn btn-default">Submit</button>
    <button type="button" id="clear" class="btn btn-default">Clear</button>
</div></div>
</div>

脚本标记中的Javascript：

var clear = document.getElementById('clear');
clear.addEventListener('click', clearCanvas);
var clearCanvas = function(e) {
   ctx.fillStyle = "white";
   ctx.fillRect(0, 0, 500, 400);
   ctx.clearRect(20, 20, 100, 50);
}

Answer 1

您正在使用的tutorial未提及一些关键内容：

未使用canvasInAPerfectWorld行：您可以将其删除。
您需要jQuery：只需在<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script/>部分添加<head>。
你应该将你的javascript包装在jQuery样板文件中，以确保在文件的其余内容加载后执行：$( document ).ready(function() { <your javascript here> });
永远不会设置canvasWidth和canvasHeight变量：在使用变量之前添加此行：var canvasWidth = 600; var cavasHeight = 400;
从不使用变量mouseX和mouseY：你可以删除它们（但是稍后看看onClick()函数两行以查看它们将用于什么）。

完成的结果应如下所示：

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Create HTML5 Canvas JavaScript Drawing App Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<style>canvas { border: 1px solid #ccc; }</style>
<script type="text/javascript">
$( document ).ready(function() {
var canvasWidth = 600; var cavasHeight = 400;

var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', cavasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");

$('#canvas').mousedown(function(e){
      paint = true;
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
      redraw();
    });

$('#canvas').mousemove(function(e){
      if(paint){
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
        redraw();
      }
    });

$('#canvas').mouseup(function(e){
      paint = false;
    });

$('#canvas').mouseleave(function(e){
      paint = false;
    });

$('#clear').click(function(){
  clickX.length = 0;
  clickY.length = 0;
  clickDrag.length = 0;
  redraw();
});

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

function redraw(){
      context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

      context.strokeStyle = "#df4b26";
      context.lineJoin = "round";
      context.lineWidth = 5;

      for(var i=0; i < clickX.length; i++) {        
        context.beginPath();
        if(clickDrag[i] && i){
          context.moveTo(clickX[i-1], clickY[i-1]);
         }else{
           context.moveTo(clickX[i]-1, clickY[i]);
         }
         context.lineTo(clickX[i], clickY[i]);
         context.closePath();
         context.stroke();
      }
    }
    });
   </script>
   </head>
     <body>
       <div id="canvasDiv"></div>
    </body>
 </html>

对于保存您的画布作为JPEG，这更复杂。正如markE指出的那样，related question here显示了一种方法。

编辑：添加“清除”按钮：

你的'绘图'实际上只是存储在clickX，clickY和clickDrag数组中的一系列笔移动。每次调用redraw()时，都会从数组中重新创建绘图。因此，只绘制一个白色矩形只会清除屏幕直到下一个redraw()。相反，您可以通过将其添加到您的javascript来清除数组：

$('#clear').click(function(){
  clickX.length = 0;
  clickY.length = 0;
  clickDrag.length = 0;
  redraw();
});

（顺便说一句，通过删除原始问题的详细信息，您会让下一个人难以理解答案的背景。您应该（a）添加到原始问题，或者（b）询问一个新的问题。你也可以upvote和/或接受你认为有用的任何答案。谢谢）

Answer 2

我认为这是一个重复的问题。见这里

Can I get image from canvas element and use it in img src tag?

var image = new Image();
image.id = "pic"
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);

在HTML Canvas中将图像绘制并保存为JPEG

2 个答案: