Enregistrer toile et l'utiliser comme fond img

Any-Kind-Soul-Out-là,Enregistrer toile et l'utiliser comme fond img

je passer des heures à comprendre comment pourrais-je faire le codage de telle sorte que, lorsque après que l'utilisateur dessiné sur la toile, ils peut cliquer sur un btn appelé "enregistrer". Après quoi l'image du canevas apparaîtra en tant que BG img de la page Web.

Même après que l'utilisateur a fermé le navigateur Web, le bg img est toujours là lorsque l'utilisateur l'ouvre à nouveau. Je ne suis pas sûr qu'il soit possible de le faire ou non. Besoin d'aide ici, si besoin de mon codage complet je peux fournir.

Ci-dessous est mon codage actuel lorsque l'utilisateur a cliqué sur "enregistrer" btn. (Ouvrir une nouvelle fenêtre comme une image.)

// Save image 
var saveImage = document.createElement("button"); 
saveImage.innerHTML = "Save canvas"; 
saveImage.addEventListener("click", function (evt) { 
    window.open(canvas.toDataURL("image/png")); 
    evt.preventDefault(); 
}, false); 
document.getElementById("main-content").appendChild(saveImage);

Source

2014-04-17 leong

Vous pouvez utiliser toDataURL pour définir l'arrière-plan, et localStorage pour stocker 'en permanence' l'image:

http://jsbin.com/japekuzi/1/

utilisation tirage au sort pour remplir la toile avec des retours aléatoires, et définir le bouton pour définir et stocker la toile en cours en arrière-plan.

Notez que lorsque vous (re) exécutez jsbin, il conserve son dernier arrière-plan.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <canvas id='cv'></canvas> 
    <button id='dr'>draw</button> 
    <button id='st'>set</button> 
</body> 
</html>

JS:

var $=document.getElementById.bind(document); 
var cv = $('cv'); 
var ctx = cv.getContext('2d'); 

function randFill() { 
    ctx.clearRect(0,0,cv.width, cv.height); 
    for(var i=0; i<10; i++) { 
    var c= 0 | (Math.random()* 360); 
    ctx.fillStyle = 'hsl('+c+',75%,75%)'; 
    ctx.fillRect(Math.random()*cv.width*0.8, 
       Math.random()*cv.height*0.8, 20, 20); 
    } 
} 

function set() { 
    localStorage.setItem("bg", cv.toDataURL()); 
    retrieve(); 
} 

function retrieve() { 
    var cvURL = localStorage.getItem("bg", cv.toDataURL()); 
    if (!cvURL) return; 
    document.body.style. backgroundImage ='url('+ cvURL+')'; 
} 

randFill(); 
retrieve(); 

$('dr').onclick=randFill; 
$('st').onclick=set;

Source

2014-04-21 16:19:41 GameAlchemist

Enregistrer toile et l'utiliser comme fond img

Répondre

Questions connexes