Javascript 如何下载html5画布图形作为图像_Javascript_Html_Css_Download_Html5 Canvas

Javascript 如何下载html5画布图形作为图像

javascript html css download html5-canvas

Javascript 如何下载html5画布图形作为图像,javascript,html,css,download,html5-canvas,Javascript,Html,Css,Download,Html5 Canvas,我最近刚把代码文件上传到服务器上。我的网站是一个简单的html5绘图应用程序，用户可以自由绘图。我这部分做得很好，但我希望实现一个下载按钮，只需下载任何用户绘制的图像直接到他们的设备，即手机，桌子，桌面。我已经找了好几个小时的解决方案，但什么都找不到。我的服务器有问题吗？或者类似的？任何帮助都将不胜感激。下面是我的代码 <!DOCTYPE html> <html> <head> <title>Elemental</title> <

我最近刚把代码文件上传到服务器上。我的网站是一个简单的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>


元素
@导入url（'https://fonts.googleapis.com/css?family=Montserrat+候补者'；
@媒体屏幕和屏幕（最大宽度：425px）{
html，正文{
溢出x：隐藏；
宽度：100%；
保证金：0；
}
画布{边框：3px实心#0BF446；
边界半径：15px 0px 15px 0px；
显示：块；
保证金：0自动；
利润上限：35px；
背景色：#313131；
位置：相对；}
#下载{背景色：#04A12B；
边界半径：0 15px 0 15px；
填充：20px 40px；
保证金：0自动；
显示：块；
字体大小：14px；
利润上限：35px；
颜色：白色；
字体系列：'Montserrat Alternates'，无衬线；}
#clearbutton{背景色：#04A12B；
边界半径：0 15px 0 15px；
填充：20px；
保证金：0自动；
显示：块；
字体大小：14px；
颜色：白色；
字体系列：“蒙特塞拉特交替”，无衬线；
页边距顶部：35px；}
下载
函数init（）{
//从HTML文档中获取特定的画布元素
canvas=document.getElementById（'c'）；
}
函数中点BTW（p1、p2）{
返回{
x:p1.x+（p2.x-p1.x）/2，
y:p1.y+（p2.y-p1.y）/2
};
}
函数getPattern（）{
返回ctx.createPattern（img，“repeat”）；
}
var el=document.getElementById（'c'）；
var ctx=el.getContext（'2d'）；
ctx.lineWidth=30；
ctx.lineJoin=ctx.lineCap='round'；
var img=新图像；
img.onload=函数（）{
ctx.strokeStyle=getPattern（）；
};
img.src=”https://i.postimg.cc/rF2R0GRY/dick2.png";
var isDrawing，点数=[]；
var getXY=函数（e）{
var source=e.touchs？e.touchs[0]：e；
返回{
x:source.clientX，
y:source.clientY
};
};
var startDrawing=函数（e）{
isDrawing=true；
点推（getXY（e））；
event.preventDefault（）；
};
var keepDrawing=函数（e）{
如果（！isDrawing）返回；
点推（getXY（e））；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
变量p1=点[0]；
变量p2=点[1]；
ctx.moveTo（p1.x，p1.y）；
对于（变量i=1，len=points.length；i

您可以使用

Canvas#todata URL

方法生成包含画布当前图像所有数据的URL。然后可以使用该URL代替任何URL——链接的

href

、窗口。打开

，等等。对于下载链接，您可以使用链接上的下载
属性，这是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>

下载图像
函数createDownload（）{
const downloadURL=document.getElementById（'c'）.toDataURL（）；
document.getElementById（'downloadLink'）。href=downloadURL；
}
您可以使用Canvas#todata URL
方法生成包含画布当前图像所有数据的URL。然后可以使用该URL代替任何URL——链接的href
、窗口。打开，等等。对于下载链接，您可以使用链接上的下载
属性，这是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>

下载图像
函数createDownload（）{
const downloadURL=document.getElementById（'c'）.toDataURL（）；
document.getElementById（'downloadLink'）。href=downloadURL；
}
这可能是你要找的东西这可能是你要找的东西谢谢你的帖子。我试过了，在文件下载之前效果很好。文件下载后无法以图像形式打开，它一直说“不支持此文件类型”即使图像是PNG格式的？这里会有什么问题？我不确定谢谢你的帖子。我试过了，直到文件下载后，它一直工作正常。文件下载后无法作为图像打开，它一直说“不支持此文件类型”即使这张图片是PNG的？这里有什么问题？我不确定