How to use the blueimp-load-image/js/load-image function in blueimp-load-image
To help you get started, we’ve selected a few blueimp-load-image examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ledermann / docker-rails / app / javascript / controllers / upload_controller.js View on Github 
add(e, data) { // Upload begins
// Disable form submit
$(this).closest('form').find('input[type=submit]').attr('disabled', true)
// Display image while uploading
const file = data.files[0]
data.context = $(tmpl('template-upload', file))
$('#js-images').append(data.context)
loadImage(file, ((img) => {
data.context.find('img').replaceWith($(img).addClass('img-thumbnail square muted'))
}), {
maxWidth: 172,
maxHeight: 172
})
// Show progressbar
data.progressBar = data.context.find('.progress')
// Presign file
const options = {
extension: file.name.match(/(\.\w+)?$/)[0],
_: Date.now()
}
$.getJSON('/api/v1/presign', options, (result) => {
data.formData = result.fieldsfiles.map((file) => {
loadImage(file.preview, (image) => {
events.emit('imageLoaded', image)
}, options)
})
events.once('imageLoaded', (image) => {const blobToCanvas = (blob, callback, errorCallback, options) => {
const { maxWidth = 960, maxHeight = 960, orientation = true } = options || {}
return loadImage(blob, canvasOrEventError => {
if (canvasOrEventError.type === "error"){
errorCallback(canvasOrEventError)
}
else {
callback(canvasOrEventError)
}
}, { maxWidth, maxHeight, orientation })
}blueimp-load-image
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 a
