canvasとjavascriptでお絵かきアプリを作成中です。
###実現したいこと
canvas上にイラストを描画⇨localstorageに保存
⇨<div id="gallery">の中に<class="">描画したイラストが作成される。
⇨#galleryの描画イラストをクリックすると、クリックした描画がcanvas上に描画される。
###発生している問題
<div id="gallery">に2つ以上描画されたイラストが書き出されるのですが、 それをクリックすると、一つ前のイラストしかcanvas上に描画されないです。2つ以上前のイラストをクリックしたら、そのイラストをcanvas上に描画したいのですが、
思うようにいきません。
申し訳ございませんが、教えていただけましたら幸いです。
###該当のソースコード
<html> <body> <input type="button" id="save" value="保存"> <canvas width="400" height="200" id="mycanvas" ></canvas> <div id="gallery"></div> <script> var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); $("#save").click(function(){ var img = $("<img>").attr({ width:100, height:50, src:canvas.toDataURL() }); var link = $('<a>').attr({ href: canvas.toDataURL().replace('image/png', 'application/octet-stream'), download: new Date().getTime() + '.png'}); localStorage.setItem("images", canvas.toDataURL()); $("#gallery").append(link.append(img.addClass("thumbnail"))); $(".thumbnail").click(function(){ $(this).attr("click",function(){ var dataURL=localStorage.getItem('images'); if(dataURL){ var img=new Image(); img.onload = function(){ ctx.drawImage(img,0,0); } img.src=dataURL; } }); }); ctx.clearRect(0, 0, canvas.width, canvas.height); });
###試したこと
課題に対してアプローチしたことを記載してください
localstorageの保存データに配列をつけたりなどしたのですが、
やり方が間違っていたのか、解消出来ませんでした。
回答1件
あなたの回答
tips
プレビュー