如何添加从画布元素创建的图像到页面？
问题描述：
项目需要将画布元素转换为图像。我有一些问题，并试图创建一个简单的项目，我可以做一些实验。该项目应该将canvas元素转换为图像并将其附加到div，但它似乎不起作用。看下面的代码我该怎么做？如何添加从画布元素创建的图像到页面？
谢谢， 马特
/**
* 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 IE', 10, canvas.height/2 - 15);
ctx.font = '26px sans-serif';
ctx.fillText('Click link above to save this as image', 15, canvas.height/2 + 35);
}
function downloadCanvas(link, canvasId, filename) {
var canvas = document.getElementById(canvasId);
var imgData = canvas.toDataURL();
var img = new Image();
img.onload = split_4;
img.src = imgData;
img.appendTo($('#imagediv'));
}
function split_4() {
alert('did something happen?')
};
/**
* 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();\t body {
\t background-color:#555557;
\t padding:0;
\t margin:0;
\t overflow:hidden;
\t font-family:sans-serif;
\t -webkit-user-select: none;
\t -khtml-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t user-select: none;
\t }
\t canvas {
\t border:1px solid #000;
\t float:left;
\t clear:both;
\t }
\t #download {
\t float:left;
\t cursor:pointer;
\t color:#ccc;
\t padding:3px;
\t }
\t #download:hover {
\t color:#fff;
\t }
\t /*
\t div, input {
\t font-size:16px;
\t font-family:sans-serif;
\t border:1px solid #000;
\t border-radius: 5px;
\t float:left;
\t padding:5px;
\t width:50px;
\t margin:1px 1px;
\t background-color:#bbb;
\t }
\t input[type='text'] {
\t font-size:16px;
\t font-weight:bold;
\t width:70px;
\t text-align:center;
\t background-color:#fff;
\t padding-bottom:4px;
\t }
\t input[type='button'] {
\t font-size:16px;
\t font-weight:bold;
\t width:110px;
\t text-align:center;
\t background-color:#333;
\t color:#eee;
\t padding-bottom:4px;
\t }
\t input[type='button']:hover {
\t background-color:#fff463;
\t color:#000;
\t }
\t input[type='range'] {
\t width:100px;
\t margin:0 0 0 10px;
\t }
*/
\t<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="download">Click to Create and Append Image from Canvas Element</a>
<canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>
<div id="imagediv"></div>
答
相反的img.appendTo($('#imagediv'));，做$('#imagediv').append(img);。干杯!
/**
* 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 IE', 10, canvas.height/2 - 15);
ctx.font = '26px sans-serif';
ctx.fillText('Click link above to save this as image', 15, canvas.height/2 + 35);
}
function downloadCanvas(link, canvasId, filename) {
var canvas = document.getElementById(canvasId);
var imgData = canvas.toDataURL();
var img = new Image();
img.onload = split_4;
img.src = imgData;
$('#imagediv').append(img);
}
function split_4() {
alert('did something happen?')
};
/**
* 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();\t body {
\t background-color:#555557;
\t padding:0;
\t margin:0;
\t overflow:hidden;
\t font-family:sans-serif;
\t -webkit-user-select: none;
\t -khtml-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t user-select: none;
\t }
\t canvas {
\t border:1px solid #000;
\t float:left;
\t clear:both;
\t }
\t #download {
\t float:left;
\t cursor:pointer;
\t color:#ccc;
\t padding:3px;
\t }
\t #download:hover {
\t color:#fff;
\t }
\t /*
\t div, input {
\t font-size:16px;
\t font-family:sans-serif;
\t border:1px solid #000;
\t border-radius: 5px;
\t float:left;
\t padding:5px;
\t width:50px;
\t margin:1px 1px;
\t background-color:#bbb;
\t }
\t input[type='text'] {
\t font-size:16px;
\t font-weight:bold;
\t width:70px;
\t text-align:center;
\t background-color:#fff;
\t padding-bottom:4px;
\t }
\t input[type='button'] {
\t font-size:16px;
\t font-weight:bold;
\t width:110px;
\t text-align:center;
\t background-color:#333;
\t color:#eee;
\t padding-bottom:4px;
\t }
\t input[type='button']:hover {
\t background-color:#fff463;
\t color:#000;
\t }
\t input[type='range'] {
\t width:100px;
\t margin:0 0 0 10px;
\t }
*/
\t<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="download">Click to Create and Append Image from Canvas Element</a>
<canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>
<div id="imagediv"></div>
你检查你的开发工具？他们给你一个很好的想法是什么问题。 –
不是img.appendTo（$（'＃imagediv'））;更应该是像$（'＃imagediv'）。appendTo（img）或类似jquery的东西... img在代码中没有函数appendTo – joopmicroop