質問編集履歴
2
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
canvas上にイラストを描画⇨localstorageに保存
|
|
8
8
|
|
|
9
|
-
⇨<div id="gallery">の中に描画したイラストが作成される。
|
|
9
|
+
⇨<div id="gallery">の中に<class="">描画したイラストが作成される。
|
|
10
10
|
|
|
11
11
|
⇨#galleryの描画イラストをクリックすると、クリックした描画がcanvas上に描画される。
|
|
12
12
|
|
|
@@ -36,6 +36,60 @@
|
|
|
36
36
|
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
<html>
|
|
40
|
+
|
|
41
|
+
<body>
|
|
42
|
+
|
|
43
|
+
<input type="button" id="save" value="保存">
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
<canvas width="400" height="200" id="mycanvas" ></canvas>
|
|
48
|
+
|
|
49
|
+
<div id="gallery"></div>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<script>
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
var canvas = document.getElementById('mycanvas');
|
|
60
|
+
|
|
61
|
+
var ctx = canvas.getContext('2d');
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
$("#save").click(function(){
|
|
68
|
+
|
|
69
|
+
var img = $("<img>").attr({
|
|
70
|
+
|
|
71
|
+
width:100,
|
|
72
|
+
|
|
73
|
+
height:50,
|
|
74
|
+
|
|
75
|
+
src:canvas.toDataURL()
|
|
76
|
+
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
var link = $('<a>').attr({
|
|
80
|
+
|
|
81
|
+
href: canvas.toDataURL().replace('image/png',
|
|
82
|
+
|
|
83
|
+
'application/octet-stream'),
|
|
84
|
+
|
|
85
|
+
download: new Date().getTime() + '.png'});
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
localStorage.setItem("images", canvas.toDataURL());
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
39
93
|
|
|
40
94
|
|
|
41
95
|
$("#gallery").append(link.append(img.addClass("thumbnail")));
|
|
@@ -46,7 +100,7 @@
|
|
|
46
100
|
|
|
47
101
|
|
|
48
102
|
|
|
49
|
-
var dataURL=lcl.getItem('images');
|
|
103
|
+
var dataURL=localStorage.getItem('images');
|
|
50
104
|
|
|
51
105
|
if(dataURL){
|
|
52
106
|
|
|
@@ -66,6 +120,10 @@
|
|
|
66
120
|
|
|
67
121
|
});
|
|
68
122
|
|
|
123
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
124
|
+
|
|
125
|
+
});
|
|
126
|
+
|
|
69
127
|
|
|
70
128
|
|
|
71
129
|
```
|
1
誤字
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
画像をクリックすると、キャンバス上にその画像
|
|
1
|
+
画像をクリックすると、キャンバス上にその画像を描画したいです。
|
test
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
###実現したいこと
|
|
6
|
+
|
|
5
|
-
|
|
7
|
+
canvas上にイラストを描画⇨localstorageに保存
|
|
6
8
|
|
|
7
9
|
⇨<div id="gallery">の中に描画したイラストが作成される。
|
|
8
10
|
|
|
@@ -31,6 +33,8 @@
|
|
|
31
33
|
|
|
32
34
|
|
|
33
35
|
###該当のソースコード
|
|
36
|
+
|
|
37
|
+
```
|
|
34
38
|
|
|
35
39
|
|
|
36
40
|
|