JavaScriptで絵を一枚単位で保存したい

###実現したい事
JavaScriptのお絵かきツールで絵をかいて進むボタンを押すと新しい用紙に移って、戻るボタンを押すと前に描いた絵が表示されるという機能を実装したいのですが、なかなかうまくいきません。現状では一枚の絵ではなく一筆書きで書いた部分までが保存され、戻るを押すと一筆前の画像に戻って、進むを押すと一筆後の画像が表示されるという状況です。何か解決策が分かる方、回答お願いします。
###ソース(修正後)

JavaScript
1var canvas = document.getElementById('canvassample'),
2    ctx = canvas.getContext('2d'),
3    moveflg = 0,
4    Xpoint,
5    Ypoint,
6    count = 0,
7    currentCanvas,
8    temp = [];
9 
10//初期値（サイズ、色、アルファ値）の決定
11var defSize = 7,
12    defColor = "#555";
13 
14
15// ストレージの初期化
16var myStorage = localStorage;
17window.onload = initLocalStorage();
18 
19 
20// PC対応
21canvas.addEventListener('mousedown', startPoint, false);
22canvas.addEventListener('mousemove', movePoint, false);
23canvas.addEventListener('mouseup', endPoint, false);
24// スマホ対応
25canvas.addEventListener('touchstart', startPoint, false);
26canvas.addEventListener('touchmove', movePoint, false);
27canvas.addEventListener('touchend', endPoint, false);
28 
29function startPoint(e){
30  e.preventDefault();
31  ctx.beginPath();
32  console.log(e.clientX);
33 
34   
35  // 矢印の先っぽから始まるように調整
36  Xpoint = e.clientX-8;
37  Ypoint = e.clientY-8;
38   
39  ctx.moveTo(Xpoint, Ypoint);
40}
41 
42function movePoint(e){
43  if(e.buttons === 1 || e.witch === 1 || e.type == 'touchmove')
44  {
45    Xpoint = e.pageX-8;
46  　Ypoint = e.pageY-8;
47    moveflg = 1;
48     
49    ctx.lineTo(Xpoint, Ypoint);
50    ctx.lineCap = "round";
51    ctx.lineWidth = defSize * 2;
52    ctx.strokeStyle = defColor;
53    ctx.stroke();
54     
55  }
56}
57 
58function endPoint(e)
59{
60    if(moveflg === 0)
61    {
62       ctx.lineTo(Xpoint-1, Ypoint-1);
63       ctx.lineCap = "round";
64       ctx.lineWidth = defSize * 2;
65       ctx.strokeStyle = defColor;
66       ctx.stroke();
67        
68    }
69    moveflg = 0;
70    
71   // setLocalStoreage();
72}
73
74function resetCanvas() {
75    ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
76}
77
78
79
80function initLocalStorage(){
81    myStorage.setItem("__log", JSON.stringify([]));
82}
83function setLocalStoreage(){
84    var png = canvas.toDataURL();
85    var logs = JSON.parse(myStorage.getItem("__log"));
86
87    setTimeout(function(){
88        logs.unshift({png});
89
90        myStorage.setItem("__log", JSON.stringify(logs));
91
92        currentCanvas = 0;
93        temp = [];
94
95    }, 0);
96}
97
98function prevCanvas(){
99    if(count == 0){
100        return ;
101    }
102    setLocalStoreage();
103    var logs = JSON.parse(myStorage.getItem("__log"));
104
105    if(logs.length > 0)
106    {
107        temp.unshift(logs.shift());
108
109        setTimeout(function(){
110            myStorage.setItem("__log", JSON.stringify(logs));
111            resetCanvas();
112
113            draw(logs[0]['png']);
114
115        }, 0);
116    }
117    count--;
118}
119
120function nextCanvas(){
121    setLocalStoreage();
122    var logs = JSON.parse(myStorage.getItem("__log"));
123
124   // if(temp.length > 0)
125    //{
126        logs.unshift(temp.shift());
127
128        setTimeout(function(){
129            myStorage.setItem("__log", JSON.stringify(logs));
130            resetCanvas();
131
132            draw(logs[0]['png']);
133
134        }, 0);
135    //}
136    count++; 
137}
138
139function draw(src) {
140    var img = new Image();
141    img.src = src;
142
143    img.onload = function() {
144        ctx.drawImage(img, 0, 0);
145    }
146}

行動規範の内容に同意します

回答2件

setTimeout()はシングルスレッド動作であるJavaScriptには高速化に対して寄与しないと考えられるため使用していません。

javascript
1function prevCanvas() {
2  var logs = JSON.parse(myStorage.getItem("__log"));
3  if (logs.length > 0) {
4    var png = canvas.toDataURL();
5    temp.unshift({ png });
6    resetCanvas();
7    draw(logs.shift()['png']);
8    myStorage.setItem("__log", JSON.stringify(logs));
9  }
10}
11
12function nextCanvas() {
13  var logs = JSON.parse(myStorage.getItem("__log"));
14  var png = canvas.toDataURL();
15  logs.unshift({ png });
16  resetCanvas();
17  if (temp.length > 0) {
18    draw(temp.shift()['png']);
19  }
20  myStorage.setItem("__log", JSON.stringify(logs));
21}

投稿2018/08/17 19:55

reosablo

総合スコア339

ベストアンサー

ストロークを記録したいのでなく、画像データでいいのなら、
getImageData()でバッファをメモリー、putImageData()でバッファをリストア

投稿2018/08/15 01:09

efcode

総合スコア422

aiueoaiueoaiue

2018/08/16 16:57

質問の意図が伝わってなかったみたいですね。画像を保存する方法自体はsetLocalStoreage(); という関数を定義しているので別にいいんです。知りたいのは絵を1枚目、2枚目、3枚目と書いていって、3枚目の画面で戻るボタンを押すと2枚目の絵が表示され、もう一度戻るボタンを押すと1枚目の絵が表示されるといった風にしたいのです。そのアイデアがどうにも思い浮かばなくて・・・。

行動規範の内容に同意します

あなたの回答