teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問JavaScriptで絵を一枚単位で保存したい

編集履歴

質問編集履歴

2

syuusei

2018/08/17 15:21

投稿

aiueoaiueoaiue
aiueoaiueoaiue

スコア94

test CHANGED
File without changes
test CHANGED
@@ -1,16 +1,6 @@
1
1
  ###実現したい事
2
2
 
3
- JavaScriptのお絵かきツールで絵をかいて進むボタンを押すと新しい用紙に移って、戻るボタンを押すと前に描いた絵が表示されるという機能を実装したいのですが、なかなかうまくいきません。現状では一枚の絵ではなく一筆書きで書いた部分までが保存され、戻るを押すと一筆前の画像に戻って、進むを押すと一筆後の画像が表示されるという状況です。最終的に実現したいのは
3
+ JavaScriptのお絵かきツールで絵をかいて進むボタンを押すと新しい用紙に移って、戻るボタンを押すと前に描いた絵が表示されるという機能を実装したいのですが、なかなかうまくいきません。現状では一枚の絵ではなく一筆書きで書いた部分までが保存され、戻るを押すと一筆前の画像に戻って、進むを押すと一筆後の画像が表示されるという状況です。何か解決策が分かる方、回答お願いします。
4
-
5
- 1枚目の絵を描く→進ボタンを押すと白紙(2枚目)が表示される→2枚目の絵を描く→進ボタンを押すと白紙(3枚目)が表示される.
6
-
7
- 白紙(3枚目)が表示された状態で戻るを押す→2枚目の絵が表示される→その状態で戻るボタンを押す→
8
-
9
- 1枚目の絵が表示される。
10
-
11
- といった感じです。
12
-
13
- 何か解決策が分かる方、回答お願いします。
14
4
 
15
5
  ###ソース(修正後)
16
6
 

1

修正

2018/08/17 15:21

投稿

aiueoaiueoaiue
aiueoaiueoaiue

スコア94

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,18 @@
1
1
  ###実現したい事
2
2
 
3
- JavaScriptのお絵かきツールで絵をかいて進むボタンを押すと新しい用紙に移って、戻るボタンを押すと前に描いた絵が表示されるという機能を実装したいのですが、なかなかうまくいきません。現状では一枚の絵ではなく一筆書きで書いた部分までが保存され、戻るを押すと一筆前の画像に戻って、進むを押すと一筆後の画像が表示されるという状況です。画像を一筆単位ではなく一枚単位で保存する方法が分かる方、回答お願いします。
4
-
5
- ###ソース
3
+ JavaScriptのお絵かきツールで絵をかいて進むボタンを押すと新しい用紙に移って、戻るボタンを押すと前に描いた絵が表示されるという機能を実装したいのですが、なかなかうまくいきません。現状では一枚の絵ではなく一筆書きで書いた部分までが保存され、戻るを押すと一筆前の画像に戻って、進むを押すと一筆後の画像が表示されるという状況です。最終的に実現したいのは
4
+
5
+ 1枚目の絵を描く→進ボタンを押すと白紙(2枚目)が表示される→2枚目の絵を描く→進ボタンを押すと白紙(3枚目)が表示される.
6
+
7
+ 白紙(3枚目)が表示された状態で戻るを押す→2枚目の絵が表示される→その状態で戻るボタンを押す→
8
+
9
+ 1枚目の絵が表示される。
10
+
11
+ といった感じです。
12
+
13
+ 何か解決策が分かる方、回答お願いします。
14
+
15
+ ###ソース(修正後)
6
16
 
7
17
  ```JavaScript
8
18
 
@@ -16,6 +26,8 @@
16
26
 
17
27
  Ypoint,
18
28
 
29
+ count = 0,
30
+
19
31
  currentCanvas,
20
32
 
21
33
  temp = [];
@@ -144,71 +156,117 @@
144
156
 
145
157
 
146
158
 
159
+ // setLocalStoreage();
160
+
161
+ }
162
+
163
+
164
+
165
+ function resetCanvas() {
166
+
167
+ ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
168
+
169
+ }
170
+
171
+
172
+
173
+
174
+
175
+
176
+
177
+ function initLocalStorage(){
178
+
179
+ myStorage.setItem("__log", JSON.stringify([]));
180
+
181
+ }
182
+
183
+ function setLocalStoreage(){
184
+
185
+ var png = canvas.toDataURL();
186
+
187
+ var logs = JSON.parse(myStorage.getItem("__log"));
188
+
189
+
190
+
191
+ setTimeout(function(){
192
+
193
+ logs.unshift({png});
194
+
195
+
196
+
197
+ myStorage.setItem("__log", JSON.stringify(logs));
198
+
199
+
200
+
201
+ currentCanvas = 0;
202
+
203
+ temp = [];
204
+
205
+
206
+
207
+ }, 0);
208
+
209
+ }
210
+
211
+
212
+
213
+ function prevCanvas(){
214
+
215
+ if(count == 0){
216
+
217
+ return ;
218
+
219
+ }
220
+
147
221
  setLocalStoreage();
148
222
 
149
- }
150
-
151
-
152
-
153
- function resetCanvas() {
154
-
155
- ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
156
-
157
- }
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
- function initLocalStorage(){
166
-
167
- myStorage.setItem("__log", JSON.stringify([]));
168
-
169
- }
170
-
171
- function setLocalStoreage(){
172
-
173
- var png = canvas.toDataURL();
174
-
175
223
  var logs = JSON.parse(myStorage.getItem("__log"));
176
224
 
177
225
 
178
226
 
227
+ if(logs.length > 0)
228
+
229
+ {
230
+
231
+ temp.unshift(logs.shift());
232
+
233
+
234
+
179
- setTimeout(function(){
235
+ setTimeout(function(){
180
-
181
- logs.unshift({png});
236
+
182
-
183
-
184
-
185
- myStorage.setItem("__log", JSON.stringify(logs));
237
+ myStorage.setItem("__log", JSON.stringify(logs));
186
-
187
-
188
-
238
+
189
- currentCanvas = 0;
239
+ resetCanvas();
190
-
240
+
241
+
242
+
191
- temp = [];
243
+ draw(logs[0]['png']);
192
-
193
-
194
-
244
+
245
+
246
+
195
- }, 0);
247
+ }, 0);
196
-
248
+
197
- }
249
+ }
250
+
198
-
251
+ count--;
252
+
199
-
253
+ }
200
-
254
+
255
+
256
+
201
- function prevCanvas(){
257
+ function nextCanvas(){
258
+
259
+ setLocalStoreage();
202
260
 
203
261
  var logs = JSON.parse(myStorage.getItem("__log"));
204
262
 
205
263
 
206
264
 
207
- if(logs.length > 0)
265
+ // if(temp.length > 0)
208
-
266
+
209
- {
267
+ //{
210
-
268
+
211
- temp.unshift(logs.shift());
269
+ logs.unshift(temp.shift());
212
270
 
213
271
 
214
272
 
@@ -226,60 +284,28 @@
226
284
 
227
285
  }, 0);
228
286
 
287
+ //}
288
+
289
+ count++;
290
+
291
+ }
292
+
293
+
294
+
295
+ function draw(src) {
296
+
297
+ var img = new Image();
298
+
299
+ img.src = src;
300
+
301
+
302
+
303
+ img.onload = function() {
304
+
305
+ ctx.drawImage(img, 0, 0);
306
+
229
307
  }
230
308
 
231
309
  }
232
310
 
233
-
234
-
235
- function nextCanvas(){
236
-
237
- var logs = JSON.parse(myStorage.getItem("__log"));
238
-
239
-
240
-
241
- if(temp.length > 0)
242
-
243
- {
244
-
245
- logs.unshift(temp.shift());
246
-
247
-
248
-
249
- setTimeout(function(){
250
-
251
- myStorage.setItem("__log", JSON.stringify(logs));
252
-
253
- resetCanvas();
254
-
255
-
256
-
257
- draw(logs[0]['png']);
258
-
259
-
260
-
261
- }, 0);
262
-
263
- }
264
-
265
- }
266
-
267
-
268
-
269
- function draw(src) {
270
-
271
- var img = new Image();
272
-
273
- img.src = src;
274
-
275
-
276
-
277
- img.onload = function() {
278
-
279
- ctx.drawImage(img, 0, 0);
280
-
281
- }
282
-
283
- }
284
-
285
311
  ```