GeezerVison is showing github.com — JavaScript-Load-Image/load-image.js at master · Diullei/JavaScript-Load-Image

Expand file tree

load-image.js

Copy path

More file actions

Latest commit

History

228 lines (217 loc) · 7.64 KB

load-image.js

Copy path

File metadata and controls

228 lines (217 loc) · 7.64 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

* JavaScript Load Image 1.3.2

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

* https://blueimp.net

* iOS image scaling fixes based on

* https://github.com/stomita/ios-imagefile-megapixel

* Licensed under the MIT license:

* http://www.opensource.org/licenses/MIT

/*jslint nomen: true, bitwise: true */

/*global window, document, URL, webkitURL, Blob, File, FileReader, define */

(function ($) {

'use strict';

// Loads an image for a given File object.

// Invokes the callback with an img or optional canvas

// element (if supported by the browser) as parameter:

var loadImage = function (file, callback, options) {

var img = document.createElement('img'),

url,

oUrl;

img.onerror = callback;

img.onload = function () {

if (oUrl && !(options && options.noRevoke)) {

loadImage.revokeObjectURL(oUrl);

}

callback(loadImage.scale(img, options));

};

if ((window.Blob && file instanceof Blob) ||

// Files are also Blob instances, but some browsers

// (Firefox 3.6) support the File API but not Blobs:

(window.File && file instanceof File)) {

url = oUrl = loadImage.createObjectURL(file);

// Store the file type for resize processing:

img._type = file.type;

} else if (typeof file === 'string') {

url = file;

}

if (url) {

img.src = url;

return img;

}

return loadImage.readFile(file, function (e) {

var target = e.target;

if (target && target.result) {

img.src = target.result;

} else {

callback(e);

}

});

// The check for URL.revokeObjectURL fixes an issue with Opera 12,

// which provides URL.createObjectURL but doesn't properly implement it:

urlAPI = (window.createObjectURL && window) ||

(window.URL && URL.revokeObjectURL && URL) ||

(window.webkitURL && webkitURL);

// Detects subsampling in JPEG images:

loadImage.detectSubsampling = function (img) {

var iw = img.width,

ih = img.height,

canvas,

ctx;

if (iw * ih > 1024 * 1024) { // only consider mexapixel images

canvas = document.createElement('canvas');

canvas.width = canvas.height = 1;

ctx = canvas.getContext('2d');

ctx.drawImage(img, -iw + 1, 0);

// subsampled image becomes half smaller in rendering size.

// check alpha channel value to confirm image is covering edge pixel or not.

// if alpha value is 0 image is not covering, hence subsampled.

return ctx.getImageData(0, 0, 1, 1).data[3] === 0;

}

return false;

};

// Detects vertical squash in JPEG images:

loadImage.detectVerticalSquash = function (img, ih) {

var canvas = document.createElement('canvas'),

ctx = canvas.getContext('2d'),

data,

sy,

ey,

py,

alpha;

canvas.width = 1;

canvas.height = ih;

ctx.drawImage(img, 0, 0);

data = ctx.getImageData(0, 0, 1, ih).data;

// search image edge pixel position in case it is squashed vertically:

sy = 0;

ey = ih;

py = ih;

while (py > sy) {

alpha = data[(py - 1) * 4 + 3];

if (alpha === 0) {

ey = py;

} else {

sy = py;

}

py = (ey + sy) >> 1;

}

return (py / ih) || 1;

};

// Renders image to canvas while working around iOS image scaling bugs:

// https://github.com/blueimp/JavaScript-Load-Image/issues/13

loadImage.renderImageToCanvas = function (img, canvas, width, height) {

var iw = img.width,

ih = img.height,

ctx = canvas.getContext('2d'),

vertSquashRatio,

d = 1024, // size of tiling canvas

tmpCanvas = document.createElement('canvas'),

tmpCtx,

dw,

dh,

dx,

dy,

sx,

sy;

ctx.save();

if (loadImage.detectSubsampling(img)) {

iw /= 2;

ih /= 2;

}

vertSquashRatio = loadImage.detectVerticalSquash(img, ih);

tmpCanvas.width = tmpCanvas.height = d;

tmpCtx = tmpCanvas.getContext('2d');

dw = Math.ceil(d * width / iw);

dh = Math.ceil(d * height / ih / vertSquashRatio);

dy = 0;

sy = 0;

while (sy < ih) {

dx = 0;

sx = 0;

while (sx < iw) {

tmpCtx.clearRect(0, 0, d, d);

tmpCtx.drawImage(img, -sx, -sy);

ctx.drawImage(tmpCanvas, 0, 0, d, d, dx, dy, dw, dh);

sx += d;

dx += dw;

}

sy += d;

dy += dh;

}

ctx.restore();

tmpCanvas = tmpCtx = null;

};

// Scales the given image (img or canvas HTML element)

// using the given options.

// Returns a canvas object if the browser supports canvas

// and the canvas option is true or a canvas object is passed

// as image, else the scaled image:

loadImage.scale = function (img, options) {

options = options || {};

var canvas = document.createElement('canvas'),

width = img.width,

height = img.height,

scale = Math.max(

(options.minWidth || width) / width,

(options.minHeight || height) / height

);

if (scale > 1) {

width = Math.ceil(width * scale);

height = Math.ceil(height * scale);

}

scale = Math.min(

(options.maxWidth || width) / width,

(options.maxHeight || height) / height

);

if (scale < 1) {

width = Math.ceil(width * scale);

height = Math.ceil(height * scale);

}

if (img.getContext || (options.canvas && canvas.getContext)) {

canvas.width = width;

canvas.height = height;

if (img._type === 'image/jpeg') {

loadImage

.renderImageToCanvas(img, canvas, width, height);

} else {

canvas.getContext('2d')

.drawImage(img, 0, 0, width, height);

}

return canvas;

}

img.width = width;

img.height = height;

return img;

};

loadImage.createObjectURL = function (file) {

return urlAPI ? urlAPI.createObjectURL(file) : false;

};

loadImage.revokeObjectURL = function (url) {

return urlAPI ? urlAPI.revokeObjectURL(url) : false;

};

// Loads a given File object via FileReader interface,

// invokes the callback with the event object (load or error).

// The result can be read via event.target.result:

loadImage.readFile = function (file, callback) {

if (window.FileReader && FileReader.prototype.readAsDataURL) {

var fileReader = new FileReader();

fileReader.onload = fileReader.onerror = callback;

fileReader.readAsDataURL(file);

return fileReader;

}

return false;

};

if (typeof define === 'function' && define.amd) {

define(function () {

return loadImage;

});

} else {

$.loadImage = loadImage;

}

}(this));