描画エリアに線で画像を塗り、それを保存、呼び出しをさせるという事をさせたいと考えています。
localStorageに保存するまでは上手くいったのですが、それをgetItemで呼び出させる所が上手くいかず、詰まっております。
コンソール上はエラーが出てこなかった(出てきた所は逐一修正してみました)ので、呼び出し部のスクリプトが機能していないと思われます。
が、どう対応したら良いか分からず、数日過ぎてしまった所です...
###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
###発生している問題・エラーメッセージ
「load」ボタンで保存した画像を呼び出したいが、機能しない
HTMLで作ったloadボタンを押した時、localStorageに保存した データを呼び出して表示させたいのですが、反応がありませんでした。localStorage.setItem自体は機能しており、描いた線は toDataURLでpngに変換してimg要素にしています。 <!-- 描画した線を呼び出すボタン --> <button id="load_btn">ロード</button> // 描いた線を保存する $("#save_btn").on("click",function(){ var canvas = document.createElement("canvas"); var url = canvas.toDataURL(); localStorage.setItem("save",url); }); // 描いた線を呼び出す $("#load_btn").on("click",function(){ var url = window.localStorage.getItem("save"); var image = new Image(); image.onload = function(){ context.drawImage(image, 0, 0); }; image.src = url; }); エラーメッセージ
###該当のソースコード
HTML5.Javascript,jQuery,canvas
ここにご自身が実行したソースコードを書いてください
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas.html</title> </head> <body> <section> <h1>Canvas</h1> <nav> <!-- 線の色を変更するHTML要素 --> <select name="color" id="selectbox"> <option value="#f52c09">赤</option> <option value="#000000">黒</option> <option value="#4325f7">青</option> </select> <!-- 線の太さを変更するHTML要素 --> <input type="range" id="line_bold" min="1" max="10"> <!-- 描画した線を消すクリアボタン--> <button id="clear_btn">クリア</button> <!-- 描画した線を保存するボタン --> <button id="save_btn">セーブ</button> <!-- 描画した線を呼び出すボタン --> <button id="load_btn">ロード</button> </nav> <canvas id="drawarea" width="500" height="500" style="border:1px solid blue;"></canvas> </section> <script src="js/jquery-2.1.3.min.js"></script> <script> //初期化 var canvas_mouse_event = false; //スイッチ [ true=線を引く, false=線は引かない ] *** var txy = 10; //iPadなどは15+すると良いかも var oldX = 0; //1つ前の座標を代入するための変数 var oldY = 0; //1つ前の座標を代入するための変数 var bold_line = 3; //ラインの太さをここで指定 var color = "#f00"; //ラインの色をここで指定 var can = $("#drawarea")[0]; console.log(can); var context = can.getContext("2d"); //MouseDown:フラグをTrue $(can).on("mousedown", function(e){ oldX = e.offsetX; oldY = e.offsetY - txy; canvas_mouse_event=true; window.localStorage.setItem("save", can.toDataURL()); }); // 線の色を変更する $("#selectbox").on("change",function(){ color = $(this).val(); }); //MouseMove:マウスをクリックされているか、されていないかチェックする $(can).on("mousemove", function (e){ if(canvas_mouse_event==true){ var px = e.offsetX; var py = e.offsetY - txy; context.strokeStyle = color; context.lineWidth = bold_line; context.beginPath(); context.lineJoin= "round"; context.lineCap = "round"; context.moveTo(oldX, oldY); context.lineTo(px, py); context.stroke(); context.closePath(); //context.drawImage(image,50,50); oldX = px; oldY = py; } }); //MouseUp:フラグをfalse $(can).on("mouseup", function(e){ canvas_mouse_event=false; }); //Mouseleave:マウスが描画エリアから外れたらフラグをfalseにする $(can).on("mouseleave", function(e){ canvas_mouse_event=false; }); //描いた線を消す $("#clear_btn").on("click",function (){ context.beginPath(); context.clearRect(0, 0, can.width, can.height); }); //文字の太さを変更する $("#line_bold").on("change",function(){ bold_line = $(this).val(); }); // 描いた線を保存する $("#save_btn").on("click",function(){ var canvas = document.createElement("canvas"); var url = canvas.toDataURL(); localStorage.setItem("save",url); }); // 描いた線を呼び出す $("#load_btn").on("click",function(){ var url = window.localStorage.getItem("save"); var image = new Image(); image.onload = function(){ context.drawImage(image, 0, 0); }; image.src = url; }); // var img = new Image(); // img.src = localStorage.getItem("save"); // img.onload = function(){ // console.log(img.src); // var drawarea = document.getElementById("drawarea"); // var context = drawarea.getContext("2d"); // context.drawImage(img, 0, 0); </script> </body> </html>
###試したこと
課題に対してアプローチしたことを記載してください
canvas localStorageで検索して、ひたすら良いやり方はないか調べましたが、実装しても上手くいきませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答1件
あなたの回答
tips
プレビュー