14247


canvasとlocalstorageを使ったwebアプリケーションを作っているのですが、

canvas内に描いたデータをlocalstorageに出力して、そのデータを画像で表示するところまで行いたいと思っています。

色々調べてみるとbase64を使って、描いた絵を文字列として認識するのは分かり、  
localstorageには、png型で記載されているのですが、いまいちそのデータを画像表示する書き方が分かりません。

[code]

    $("#save").on("click", function(){
     var canvas = document.getElementById("drawarea");
     var base64 = canvas.toDataURL();
     localStorage.setItem(save, base64);
    });
    
    
    $(window).on("load", function(){
     if(localStorage.getItem("save")){
      var base64 = localStorage.getItem("save")
      $("#drawarea").val(base64);
     }
    });
[/code]

canvasつまり"drawarea"にbase64にセーブしたデータを表示したいのですが、  
これだとリロードしても表示されないままです。

どう記述するのが良いのか教えて欲しいです。


CC BY-SA 3.0
2015-08-10T15:21:40.800
14246
2019-12-13T19:10:40.703
8415
question
javascript jquery
canvasで描いた絵をlocalstorageに保存してデータを表示したい


[`toDataURL`](https://developer.mozilla.org/en-
US/docs/Web/API/HTMLCanvasElement/toDataURL)で得られる文字列データは、base64というより[Data URI
scheme](https://ja.wikipedia.org/wiki/Data_URI_scheme)で表現されたURLです。  
これはそのままURLとして扱えますから、単に`HTMLImageElement`オブジェクトの`src`プロパティに設定すれば読み込むことができます。

[code]

    // Data URLの書き出し
    var canvas = document.createElement("canvas");
    canvas.width = 300;
    canvas.height = 200;
    var g = canvas.getContext("2d");
    g.fillStyle = "mediumblue";
    g.fillRect(0, 0, 100, 200);
    g.fillStyle = "crimson";
    g.fillRect(200, 0, 100, 200);
    var url = canvas.toDataURL();　
    localStorage.setItem("save", url);
    
    // Data URLの読み込み
    var img = new Image();
    img.src = localStorage.getItem("save");
    img.onload = function () {
        var drawarea = document.getElementById("drawarea");
        var g = drawarea.getContext("2d");
        g.drawImage(img, 0, 0);
    };
    
[/code]

<https://jsfiddle.net/tc39v7ss/3/>


CC BY-SA 4.0
2015-08-10T17:10:59.007
14247
2019-12-13T19:10:40.703
2019-12-13T19:10:40.703
32986
10330
14246
answer