Question

我正在尝试编写一个允许用户下载画布中绘制的图像的函数。

以下是代码：

canvas.html：

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="canvas.js"> </script>
  </head>
  <body onload="="draw()">
    <button type="button" onClick="saveImage()"> save image</button>
    <canvas width="1600" height="1440" id="canvas"></canvas>
  </body>
</html>

canvas.js

function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillRect(550, 150, 300, 300);
  ctx.fill();
  ctx.moveTo(722, 380);
  ctx.arc(380,380,350,0,2*Math.PI);
  ctx.lineWidth=15;
  ctx.strokeStyle="blue";
  ctx.stroke();
}

function download_image() {
  var _image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  window.location.href = _image;
  alert("start")
}

代码有效 - 只要图像是“正常”/如上所示 - 并且未加载drawImage()函数。

我将canvas.js文件更改为：

function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var img2= new Image();
  img2.onload=function() {
    ctx.drawImage(img2, 0, 50);
  }
  img2.src="./smile.png";
}

function saveImage() {
  var _image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  // tu sobie pobieramy adres URL i konwertuje na 'octet-stream'
  window.location.href = _image;
  alert("start");
}

不幸的是，没有任何反应。弹出警报。控制台显示以下错误：“未捕获的TypeError：无法读取未定义的属性'toDataURL' 在saveImage（canvas.js：17）在HTMLButtonElement.onclick“

如何解决？我可以下载用drawImage()绘制的图片吗？怎么样？

Answer 1

＆＃13;

/**
 *    Ken Fyrstenberg Nilsen
 *    Abidas Software
*/
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

/**
 * Demonstrates how to download a canvas an image with a single
 * direct click on a link.
 */
function doCanvas() {
    /* draw something */
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '60px sans-serif';
    ctx.fillText('Code Project', 10, canvas.height / 2 - 15);
    ctx.font = '26px sans-serif';
    ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35);
}

/**
 * This is the function that will take care of image extracting and
 * setting proper filename for the download.
 * IMPORTANT: Call it from within a onclick event.
*/
function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

/** 
 * The event handler for the link's onclick event. We give THIS as a
 * parameter (=the link element), ID of the canvas and a filename.
*/
document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

/**
 * Draw something to canvas
 */
doCanvas();

＆＃13;

	body {
	    background-color:#555557;
	    padding:0;
	    margin:0;
	    overflow:hidden;
	    font-family:sans-serif;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	canvas {
	    border:1px solid #000;
	    float:left;
	    clear:both;
	}
	#download {
	    float:left;
	    cursor:pointer;
	    color:#ccc;
	    padding:3px;
	}
	#download:hover {
	    color:#fff;
	}
	/*
	div, input {
	    font-size:16px;
	    font-family:sans-serif;
	    border:1px solid #000;
	    border-radius: 5px;
	    float:left;
	    padding:5px;
	    width:50px;
	    margin:1px 1px;
	    background-color:#bbb;
	}
	input[type='text'] {
	    font-size:16px;
	    font-weight:bold;
	    width:70px;
	    text-align:center;
	    background-color:#fff;
	    padding-bottom:4px;
	}
	input[type='button'] {
	    font-size:16px;
	    font-weight:bold;
	    width:110px;
	    text-align:center;
	    background-color:#333;
	    color:#eee;
	    padding-bottom:4px;
	}
	input[type='button']:hover {
	    background-color:#fff463;
	    color:#000;
	}
	input[type='range'] {
	    width:100px;
	    margin:0 0 0 10px;
	}
*/

＆＃13;

<canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>
<a id="download">Download as image</a>

＆＃13;

在这里找到了一个解决方案： http://jsfiddle.net/wboykinm/fL0q2uce/

function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

如何使用drawImage（）获取在画布上绘制的图片？

1 个答案: