如何从按钮单击下载 HTML 画布绘图作为图像答案

【问题标题】：How to download HTML canvas drawing as image from button click如何从按钮单击下载 HTML 画布绘图作为图像
【发布时间】：2019-08-09 09:27:14
【问题描述】：

我很难弄清楚如何做到这一点，我已经到处寻找解决方案，但似乎无处可去。我尝试从互联网上的工作示例中复制代码，但每当我将其放入自己的代码中时，它似乎都不起作用。

我只是在寻找您在画布中绘制时单击下载并将您在画布上绘制的内容保存到本地存储。

有人可以帮帮我吗？下面是我的代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>


<style>
canvas { border: 5px solid blue }


</style>

</head>
<body>
<canvas id="c" width="500" height="300"></canvas>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>


<script>
function midPointBtw(p1, p2) {
  return {
    x: p1.x + (p2.x - p1.x) / 2,
    y: p1.y + (p2.y - p1.y) / 2
  };
}

function getPattern() {
  return ctx.createPattern(img, 'repeat');
}


var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 50;
ctx.lineJoin = ctx.lineCap = 'round';

var img = new Image;
img.onload = function() {
  ctx.strokeStyle = getPattern();
};
img.src = "https://i.postimg.cc/rF2R0GRY/dick2.png";

var isDrawing, points = [];




var getXY = function(e) {
  var source = e.touches ? e.touches[0] : e;

  return {
    x: source.clientX,
    y: source.clientY
  };
};

var startDrawing = function(e) {
  isDrawing = true;
  points.push(getXY(e));
  event.preventDefault();

};


var keepDrawing = function(e) {
  if (!isDrawing) return;

  points.push(getXY(e));
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  var p1 = points[0];
  var p2 = points[1];

  ctx.moveTo(p1.x, p1.y);

  for (var i = 1, len = points.length; i < len; i++) {
    var midPoint = midPointBtw(p1, p2);
    ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
    p1 = points[i];
    p2 = points[i + 1];
  }
  ctx.lineTo(p1.x, p1.y);
  ctx.stroke();
  event.preventDefault();
};


var stopDrawing = function() {
  isDrawing = false;
  points = [];
};

el.addEventListener('touchstart', startDrawing);
el.addEventListener('mousedown', startDrawing);

el.addEventListener('touchmove', keepDrawing);
el.addEventListener('mousemove', keepDrawing);

el.addEventListener('touchend', stopDrawing);
el.addEventListener('mouseup', stopDrawing);

function clearCanvas(canvas,ctx) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

function download() {
var download = document.getElementById("download");
var image = document.getElementById("c").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}

</script>


<form id ="search">
<input type = "text" name="message" id="user_input">
<input type = "submit" value="Clear Sketchpad" id="clearbutton" 
onclick="clearCanvas(canvas,ctx);">
</form>
<a id="download" download="triangle.png">
<button type="button" onClick="download()">Download</button>
</a>

<p><span id='display'></span></p>
</body>
</html>

【问题讨论】：

标签： javascript html image canvas download

【解决方案1】：

在使用“onclick”时，您的函数下载似乎没有定义。 Uncaught ReferenceError: function is not defined with onclick

不要在 html 上点击 onclick，而是使用 addEventListener 在 javascript 中绑定它。

var d = document.getElementById("download");
d.addEventListener("click",function(){
var image = document.getElementById("c").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
d.setAttribute("href", image);
})

https://jsfiddle.net/8sa3ugcm/

【讨论】：

如果不设置img.crossOrigin = "Anonymous";，如果图像来自远程域，此解决方案将失败并显示SecurityError。

【解决方案2】：

<form id ="search">
<input type = "text" name="message" id="user_input">
<input type = "submit" value="Clear Sketchpad" id="clearbutton" 
  onclick="clearCanvas(canvas,ctx);">
 </form>
 <a id="download" download="triangle.png">
 <button type="button" onClick="download()">Download</button>
 </a>

第一个 onclick 是小写的“c”。第二个有大写的“C”。

第一个是正确的。

【讨论】：