CanvasでlocalStorageに保存した画像を呼び出したいが上手くいかない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,923

KyoheiTsuno

score 15

描画エリアに線で画像を塗り、それを保存、呼び出しをさせるという事をさせたいと考えています。

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/ツール等のバージョンなど)

より詳細な情報

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/07 18:06 編集

    「何」が「どのように」上手くいかないのか、具体的にコードのどの部分で詰まっているのかなどを追記されたほうが回答が望めると思います。

    キャンセル

  • KyoheiTsuno

    2016/08/07 20:28

    ご指摘ありがとうございます。少しでも分かりやすくする為、詰まっているコードを追記しました。引き続き、確認してみます。

    キャンセル

回答 1

checkベストアンサー

+1

多分保存されていません。

// 描いた線を保存する
$( "#save_btn" ).on( "click", function() {
    var canvas = document.createElement("canvas");    // 新たに真っ白なcanvas要素を準備している
    var url = canvas.toDataURL();    // やっぱり真っ白(高さや幅も無いかも)
    localStorage.setItem( "save", url );    // それを保存
} );

【[HTML5] Canvasの内容をLocalStorageで保存/読み込み - YoheiM .NET】
http://www.yoheim.net/blog.php?q=20120204

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/07 22:58

    ご回答下さいまして、誠にありがとうございます。
    上記のURLは以前試してみたのですが、上手くいかず。
    今回も試しましたが、やはりエラーが出てきました。

    <エラー内容>
    canvas_base.html:109 Uncaught TypeError: Cannot read property 'toDataURL' of null

    Google Chromeのコンソールにて確認した所、toDataURLがnullというエラーが出てきています。

    //MouseDown:フラグをTrue
    $(can).on("mousedown", function(e){
    oldX = e.offsetX;
    oldY = e.offsetY - txy;
    canvas_mouse_event=true;
    window.localStorage.setItem("save", can.toDataURL());
    });

    こちらのコードで"save"をsetしているので、("save")としましたが、
    getElementByIdでの()内記述が間違っているのではないか?と
    疑っています。

    キャンセル

  • 2016/08/07 22:59

    <エラー箇所>

    // 描いた線を保存する

    $("#save_btn").on("click",function(){
    var canvas = document.getElementById("save"); ←こちらです
    var url = canvas.toDataURL();
    window.localStorage.setItem("save",url);
    });

    キャンセル

  • 2016/08/07 23:07

    コードにコメント書いたんだけど、読みました?

    コメントに書いてあるコードと質問に書いてあるコードが違うようですが、どちらについてコメントすればいいのか・・・。

    document.getElementById が何のための関数かはご存知でしょうか。これは、HTMLのドキュメントのなかからIDを手がかりにHTML要素を取得するものです。id="save"となっているHTML要素は質問にあるコードには書かれていません。これもここに書いていないだけであるのでしょうか。

    キャンセル

  • 2016/08/07 23:10

    無事解決しました!
    var canvas = document.getElementById("save"); の部分を、
    ("drawarea")にした所、表示されるようになりました。
    キーワードの指定方法がよく分かっていないので、関連付けなどをしっかり学びたい
    と思います。どうもありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる