javascript - 如何将 html5 画布绘图下载为图像
问题描述
我最近刚刚将我的代码文件上传到服务器。我的网站是一个简单的 html5 绘图应用程序,用户可以在其中自由绘图。这部分我做得很好,但是我希望实现一个下载按钮,它可以简单地将用户绘制的任何图像直接下载到他们的设备,即电话、桌子、桌面。几个小时以来,我一直在寻找解决方案,但找不到任何东西。是我的服务器有问题吗?或类似的东西?任何帮助将非常感激。下面是我的代码
<!DOCTYPE html>
<html>
<head>
<title>Elemental</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
@media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
canvas { border: 3px solid #0BF446;
border-radius: 15px 0px 15px 0px;
display: block;
margin: 0 auto;
margin-top: 35px;
background-color:#313131;
position: relative;}
#download{background-color:#04A12B ;
border-radius: 0 15px 0 15px;
padding: 20px 40px;
margin: 0 auto;
display: block;
font-size: 14px;
margin-top: 35px;
color: white;
font-family: 'Montserrat Alternates', sans-serif;}
#clearbutton{background-color:#04A12B ;
border-radius: 0 15px 0 15px;
padding: 20px;
margin: 0 auto;
display: block;
font-size: 14px;
color: white;
font-family: 'Montserrat Alternates', sans-serif;
margin-top: 35px;}
</style>
</head>
<body>
<body onload="init()">
<a href="../homepage.html"><img src="minilogo.png" id ="logo"></a>
<canvas id="c" width="350px" height="350px"></canvas>
<button id = "download">Download</button>
<input type = "submit" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
<script>
function init() {
// Get the specific canvas element from the HTML document
canvas = document.getElementById('c');
}
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 = 30;
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);
ctx.beginPath()
}
</script>
</body>
</html>
解决方案
您可以使用该Canvas#toDataURL
方法生成包含画布当前图像的所有数据的 URL。然后可以使用它来代替任何 URL - 链接的href
、 awindow.open
等。对于下载链接,您可以使用download
链接上的属性,这是 HTML5 的补充。该download
属性的值是将用作默认保存文件名的文件名。
所以把所有这些放在一起:
<a id='downloadLink' download='myDrawing.png'>Download Image</a>
<script>
function createDownload() {
const downloadURL = document.getElementById('c').toDataURL();
document.getElementById('downloadLink').href = downloadURL;
}
</script>
推荐阅读
- google-cloud-platform - Google Cloud Cloud/Key 活动日志记录
- spring - AOP/AspectJ 未按标准执行的问题
- javascript - Chrome 扩展拦截对特定端点的 ajax 请求以修改表单数据
- python - Python如何对数据值求和
- macos - 启动时,阻止基于文档的应用重新打开退出时打开的未保存-未编辑-空文档
- python - Python中的矩阵向量运算
- javascript - Javascript替换/修改变量指向的对象?
- applescript - 无法使用 applescript 从钥匙串中读取“帐户名称”
- sql-server - 如何根据对两个不同表的列的测试来更新列的一个单元格中的值?(SQL 服务器)
- ruby-on-rails - Ruby File.exist?在文件可读之前返回 true