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

fiei3ece 于 2023-05-27 发布在 Java

关注(0)|答案(2)|浏览(169)

我正在创建一个应用程序，允许用户在画布上绘制一个数字（使用鼠标）。当他们点击提交时，图像应该保存为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);
}

JavaScript

来源：https://stackoverflow.com/questions/29643263/drawing-and-saving-an-image-as-jpeg-in-html-canvas

2条答案

按热度按时间

izkcnapc1#

您使用的教程没有提到几个关键事项：

未使用canvasInAPerfectWorld行：你可以删除它。
你需要jQuery：只需在<head>部分添加<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script/>。
你应该把你的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所指出的，这里有一个相关的问题，它显示了一种方法。

EDIT：增加“清除”按钮：

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

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

（顺便说一句，删除你原来问题的细节，你让下一个人很难理解答案的上下文。你应该（a）在原来的问题上增加内容，或（B）提出新的问题。你也可以投赞成票和/或接受任何你觉得有帮助的答案。谢谢）*

赞(0）回复(0）举报 2023-05-27

vsnjm48y2#

我认为这是一个重复的问题。看这里
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);

赞(0）回复(0）举报 2023-05-27

我来回答

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

2条答案

相关问题

热门标签

最新问答