JavaScript-Load-Image/index.html at master · fisker/JavaScript-Load-Image · GitHub

History

157 lines (157 loc) · 5.73 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

<!DOCTYPE html>

<!--

* JavaScript Load Image Demo

* https://github.com/blueimp/JavaScript-Load-Image

* https://blueimp.net

* Licensed under the MIT license:

* https://opensource.org/licenses/MIT

-->

<head>

<!--[if IE]>

<![endif]-->

<title>JavaScript Load Image</title>

<meta

name="description"

content="JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled, cropped or rotated HTML img or canvas element. It also provides methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing."

<!--

Jcrop is not required by JavaScript Load Image, but included for the demo

-->

<!--[if lt IE 9]>

// Basic HTML5 elements support:

'figure figcaption'.replace(/\w+/g, function (n) {

document.createElement(n)

})

</script>

<![endif]-->

</head>

<body>

<h1>JavaScript Load Image Demo</h1>

<p>

<a href="https://github.com/blueimp/JavaScript-Load-Image"

>JavaScript Load Image</a

is a library to load images provided as

objects or via URL.<br />

It returns an optionally <strong>scaled</strong>,

<strong>cropped</strong> or <strong>rotated</strong> HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img"

>img</a

<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API"

>canvas</a

element.

</p>

<p>

It also provides methods to parse image metadata to extract

<a href="https://iptc.org/standards/photo-metadata/">IPTC</a> and

<a href="https://en.wikipedia.org/wiki/Exif">Exif</a> tags as well as

embedded thumbnail images, to overwrite the Exif Orientation value and to

restore the complete image header after resizing.

</p>

<li>

<a href="https://github.com/blueimp/JavaScript-Load-Image/releases"

>Download</a

</li>

<li>

<a href="https://github.com/blueimp/JavaScript-Load-Image"

>Source Code</a

</li>

<li>

href="https://github.com/blueimp/JavaScript-Load-Image/blob/master/README.md"

>Documentation</a

</li>

<li><a href="https://blueimp.net">© Sebastian Tschan</a></li>

</ul>

<h2>Select an image file</h2>

<p>

</p>

<p>

<label for="url">Or enter an image URL into the following field:</label>

</p>

<p>Or <strong>drag & drop</strong> an image file onto this webpage.</p>

<h3>Options</h3>

<p>

<label for="orientation">Orientation:</label>

<option value="-1">undefined: Browser default</option>

<option value="0" selected>true: Automatic</option>

<option value="1">1: Original</option>

<option value="2">2: Horizontal flip</option>

<option value="3">3: Rotate 180° CCW</option>

<option value="4">4: Vertical flip</option>

<option value="5">5: Vertical flip + Rotate 90° CW</option>

<option value="6">6: Rotate 90° CW</option>

<option value="7">7: Horizontal flip + Rotate 90° CW</option>

<option value="8">8: Rotate 90° CCW</option>

</select>

</p>

<p>

<label for="image-smoothing">Image smoothing</label>

</p>

<h2>Result</h2>

<button type="reset" id="cancel">Cancel</button>

</p>

Loading images from File objects requires support for the

<a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader"

>FileReader</a

API.

</figcaption>

</figure>

<h3>Image metadata</h3>

</div>

<!--

jQuery and Jcrop are not required by JavaScript Load Image,

but included for the demo

-->

</body>

</html>

JavaScript-Load-Image/index.html at master · fisker/JavaScript-Load-Image · GitHub

Expand file tree

Breadcrumbs

index.html

Latest commit

History

Breadcrumbs

index.html

File metadata and controls