Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8997429

Browse files
Added an image upload example
1 parent 93419f9 commit 8997429

File tree

2 files changed

+271
-7
lines changed

2 files changed

+271
-7
lines changed

‎public/index.html‎

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,22 @@
99

1010
<!-- Netlify Identity Widget -->
1111
<script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
12+
<script type="text/javascript" src="js/ImageTools.js"></script>
1213
</head>
1314

1415
<body>
1516
<div class="container text-center mt-5">
17+
<h2>Json data example</h2>
1618
<button class="btn btn-outline-dark" id="save" style="display: none;">
1719
Save
1820
</button>
1921
</div>
2022
<div class="container" id="result"></div>
23+
<br /><br />
24+
<div class="container">
25+
<h2>Image Example</h2>
26+
<input type="file" id="select" />
27+
</div>
2128

2229
<script>
2330
const saveBut = document.querySelector("#save");
@@ -26,31 +33,61 @@
2633
console.log(user);
2734
saveBut.style.display = "block";
2835
saveBut.addEventListener("click", function() {
29-
save();
36+
let data = {
37+
title: "Hello world. This is some text.",
38+
};
39+
let type = "json";
40+
save(data, type);
3041
});
3142
});
3243

33-
async function save() {
44+
async function save(data,type) {
3445
const token = await netlifyIdentity.currentUser().jwt();
3546
let user = await netlifyIdentity.currentUser();
3647

37-
let data = {
38-
title: "Hello world. This is some text.",
39-
};
40-
4148
const response = await fetch("/.netlify/functions/save", {
4249
headers: {
4350
Authorization: `Bearer ${token}`,
4451
},
4552
method: "post",
4653
body: JSON.stringify({
4754
data: data,
48-
type: "json",
55+
type: type,
4956
}),
5057
}).then(function(res) {
5158
document.querySelector("#result").innerHTML = "Succes!";
5259
});
5360
}
61+
62+
document.getElementById("select").onchange = function(evt) {
63+
ImageTools.resize(
64+
this.files[0], {
65+
width: 500, // maximum width
66+
height: 500, // maximum height
67+
},
68+
function(blob, didItResize) {
69+
// didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
70+
71+
// you can also now upload this blob using an XHR.
72+
var reader = new FileReader();
73+
reader.readAsDataURL(blob);
74+
reader.onloadend = function() {
75+
var base64data = reader.result;
76+
77+
let name = Math.random().toString(36).substr(2, 9) + ".jpg";
78+
let path = "img/" + name;
79+
80+
// first, temporarily show the base64 data
81+
//document.querySelector(".current-item").src = base64data;
82+
83+
// save the image
84+
var data = base64data.replace(/^data:image\/\w+;base64,/, "");
85+
let type = "image";
86+
save(data, type);
87+
};
88+
}
89+
);
90+
};
5491
</script>
5592
</body>
5693

‎public/js/ImageTools.js‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
"use strict";
2+
3+
if (typeof exports === "undefined") {
4+
var exports = {};
5+
}
6+
7+
if (typeof module === "undefined") {
8+
var module = {};
9+
}
10+
11+
Object.defineProperty(exports, "__esModule", {
12+
value: true,
13+
});
14+
15+
var _createClass = (function() {
16+
function defineProperties(target, props) {
17+
for (var i = 0; i < props.length; i++) {
18+
var descriptor = props[i];
19+
descriptor.enumerable = descriptor.enumerable || false;
20+
descriptor.configurable = true;
21+
if ("value" in descriptor) descriptor.writable = true;
22+
Object.defineProperty(target, descriptor.key, descriptor);
23+
}
24+
}
25+
return function(Constructor, protoProps, staticProps) {
26+
if (protoProps) defineProperties(Constructor.prototype, protoProps);
27+
if (staticProps) defineProperties(Constructor, staticProps);
28+
return Constructor;
29+
};
30+
})();
31+
32+
function _classCallCheck(instance, Constructor) {
33+
if (!(instance instanceof Constructor)) {
34+
throw new TypeError("Cannot call a class as a function");
35+
}
36+
}
37+
38+
var hasBlobConstructor =
39+
typeof Blob !== "undefined" &&
40+
(function() {
41+
try {
42+
return Boolean(new Blob());
43+
} catch (e) {
44+
return false;
45+
}
46+
})();
47+
48+
var hasArrayBufferViewSupport =
49+
hasBlobConstructor &&
50+
typeof Uint8Array !== "undefined" &&
51+
(function() {
52+
try {
53+
return new Blob([new Uint8Array(100)]).size === 100;
54+
} catch (e) {
55+
return false;
56+
}
57+
})();
58+
59+
var hasToBlobSupport =
60+
typeof HTMLCanvasElement !== "undefined" ?
61+
HTMLCanvasElement.prototype.toBlob :
62+
false;
63+
64+
var hasBlobSupport =
65+
hasToBlobSupport ||
66+
(typeof Uint8Array !== "undefined" &&
67+
typeof ArrayBuffer !== "undefined" &&
68+
typeof atob !== "undefined");
69+
70+
var hasReaderSupport =
71+
typeof FileReader !== "undefined" || typeof URL !== "undefined";
72+
73+
var ImageTools = (function() {
74+
function ImageTools() {
75+
_classCallCheck(this, ImageTools);
76+
}
77+
78+
_createClass(ImageTools, null, [{
79+
key: "resize",
80+
value: function resize(file, maxDimensions, callback) {
81+
if (typeof maxDimensions === "function") {
82+
callback = maxDimensions;
83+
maxDimensions = {
84+
width: 640,
85+
height: 480,
86+
};
87+
}
88+
89+
var maxWidth = maxDimensions.width;
90+
var maxHeight = maxDimensions.height;
91+
92+
if (!ImageTools.isSupported() || !file.type.match(/image.*/)) {
93+
callback(file, false);
94+
return false;
95+
}
96+
97+
if (file.type.match(/image\/gif/)) {
98+
// Not attempting, could be an animated gif
99+
callback(file, false);
100+
// TODO: use https://github.com/antimatter15/whammy to convert gif to webm
101+
return false;
102+
}
103+
104+
var image = document.createElement("img");
105+
106+
image.onload = function(imgEvt) {
107+
var width = image.width;
108+
var height = image.height;
109+
var isTooLarge = false;
110+
111+
if (width > height && width > maxDimensions.width) {
112+
// width is the largest dimension, and it's too big.
113+
height *= maxDimensions.width / width;
114+
width = maxDimensions.width;
115+
isTooLarge = true;
116+
} else if (height > maxDimensions.height) {
117+
// either width wasn't over-size or height is the largest dimension
118+
// and the height is over-size
119+
width *= maxDimensions.height / height;
120+
height = maxDimensions.height;
121+
isTooLarge = true;
122+
}
123+
124+
if (!isTooLarge) {
125+
// early exit; no need to resize
126+
callback(file, false);
127+
return;
128+
}
129+
130+
var canvas = document.createElement("canvas");
131+
canvas.width = width;
132+
canvas.height = height;
133+
134+
var ctx = canvas.getContext("2d");
135+
ctx.imageSmoothingEnabled = true;
136+
ctx.imageSmoothingQuality = 'high';
137+
ctx.drawImage(image, 0, 0, width, height);
138+
139+
if (hasToBlobSupport) {
140+
canvas.toBlob(function(blob) {
141+
callback(blob, true);
142+
}, file.type);
143+
} else {
144+
var blob = ImageTools._toBlob(canvas, file.type);
145+
callback(blob, true);
146+
}
147+
};
148+
ImageTools._loadImage(image, file);
149+
150+
return true;
151+
},
152+
},
153+
{
154+
key: "_toBlob",
155+
value: function _toBlob(canvas, type) {
156+
var dataURI = canvas.toDataURL(type);
157+
var dataURIParts = dataURI.split(",");
158+
var byteString = undefined;
159+
if (dataURIParts[0].indexOf("base64") >= 0) {
160+
// Convert base64 to raw binary data held in a string:
161+
byteString = atob(dataURIParts[1]);
162+
} else {
163+
// Convert base64/URLEncoded data component to raw binary data:
164+
byteString = decodeURIComponent(dataURIParts[1]);
165+
}
166+
var arrayBuffer = new ArrayBuffer(byteString.length);
167+
var intArray = new Uint8Array(arrayBuffer);
168+
169+
for (var i = 0; i < byteString.length; i += 1) {
170+
intArray[i] = byteString.charCodeAt(i);
171+
}
172+
173+
var mimeString = dataURIParts[0].split(":")[1].split(";")[0];
174+
var blob = null;
175+
176+
if (hasBlobConstructor) {
177+
blob = new Blob(
178+
[hasArrayBufferViewSupport ? intArray : arrayBuffer], {
179+
type: mimeString
180+
}
181+
);
182+
} else {
183+
var bb = new BlobBuilder();
184+
bb.append(arrayBuffer);
185+
blob = bb.getBlob(mimeString);
186+
}
187+
188+
return blob;
189+
},
190+
},
191+
{
192+
key: "_loadImage",
193+
value: function _loadImage(image, file, callback) {
194+
if (typeof URL === "undefined") {
195+
var reader = new FileReader();
196+
reader.onload = function(evt) {
197+
image.src = evt.target.result;
198+
if (callback) {
199+
callback();
200+
}
201+
};
202+
reader.readAsDataURL(file);
203+
} else {
204+
image.src = URL.createObjectURL(file);
205+
if (callback) {
206+
callback();
207+
}
208+
}
209+
},
210+
},
211+
{
212+
key: "isSupported",
213+
value: function isSupported() {
214+
return (
215+
typeof HTMLCanvasElement !== "undefined" &&
216+
hasBlobSupport &&
217+
hasReaderSupport
218+
);
219+
},
220+
},
221+
]);
222+
223+
return ImageTools;
224+
})();
225+
226+
exports["default"] = ImageTools;
227+
module.exports = exports["default"];

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /