0
Un projet nécessite qu'un élément de canevas soit converti en une image. J'ai quelques problèmes et essaye de créer un projet simple où je peux faire quelques expériences. Ce projet devrait convertir l'élément canvas en une image et l'ajouter à un div mais cela ne semble pas fonctionner. Voir le code ci-dessous Qu'est-ce que je fais?Comment ajouter une image créée à partir de l'élément canvas à la page?
Merci, Matt
/**
* 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>
Avez-vous vérifié vos outils de développement? Ils vous donnent une assez bonne idée de ce qu'est le problème. –
Img.appendTo n'est pas ($ ('# imagediv')); plus supposé être quelque chose comme $ ('# imagediv'). appendTo (img) ou quelque chose comme jquery ... img n'a pas de fonction appendTo dans votre code – joopmicroop