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

Question

I'm having a lot of difficulty figuring out how to do this, I've looked all over for solutions but can't seem to get anywhere. 我在弄清楚如何做到这一点时遇到了很多困难，我一直在寻找解决方案，但似乎无所适从。 I've tried copying in code from working examples from the internet but whenever I put it into my own code it just doesn't seem to work. 我曾尝试从互联网上的工作示例中复制代码，但每当我将它放入我自己的代码中时，它似乎都无法正常工作。

I'm simply looking for when you draw in the canvas you click download and it saves what you drew on the canvas to your local storage. 我只是在你点击下载的画布中绘图时，它会将你在画布上绘制的内容保存到本地存储中。

Can someone help me out? 有人可以帮我吗？ Below is my code 以下是我的代码

<!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>

Answer 1

It seems your function download wasn't defined at the time "onclick" is used. 似乎在使用“onclick”时未定义函数下载。 Uncaught ReferenceError: function is not defined with onclick 未捕获的ReferenceError：函数未使用onclick定义

Instead of having onclick on html, bind it in javascript with addEventListener. 而不是onclick on html，使用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/ https://jsfiddle.net/8sa3ugcm/

Answer 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>

The first onclick has as lowercase 'c'. 第一个onclick有小写'c'。 The second one has uppercase 'C'. 第二个具有大写字母“ C”。

The first one is correct. 第一个是正确的。

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

问题描述

2 个解决方案

解决方案1
0 2019-03-19 01:08:57

解决方案2
0 2019-03-19 05:57:51

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

问题描述

2 个解决方案

解决方案1 0 2019-03-19 01:08:57

解决方案2 0 2019-03-19 05:57:51

解决方案1
0 2019-03-19 01:08:57

解决方案2
0 2019-03-19 05:57:51