b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
1977 lines
64 KiB
JavaScript
Executable file
1977 lines
64 KiB
JavaScript
Executable file
// This file contains Gallery code for editing images
|
|
//
|
|
'use strict';
|
|
/* global
|
|
$,
|
|
CONFIG_MAX_EDIT_PIXEL_SIZE,
|
|
CONFIG_MAX_IMAGE_PIXEL_SIZE,
|
|
cropResizeRotate,
|
|
currentFileIndex,
|
|
Downsample,
|
|
editedPhotoIndex:true,
|
|
GestureDetector,
|
|
ImageData,
|
|
ImageProcessorThread,
|
|
files,
|
|
justSavedEditedImage:true,
|
|
KeyEvent,
|
|
LAYOUT_MODE,
|
|
photodb,
|
|
setView,
|
|
showFile,
|
|
Spinner,
|
|
LazyLoader,
|
|
JPEGParser
|
|
*/
|
|
/* exported
|
|
editPhotoIfCardNotFull
|
|
*/
|
|
|
|
var editedPhotoURL; // The blob URL of the photo we're currently editing
|
|
var editSettings; // Settings object to perform edits and initialize the UI
|
|
var imageEditor;
|
|
var currentEditTool;
|
|
var savedEditSettings; // Object to save editSettings before entering edit tool
|
|
|
|
var editOptionButtons =
|
|
Array.slice($('edit-options').querySelectorAll('a.radio.button'), 0);
|
|
|
|
var editBgImageButtons =
|
|
Array.slice($('edit-options').querySelectorAll('a.bgimage.button'), 0);
|
|
|
|
var editAspectMoreButtons =
|
|
Array.slice($('aspect-ratio-options-view').querySelectorAll('button'), 0);
|
|
|
|
// Edit mode event handlers
|
|
$('edit-exposure-button').onclick = setEditTool.bind(null, 'exposure');
|
|
$('edit-crop-button').onclick = setEditTool.bind(null, 'crop');
|
|
$('edit-effect-button').onclick = setEditTool.bind(null, 'effect');
|
|
$('edit-enhance-button').onclick = setEditTool.bind(null, 'enhance');
|
|
$('edit-header').addEventListener('action', onCancelButton);
|
|
$('edit-tool-apply-button').onclick = applyEditTool;
|
|
$('edit-save-button').onclick = saveEditedImage;
|
|
|
|
editOptionButtons.forEach(function(b) { b.onclick = editOptionsHandler; });
|
|
editAspectMoreButtons.forEach(function(b) {b.onclick = editAspectMoreHandler;});
|
|
|
|
/*
|
|
* These arrays represent matricies for image processing effects. They
|
|
* are passed to the ImageProcessor.setMatrix() method to specify color
|
|
* transformations of an image. The property names in this object are
|
|
* linked to the Gallery editor UX: if they are changed here, they also
|
|
* must be changed in the HTML.
|
|
*/
|
|
var Effects = {
|
|
none: null,
|
|
bw: [
|
|
0.65, 0.25, 0.10, 0,
|
|
0.65, 0.25, 0.10, 0,
|
|
0.65, 0.25, 0.10, 0
|
|
],
|
|
sepia: [
|
|
0.393, 0.769, 0.189, 0,
|
|
0.349, 0.686, 0.168, 0,
|
|
0.272, 0.534, 0.131, 0
|
|
],
|
|
bluesteel: [
|
|
1, 0.25, 0.65, 0,
|
|
0.1, 1, 0.65, 0,
|
|
0.1, 0.25, 1, 0.1
|
|
],
|
|
faded: [
|
|
1, 0.2, 0.2, 0.03,
|
|
0.2, 0.7, 0.2, 0.05,
|
|
0.1, 0, 0.8, 0
|
|
]
|
|
};
|
|
|
|
// Ensure there is enough space to store an edited copy of photo n
|
|
// and if there is, call editPhoto to do so
|
|
function editPhotoIfCardNotFull(n) {
|
|
var fileinfo = files[n];
|
|
var imagesize = fileinfo.size;
|
|
photodb.freeSpace(function(freespace) {
|
|
// the edited image might take up more space on the disk, but
|
|
// not all that much more
|
|
if (freespace > imagesize * 2) {
|
|
editPhoto(n);
|
|
}
|
|
else {
|
|
document.l10n.formatValue('memorycardfull').then(alert);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
/*
|
|
* This is the exposure slider component for edit tool. This ought to be
|
|
* converted into a reusable slider module, but for now this is a
|
|
* custom version that hardcodes things like the -3 to +3 range of values.
|
|
*/
|
|
var exposureSlider = (function() {
|
|
var slider = document.getElementById('exposure-slider');
|
|
var bar = document.getElementById('sliderline');
|
|
var thumb = document.getElementById('sliderthumb');
|
|
var currentExposure = 0;
|
|
var dragStart = null;
|
|
// prepare gesture detector for slider
|
|
var gestureDetector = new GestureDetector(thumb);
|
|
gestureDetector.startDetecting();
|
|
|
|
thumb.addEventListener('pan', function(e) {
|
|
// Handle delta so that slider moves correct way
|
|
// when user drags it for RTL locales
|
|
var delta = document.documentElement.dir === 'ltr' ?
|
|
e.detail.absolute.dx : - e.detail.absolute.dx;
|
|
|
|
var exposureDelta = delta / parseInt(bar.clientWidth, 10) * 6;
|
|
// For the firt time of pan event triggered
|
|
// set start value to current value.
|
|
if (!dragStart) {
|
|
dragStart = currentExposure;
|
|
}
|
|
|
|
setExposure(dragStart + exposureDelta);
|
|
e.preventDefault();
|
|
});
|
|
thumb.addEventListener('swipe', function(e) {
|
|
// when stopping we init the dragStart to be null
|
|
// this way we avoid a 'panstart' event
|
|
dragStart = null;
|
|
e.preventDefault();
|
|
});
|
|
thumb.addEventListener('touchstart', function(e) {
|
|
thumb.classList.add('active');
|
|
});
|
|
thumb.addEventListener('touchend', function(e) {
|
|
thumb.classList.remove('active');
|
|
});
|
|
slider.addEventListener('keypress', function(e) {
|
|
// screen reader sends key arrow up/down events for adjusting the slider.
|
|
if (e.keyCode == KeyEvent.DOM_VK_DOWN) {
|
|
setExposure(currentExposure - 0.25);
|
|
} else if (e.keyCode == KeyEvent.DOM_VK_UP) {
|
|
setExposure(currentExposure + 0.25);
|
|
}
|
|
});
|
|
|
|
function resize() {
|
|
forceSetExposure(currentExposure);
|
|
}
|
|
|
|
// Set the thumb position between -3 and +3
|
|
function setExposure(exposure) {
|
|
// Make sure it is not out of bounds
|
|
if (exposure < -3) {
|
|
exposure = -3;
|
|
} else if (exposure > 3) {
|
|
exposure = 3;
|
|
}
|
|
|
|
// Round to the closest sixteenth
|
|
exposure = Math.round(exposure * 16) / 16;
|
|
|
|
if (exposure === currentExposure) {
|
|
return;
|
|
}
|
|
|
|
forceSetExposure(exposure);
|
|
}
|
|
|
|
function forceSetExposure(exposure) {
|
|
// Remove left/right 4 pixels of margin
|
|
var barWidth = parseInt(bar.clientWidth, 10) - 4 * 2;
|
|
var thumbWidth = parseInt(thumb.clientWidth, 10);
|
|
var offset = bar.offsetLeft + 4;
|
|
|
|
// Convert exposure value to a unit coefficient position of thumb center
|
|
var unitCoef = (exposure + 3) / 6;
|
|
|
|
// Convert unitCoef to pixel position of thumb center
|
|
var pixel = offset + barWidth * unitCoef;
|
|
|
|
// Compute pixel position of left edge of thumb
|
|
pixel -= thumbWidth / 2;
|
|
|
|
// Move the thumb to that position
|
|
thumb.style.MozMarginStart = pixel + 'px';
|
|
|
|
// Display exposure value in thumb
|
|
thumb.textContent = exposure;
|
|
|
|
// Don't need to update the currentExposure and dispatch the event if they
|
|
// are the same.
|
|
if (currentExposure === exposure) {
|
|
return;
|
|
}
|
|
// Remember the new exposure value
|
|
currentExposure = exposure;
|
|
|
|
// Set value for ARIA widget
|
|
slider.setAttribute('aria-valuenow', exposure);
|
|
|
|
// Dispatch an event to actually change the image
|
|
slider.dispatchEvent(new Event('change', {bubbles: true}));
|
|
}
|
|
|
|
return {
|
|
resize: resize,
|
|
forceSetExposure: forceSetExposure,
|
|
setExposure: setExposure,
|
|
getExposure: function() { return currentExposure; }
|
|
};
|
|
})();
|
|
|
|
function resizeHandler() {
|
|
exposureSlider.resize();
|
|
imageEditor.resize();
|
|
}
|
|
|
|
function localizeHandler() {
|
|
// If the locale changes while user is using exposure edit option,
|
|
// then we need to re-position slider thumb for respective locale.
|
|
exposureSlider.forceSetExposure(exposureSlider.getExposure());
|
|
}
|
|
|
|
// Handle changes on the slider and turn them into calls to edit the image
|
|
(function() {
|
|
var requestId = null;
|
|
|
|
$('exposure-slider').onchange = function() {
|
|
if (!imageEditor) { // If it has not been created yet
|
|
return;
|
|
}
|
|
|
|
// If there is already a pending request, it will take care of this change
|
|
// and we don't have to request a new one.
|
|
if (requestId !== null) {
|
|
return;
|
|
}
|
|
|
|
requestId = requestAnimationFrame(function() {
|
|
requestId = null;
|
|
var stops = exposureSlider.getExposure();
|
|
|
|
// Convert the exposure compensation stops gamma correction value.
|
|
var factor = -1; // Adjust this factor to get something reasonable.
|
|
var gamma = Math.pow(2, stops * factor);
|
|
editSettings.exposure.gamma = gamma;
|
|
editSettings.exposure.sliderThumbPos = stops;
|
|
enableSaveAndApplyButtons();
|
|
imageEditor.edit();
|
|
});
|
|
};
|
|
}());
|
|
|
|
function editPhoto(n) {
|
|
editedPhotoIndex = n;
|
|
var metadata = files[n].metadata;
|
|
|
|
editSettings = {
|
|
crop: {
|
|
x: 0, y: 0, w: metadata.width, h: metadata.height,
|
|
cropModeId: 'edit-crop-aspect-free' // selected crop mode element Id
|
|
},
|
|
exposure: {
|
|
sliderThumbPos: 0, // Slider thumb position
|
|
gamma: 1
|
|
},
|
|
effect: {
|
|
effectId: 'edit-effect-none', // selected effect mode element id
|
|
matrix: null
|
|
},
|
|
enhance: {
|
|
autoLevels: null
|
|
},
|
|
isImageEdited: false // flag to store if first edit has occurred
|
|
};
|
|
|
|
// Start looking up the image file
|
|
photodb.getFile(files[n].name, gotFile);
|
|
|
|
function gotFile(file) {
|
|
// The image editor does not handle EXIF rotation, so if the image has
|
|
// EXIF orientation flags, we alter the image in place before starting
|
|
// to edit it. Similarly, if the image is too big for us to decode at
|
|
// full size we need to create a downsampled version that is editable.
|
|
// For low-memory devices like Tarako, CONFIG_MAX_EDIT_PIXEL_SIZE will
|
|
// be set to a non-zero value, and this may cause us to downsample the
|
|
// image even further than we would otherwise.
|
|
var imagesize = metadata.width * metadata.height;
|
|
var maxsize = CONFIG_MAX_EDIT_PIXEL_SIZE || CONFIG_MAX_IMAGE_PIXEL_SIZE;
|
|
|
|
if (file.type === 'image/jpeg') {
|
|
LazyLoader.load(['shared/js/media/jpeg-exif.js'], () => {
|
|
JPEGParser.readExifMetaData(file, (error, metaData) => {
|
|
editSettings.EXIF = metaData || {};
|
|
});
|
|
});
|
|
}
|
|
|
|
if (metadata.rotation || metadata.mirrored || imagesize > maxsize) {
|
|
Spinner.show();
|
|
cropResizeRotate(file, null, maxsize || null,
|
|
null, metadata,
|
|
function(error, rotatedBlob) {
|
|
Spinner.hide();
|
|
if (error) {
|
|
console.error('Error while rotating image:', error);
|
|
rotatedBlob = file;
|
|
}
|
|
startEdit(rotatedBlob);
|
|
});
|
|
}
|
|
else {
|
|
startEdit(file);
|
|
}
|
|
}
|
|
|
|
// This will be called with the file the user is editing or with a rotated
|
|
// version of that file
|
|
function startEdit(blob) {
|
|
// Create the image editor object
|
|
// This has to come after setView or the canvas size is wrong.
|
|
imageEditor = new ImageEditor(blob,
|
|
$('edit-preview-area'),
|
|
editSettings);
|
|
|
|
// Show editor screen and hide edit tool screen
|
|
hideEditToolView();
|
|
currentEditTool = null;
|
|
|
|
// Set auto enhance icon to default off state
|
|
var editEnhanceButton = $('edit-enhance-button');
|
|
editEnhanceButton.setAttribute('aria-pressed', false);
|
|
editEnhanceButton.classList.remove('on');
|
|
// Set edit screen header title
|
|
$('edit-title').setAttribute('data-l10n-id', 'edit');
|
|
// Disable save and edit tool apply button until an edit is applied
|
|
$('edit-save-button').disabled = true;
|
|
$('edit-tool-apply-button').disabled = true;
|
|
|
|
window.addEventListener('resize', resizeHandler);
|
|
window.addEventListener('localized', localizeHandler);
|
|
|
|
// Set the background for all of the image buttons
|
|
editedPhotoURL = URL.createObjectURL(blob);
|
|
|
|
// Use #-moz-samplesize media fragment to downsample images
|
|
// so the resulting images are smaller and fits 5 image buttons
|
|
// Here we assume image buttons are 50px high
|
|
var scale = window.innerWidth / 5 * window.devicePixelRatio *
|
|
window.devicePixelRatio * 50 /
|
|
(metadata.width * metadata.height);
|
|
var sampleSize = Downsample.areaNoMoreThan(scale);
|
|
|
|
var backgroundImage = 'url(' + editedPhotoURL + sampleSize + ')';
|
|
editBgImageButtons.forEach(function(b) {
|
|
b.style.backgroundImage = backgroundImage;
|
|
});
|
|
}
|
|
|
|
// Display the edit screen
|
|
setView(LAYOUT_MODE.edit);
|
|
|
|
// Set the default option buttons to correspond to those edits
|
|
editOptionButtons.forEach(function(b) { selectEditOption(b, false); });
|
|
selectEditOption($('edit-crop-aspect-free'), true);
|
|
selectEditOption($('edit-effect-none'), true);
|
|
}
|
|
|
|
function selectEditOption(radio, selected) {
|
|
radio.classList.toggle('selected', selected);
|
|
radio.setAttribute('aria-checked', selected);
|
|
}
|
|
|
|
// Stores last selected aspect ratio in crop options. This variable
|
|
// is used to handle cancel in aspect more options view.
|
|
var editCropSelectedAspectRatio;
|
|
|
|
// Crop and Effect buttons call this
|
|
function editOptionsHandler() {
|
|
/* jshint validthis: true */
|
|
// First, unhighlight all buttons in this group and then
|
|
// highlight the button that has just been chosen. These
|
|
// buttons have radio behavior
|
|
var parent = this.parentNode;
|
|
var buttons = parent.querySelectorAll('a.radio.button');
|
|
Array.forEach(buttons, function(b) { selectEditOption(b, false); });
|
|
selectEditOption(this, true);
|
|
|
|
// Set selected effect or cropMode elementId in editSettings object
|
|
// to initialize UI on re-enter of an editMode
|
|
if (this.dataset.effect) {
|
|
editSettings.effect.effectId =
|
|
$('edit-effect-options').getElementsByClassName('selected')[0].id;
|
|
} else {
|
|
editCropSelectedAspectRatio = editSettings.crop.cropModeId;
|
|
editSettings.crop.cropModeId =
|
|
$('edit-crop-options').getElementsByClassName('selected')[0].id;
|
|
}
|
|
|
|
if (this === $('edit-crop-aspect-free')) {
|
|
imageEditor.setCropAspectRatio();
|
|
} else if (this === $('edit-crop-aspect-portrait')) {
|
|
imageEditor.setCropAspectRatio(2, 3);
|
|
} else if (this === $('edit-crop-aspect-landscape')) {
|
|
imageEditor.setCropAspectRatio(3, 2);
|
|
} else if (this === $('edit-crop-aspect-square')) {
|
|
imageEditor.setCropAspectRatio(1, 1);
|
|
} else if (this === $('edit-crop-aspect-more')) {
|
|
$('aspect-ratio-options-view').show();
|
|
}
|
|
else if (this.dataset.effect) {
|
|
editSettings.effect.matrix = Effects[this.dataset.effect];
|
|
imageEditor.edit();
|
|
}
|
|
enableSaveAndApplyButtons();
|
|
}
|
|
|
|
function editAspectMoreHandler() {
|
|
/* jshint validthis: true */
|
|
if (this === $('edit-crop-aspect-3x4')) {
|
|
imageEditor.setCropAspectRatio(3, 4);
|
|
} else if (this === $('edit-crop-aspect-4x3')) {
|
|
imageEditor.setCropAspectRatio(4, 3);
|
|
} else if (this === $('edit-crop-aspect-16x9')) {
|
|
imageEditor.setCropAspectRatio(16, 9);
|
|
} else if (this === $('aspect-ratio-options-cancel')) {
|
|
// On cancel in aspect more options view, update selected crop mode id
|
|
// in editSettings object and highlight previous selected option node.
|
|
selectEditOption($('edit-crop-aspect-more'), false);
|
|
selectEditOption($(editCropSelectedAspectRatio), true);
|
|
editSettings.crop.cropModeId = editCropSelectedAspectRatio;
|
|
}
|
|
enableSaveAndApplyButtons();
|
|
$('aspect-ratio-options-view').hide();
|
|
}
|
|
|
|
// Set editTool to respective edit modes on click
|
|
// of crop, exposure, effect, enhance.
|
|
function setEditTool(editTool) {
|
|
// Hide all options
|
|
var options = $('edit-options').querySelectorAll('div.edit-options-bar');
|
|
Array.forEach(options, function(o) { o.classList.add('hidden'); });
|
|
|
|
// Hide auto enhance message banner before entering
|
|
// an edit tool or cancel of edit screens.
|
|
$('edit-enhance-banner').hidden = true;
|
|
|
|
// Make a copy of editSettings when you enter edit tool
|
|
savedEditSettings = clone(editSettings);
|
|
|
|
// Now select and show the correct UI based on editTool
|
|
switch (editTool) {
|
|
case 'exposure':
|
|
// Show exposure EditTool and hide main edit screen
|
|
showEditToolView();
|
|
$('exposure-slider').classList.remove('hidden');
|
|
$('edit-title').setAttribute('data-l10n-id', 'exposure');
|
|
// Set exposure slider thumb position
|
|
exposureSlider.forceSetExposure(editSettings.exposure.sliderThumbPos);
|
|
break;
|
|
case 'crop':
|
|
showEditToolView();
|
|
$('edit-crop-options').classList.remove('hidden');
|
|
$('edit-title').setAttribute('data-l10n-id', 'crop');
|
|
// Initialize the source rectangle to full size of the original image
|
|
imageEditor.resetCropRegion();
|
|
imageEditor.resetPreview();
|
|
// Show screen with crop overlay on entering crop edit tool
|
|
imageEditor.edit(function() {
|
|
// Use saved crop region in editSettings to show crop overlay
|
|
imageEditor.showCropOverlay(
|
|
imageEditor.getCropOverlayRegion(savedEditSettings.crop));
|
|
});
|
|
break;
|
|
case 'effect':
|
|
showEditToolView();
|
|
$('edit-effect-options').classList.remove('hidden');
|
|
$('edit-title').setAttribute('data-l10n-id', 'filters');
|
|
break;
|
|
case 'enhance':
|
|
imageEditor.autoEnhancement(setAutoEnhanceState);
|
|
enableSaveAndApplyButtons();
|
|
break;
|
|
}
|
|
// Remember the new edit mode
|
|
currentEditTool = editTool;
|
|
}
|
|
|
|
function cancelEditTool() {
|
|
// Do any necessary cleanup of the currentEditTool view we're exiting.
|
|
switch (currentEditTool) {
|
|
case 'exposure':
|
|
// On cancel in exposure EditTool restore exposure state
|
|
// inside editsettings object.
|
|
editSettings.exposure = savedEditSettings.exposure;
|
|
break;
|
|
case 'crop':
|
|
// On cancel in Crop Edit Tool, restore crop state in editSettings object
|
|
// and revert selected option node.
|
|
selectEditOption($(editSettings.crop.cropModeId), false);
|
|
selectEditOption($(savedEditSettings.crop.cropModeId), true);
|
|
|
|
editSettings.crop = savedEditSettings.crop;
|
|
// Set source rectangle size from saved editSettings
|
|
// to go back to previous cropped size preview.
|
|
imageEditor.forceSetCropRegion();
|
|
// Discard changes and revert to previous crop sizes
|
|
imageEditor.resetPreview();
|
|
break;
|
|
case 'effect':
|
|
// On cancel in Effect Edit Tool, restore effect state
|
|
// in editSettings object and revert selected option node.
|
|
selectEditOption($(editSettings.effect.effectId), false);
|
|
selectEditOption($(savedEditSettings.effect.effectId), true);
|
|
editSettings.effect = savedEditSettings.effect;
|
|
break;
|
|
}
|
|
// Revert to main edit screen on edit tool cancel
|
|
// Update preview image with editSettings object
|
|
imageEditor.edit(function() {
|
|
imageEditor.hideCropOverlay();
|
|
});
|
|
$('edit-title').setAttribute('data-l10n-id', 'edit');
|
|
// Hide Edit Tool and show main edit screen
|
|
hideEditToolView();
|
|
currentEditTool = null;
|
|
}
|
|
|
|
// Apply changes made in crop edit tool and go back to edit screen
|
|
// Other edit tools - exposure, effects, enhance apply their edits
|
|
// as the user interacts with the buttons or slider
|
|
function applyEditTool() {
|
|
switch (currentEditTool) {
|
|
case 'crop':
|
|
imageEditor.cropImage(function() {
|
|
imageEditor.hideCropOverlay();
|
|
});
|
|
break;
|
|
}
|
|
$('edit-title').setAttribute('data-l10n-id', 'edit');
|
|
// Hide Edit tool screen
|
|
hideEditToolView();
|
|
// Reset current edit tool and editSettings saved state to null
|
|
currentEditTool = null;
|
|
savedEditSettings = null;
|
|
}
|
|
|
|
function onCancelButton() {
|
|
// Check for currentEditTool to find if user is cancelling out from
|
|
// edit tool screen - crop, effect, exposure or main edit screen
|
|
if (currentEditTool === null || currentEditTool === 'enhance') {
|
|
currentEditTool = null;
|
|
// Exit main edit screen withot saving edited image
|
|
exitEdit(false);
|
|
} else {
|
|
// Cancel edit tool and go back to main edit screen
|
|
cancelEditTool();
|
|
}
|
|
}
|
|
|
|
function enableSaveAndApplyButtons() {
|
|
// Enable Apply and Save buttons if it's first edit and isImageEdited
|
|
// is false. For subesquent edits apply and save button stays enabled.
|
|
if (!editSettings || editSettings.isImageEdited) {
|
|
return;
|
|
}
|
|
if (imageEditor.hasBeenCropped() ||
|
|
editSettings.effect.matrix !== null ||
|
|
editSettings.enhance.autoLevels !== null ||
|
|
editSettings.exposure.gamma !== 1) {
|
|
editSettings.isImageEdited = true;
|
|
$('edit-tool-apply-button').disabled = false;
|
|
$('edit-save-button').disabled = false;
|
|
}
|
|
}
|
|
|
|
// Create deep copy of an object
|
|
function clone(obj) {
|
|
return JSON.parse(JSON.stringify(obj));
|
|
}
|
|
|
|
// Toggle the auto enhancement on/off.
|
|
function setAutoEnhanceState(isEnhanced) {
|
|
var statusLabel = $('edit-enhance-status');
|
|
var enhanceButton = $('edit-enhance-button');
|
|
var banner = $('edit-enhance-banner');
|
|
enhanceButton.setAttribute('aria-pressed', isEnhanced);
|
|
if (isEnhanced) {
|
|
showStatus('enhance-on');
|
|
enhanceButton.classList.add('on');
|
|
} else {
|
|
showStatus('enhance-off');
|
|
enhanceButton.classList.remove('on');
|
|
}
|
|
|
|
function showStatus(msgId) {
|
|
document.l10n.setAttributes(statusLabel, msgId);
|
|
banner.hidden = false;
|
|
setTimeout(function() {
|
|
banner.hidden = true;
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
// Handle show and hide of edit tool screen
|
|
function showEditToolView() {
|
|
// Hide Editor toolbar and save button
|
|
$('edit-toolbar').classList.add('hidden');
|
|
$('edit-save-button').hidden = true;
|
|
|
|
// Show Edit Tool options and apply button
|
|
$('edit-options').classList.remove('hidden');
|
|
$('edit-tool-apply-button').hidden = false;
|
|
}
|
|
|
|
function hideEditToolView() {
|
|
// Show Editor toolbar and save button
|
|
$('edit-toolbar').classList.remove('hidden');
|
|
$('edit-save-button').hidden = false;
|
|
|
|
// Hide Edit Tool options and apply button
|
|
$('edit-options').classList.add('hidden');
|
|
$('edit-tool-apply-button').hidden = true;
|
|
}
|
|
|
|
function exitEdit(saved) {
|
|
// Revoke the blob URL we've been using
|
|
URL.revokeObjectURL(editedPhotoURL);
|
|
editedPhotoURL = null;
|
|
|
|
// Check for imageEditor and close the editor object
|
|
if (imageEditor) {
|
|
imageEditor.destroy();
|
|
imageEditor = null;
|
|
}
|
|
savedEditSettings = null;
|
|
editSettings = null;
|
|
|
|
window.removeEventListener('resize', resizeHandler);
|
|
window.removeEventListener('localized', localizeHandler);
|
|
|
|
// we want the slider re-zeroed for the next time we come into the editor
|
|
exposureSlider.forceSetExposure(0.0);
|
|
|
|
// If exitEdit is called without saved argument e.g. when device storage
|
|
// is unavailable, exit now and do not check for saved.
|
|
if (saved === undefined) {
|
|
return;
|
|
}
|
|
|
|
// We came in to edit mode from fullscreenView. If the user cancels the edit
|
|
// go back to fullscreenView to original image. Otherwise, if the user saves
|
|
// the photo, we should go back to fullscreenView to view the edited photo.
|
|
if (saved) {
|
|
// After we sucessfully save a picture, we need to make sure that the
|
|
// current file will point to it. We need a flag for fileCreated(),
|
|
// so that the currentFileIndex will stay at 0 which is the newest one.
|
|
justSavedEditedImage = true;
|
|
// After insert sucessfully, db will call file created and setFile to
|
|
// latest file, then we go to fullscreen mode to see the edited picture.
|
|
setView(LAYOUT_MODE.fullscreen);
|
|
} else {
|
|
setView(LAYOUT_MODE.fullscreen);
|
|
showFile(currentFileIndex);
|
|
}
|
|
}
|
|
|
|
// When the user clicks the save button, we produce a full-size version
|
|
// of the edited image, save it into the media database and return to
|
|
// photo view mode.
|
|
// XXX: figure out what the image number of the edited photo is or will be
|
|
// and return to viewing that one. Ideally, edited photos would be grouped
|
|
// with the original, rather than by date, but I'm not sure I can
|
|
// do that sort order. Ideally, I'd like the mediadb to not generate a
|
|
// change event when we manually add something to it or at least have that
|
|
// option
|
|
function saveEditedImage() {
|
|
// Save button disabled to prevent the user triggering multiple
|
|
// save operations
|
|
$('edit-save-button').disabled = true;
|
|
|
|
// Check for imageEditor before continuing with save
|
|
if (!imageEditor) {
|
|
return;
|
|
}
|
|
|
|
var progressBar = $('save-progress');
|
|
// Show progressbar when start to save.
|
|
progressBar.classList.remove('hidden');
|
|
progressBar.value = 0;
|
|
progressBar.max = 100;
|
|
|
|
imageEditor.getFullSizeBlob('image/jpeg', gotBlob, onProgress);
|
|
|
|
function onProgress(p, error) {
|
|
// If error occurs, reset the save button for user.
|
|
if (error) {
|
|
$('edit-save-button').disabled = false;
|
|
progressBar.value = 0;
|
|
return;
|
|
}
|
|
|
|
progressBar.value = Math.floor(p * 100);
|
|
}
|
|
|
|
function gotBlob(blob) {
|
|
// Hide progressbar when saved.
|
|
progressBar.classList.add('hidden');
|
|
var original = files[editedPhotoIndex].name;
|
|
var basename, extension, filename;
|
|
var version = 1;
|
|
var p = original.lastIndexOf('.');
|
|
if (p === -1) {
|
|
basename = original;
|
|
extension = '';
|
|
}
|
|
else {
|
|
basename = original.substring(0, p);
|
|
extension = original.substring(p);
|
|
}
|
|
|
|
// Create a filename for the edited image. Loop if necessary and
|
|
// increment the version number until we find a version a name that
|
|
// is not in use.
|
|
// XXX: this loop is O(n^2) and slow if the user saves many edits
|
|
// of the same image.
|
|
filename = basename + '.edit' + version + extension;
|
|
/* jshint loopfunc: true */
|
|
while (files.some(function(i) { return i.name === filename; })) {
|
|
version++;
|
|
filename = basename + '.edit' + version + extension;
|
|
}
|
|
|
|
// Now that we have a filename, save the file This will send a
|
|
// change event, which will cause us to rebuild our thumbnails.
|
|
// For now, the edited image will become the first thumbnail since
|
|
// it si the most recent one. Ideally, I'd like a more
|
|
// sophisticated sort order that put edited sets of photos next to
|
|
// each other.
|
|
photodb.addFile(filename, blob);
|
|
|
|
// We're done.
|
|
exitEdit(true);
|
|
progressBar.value = 0;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* ImageEditor.js: simple image editing and previews in a <canvas> element.
|
|
*
|
|
* Display an edited version of the specified image in a <canvas> element
|
|
* inside the specified container element. The image (or cropped region of
|
|
* the image) will be displayed as large as possible within the container's
|
|
* area. Edits is an object that specifies the edits to apply to the image.
|
|
* The edits object may include these properties:
|
|
*
|
|
* gamma: a float specifying gamma correction
|
|
* matrix: a 3x4 matrix that represents a transformation of each rgba pixel.
|
|
* this can be used to convert to bw or sepia, for example.
|
|
*
|
|
* In addition to previewing the image, this class also defines a
|
|
* getFullSizeBlob() function that creates a full-size version of the
|
|
* edited image.
|
|
*
|
|
* This class also handles cropping. See:
|
|
*
|
|
* showCropOverlay()
|
|
* hideCropOverlay()
|
|
* cropImage()
|
|
* undoCrop()
|
|
*
|
|
* The stylesheet includes static styles to position those dyanamic elements.
|
|
*/
|
|
function ImageEditor(imageBlob, container, edits, ready, croponly) {
|
|
this.imageBlob = imageBlob;
|
|
this.imageURL = URL.createObjectURL(imageBlob);
|
|
this.container = container;
|
|
this.edits = edits || {};
|
|
this.croponly = !!croponly;
|
|
|
|
// The source rectangle (crop region) of the image. Image pixels.
|
|
this.source = {};
|
|
// The destination (preview) rectangle of canvas. Device pixels.
|
|
this.dest = {};
|
|
// Region displayed in crop overlay during drags. CSS pixels.
|
|
this.cropOverlayRegion = {};
|
|
|
|
// The canvas that displays the preview
|
|
this.previewCanvas = document.createElement('canvas');
|
|
this.previewCanvas.id = 'edit-preview-canvas'; // for stylesheet
|
|
this.previewCanvas.setAttribute('data-l10n-id', 'editImagePreview');
|
|
this.previewCanvas.setAttribute('role', 'img');
|
|
this.container.appendChild(this.previewCanvas);
|
|
|
|
// Make sure the canvas is size for device pixels, not css pixels
|
|
var dpr = window.devicePixelRatio;
|
|
this.previewCanvas.width = Math.ceil(this.previewCanvas.clientWidth * dpr);
|
|
this.previewCanvas.height = Math.ceil(this.previewCanvas.clientHeight * dpr);
|
|
|
|
// The raw pixels that we edit and then display in the preview canvas
|
|
this.previewImageData = null;
|
|
|
|
// Auto enhancement parameters generated from the preview image data
|
|
this.autoLevels = null;
|
|
|
|
// prepare gesture detector for ImageEditor
|
|
this.gestureDetector = new GestureDetector(container, { panThreshold: 3 });
|
|
this.gestureDetector.startDetecting();
|
|
|
|
// preset the scale to something useful in case resize() gets called
|
|
// before generateNewPreview()
|
|
this.scale = 1.0;
|
|
|
|
var self = this;
|
|
if (this.croponly) {
|
|
this.original = null;
|
|
this.preview = new Image();
|
|
this.preview.src = this.imageURL;
|
|
this.preview.onload = function() {
|
|
self.displayCropOnlyPreview();
|
|
if (ready) {
|
|
ready();
|
|
}
|
|
};
|
|
}
|
|
else {
|
|
// Start loading the image into a full-size offscreen image
|
|
this.original = new Image();
|
|
this.original.src = this.imageURL;
|
|
|
|
// When the image loads display it
|
|
this.original.onload = function() {
|
|
// Initialize the crop region to the full size of the original image
|
|
self.resetCropRegion();
|
|
self.resetPreview();
|
|
|
|
// Display an edited preview of it
|
|
self.edit(function() {
|
|
// If the constructor had a ready callback argument, call it now
|
|
if (ready) {
|
|
ready();
|
|
}
|
|
});
|
|
};
|
|
}
|
|
}
|
|
|
|
ImageEditor.prototype.displayCropOnlyPreview = function() {
|
|
var previewContext = this.previewCanvas.getContext('2d');
|
|
|
|
var scalex = this.previewCanvas.width / this.preview.width;
|
|
var scaley = this.previewCanvas.height / this.preview.height;
|
|
var scale = Math.min(Math.min(scalex, scaley), 1);
|
|
|
|
var previewWidth = Math.floor(this.preview.width * scale);
|
|
var previewHeight = Math.floor(this.preview.height * scale);
|
|
var previewX = Math.floor((this.previewCanvas.width - previewWidth) / 2);
|
|
var previewY =
|
|
Math.floor((this.previewCanvas.height - previewHeight) / 2);
|
|
|
|
previewContext.drawImage(this.preview,
|
|
previewX, previewY,
|
|
previewWidth, previewHeight);
|
|
|
|
this.scale = scale;
|
|
this.dest.x = previewX;
|
|
this.dest.y = previewY;
|
|
this.dest.width = previewWidth;
|
|
this.dest.height = previewHeight;
|
|
};
|
|
|
|
ImageEditor.prototype.generateNewPreview = function(callback) {
|
|
// infer the previewHeight such that the aspect ratio stays the same
|
|
var scalex = this.previewCanvas.width / this.source.width;
|
|
var scaley = this.previewCanvas.height / this.source.height;
|
|
this.scale = Math.min(Math.min(scalex, scaley), 1);
|
|
|
|
var previewWidth = Math.floor(this.source.width * this.scale);
|
|
var previewHeight = Math.floor(this.source.height * this.scale);
|
|
|
|
// Update edits with new dimensions
|
|
this.edits.crop.x = this.source.x;
|
|
this.edits.crop.y = this.source.y;
|
|
this.edits.crop.w = this.source.width;
|
|
this.edits.crop.h = this.source.height;
|
|
|
|
// Update the destination rectangle with the new dimensions, too
|
|
this.dest.x = Math.floor((this.previewCanvas.width - previewWidth) / 2);
|
|
this.dest.y = Math.floor((this.previewCanvas.height - previewHeight) / 2);
|
|
this.dest.width = previewWidth;
|
|
this.dest.height = previewHeight;
|
|
|
|
// Create a preview image
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = previewWidth;
|
|
canvas.height = previewHeight;
|
|
// In this case, we only need graphic 2d to do the scaling. The
|
|
// willReadFrequently option makes canvas use software graphic 2d. This can
|
|
// skip a bug of GPU version, bug 960276.
|
|
var context = canvas.getContext('2d', { willReadFrequently: true });
|
|
|
|
// Draw that region of the image into the canvas, scaling it down
|
|
context.drawImage(this.original, this.source.x, this.source.y,
|
|
this.source.width, this.source.height,
|
|
0, 0, previewWidth, previewHeight);
|
|
|
|
this.previewImageData = context.getImageData(0, 0,
|
|
previewWidth, previewHeight);
|
|
|
|
// If we don't have an image processor yet, or if the processor
|
|
// can't handle an image of this size, create one now.
|
|
if (!this.processor ||
|
|
this.processor.maxPixels < previewWidth * previewHeight)
|
|
{
|
|
// If we already had a processor, destroy it
|
|
if (this.processor) {
|
|
this.processor.destroy();
|
|
}
|
|
|
|
this.processor = new ImageProcessorThread(previewWidth * previewHeight);
|
|
}
|
|
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
};
|
|
|
|
ImageEditor.prototype.resetPreview = function() {
|
|
if (this.previewImageData) {
|
|
this.previewImageData = null;
|
|
this.autoLevels = null;
|
|
}
|
|
};
|
|
|
|
ImageEditor.prototype.resize = function() {
|
|
var self = this;
|
|
var canvas = this.previewCanvas;
|
|
var dpr = window.devicePixelRatio;
|
|
canvas.width = Math.ceil(canvas.clientWidth * dpr);
|
|
canvas.height = Math.ceil(canvas.clientHeight * dpr);
|
|
|
|
// Save the crop region (scaled up to full image dimensions)
|
|
var savedCropRegion = {};
|
|
var hadCropOverlay = this.isCropOverlayShown();
|
|
if (hadCropOverlay) {
|
|
savedCropRegion.left = this.cropOverlayRegion.left / this.scale;
|
|
savedCropRegion.top = this.cropOverlayRegion.top / this.scale;
|
|
savedCropRegion.right = this.cropOverlayRegion.right / this.scale;
|
|
savedCropRegion.bottom = this.cropOverlayRegion.bottom / this.scale;
|
|
this.hideCropOverlay();
|
|
}
|
|
|
|
// Now update the preview image. This is done differently in the
|
|
// croponly case and in the regular image editing case
|
|
if (this.croponly) {
|
|
this.displayCropOnlyPreview();
|
|
restoreCropRegion();
|
|
}
|
|
else {
|
|
this.resetPreview();
|
|
this.edit(restoreCropRegion);
|
|
}
|
|
|
|
// Restore the crop region to what it was before the resize
|
|
function restoreCropRegion() {
|
|
if (hadCropOverlay) {
|
|
// showCropOverlay normally resets cropRegion to the full extent,
|
|
// so we need to pass in a new crop region to use
|
|
var newRegion = {};
|
|
newRegion.left = Math.floor(savedCropRegion.left * self.scale);
|
|
newRegion.top = Math.floor(savedCropRegion.top * self.scale);
|
|
newRegion.right = Math.floor(savedCropRegion.right * self.scale);
|
|
newRegion.bottom = Math.floor(savedCropRegion.bottom * self.scale);
|
|
self.showCropOverlay(newRegion);
|
|
}
|
|
}
|
|
};
|
|
|
|
ImageEditor.prototype.destroy = function() {
|
|
this.needsAnotherEdit = false;
|
|
|
|
if (this.original) {
|
|
this.original.src = '';
|
|
this.original = null;
|
|
}
|
|
|
|
this.previewImageData = null;
|
|
|
|
URL.revokeObjectURL(this.imageURL);
|
|
|
|
if (this.previewCanvas) {
|
|
this.container.removeChild(this.previewCanvas);
|
|
// Setting the canvas size to 0 causes a WebGL error so we don't do it
|
|
// this.previewCanvas.width = 0;
|
|
this.previewCanvas = null;
|
|
}
|
|
this.hideCropOverlay();
|
|
this.gestureDetector.stopDetecting();
|
|
this.gestureDetector = null;
|
|
};
|
|
|
|
// Preview the image with the specified edits applied. If edit is omitted,
|
|
// displays the original image. Clients should call this function when the
|
|
// desired edits change or when the size of the container changes (on
|
|
// orientation change events, for example)
|
|
ImageEditor.prototype.edit = function(callback) {
|
|
// A queued preview may finish after the user has left the editor.
|
|
if (!this.previewCanvas) {
|
|
return;
|
|
}
|
|
// If we are already editing the image, then we can't edit again now
|
|
// so instead we'll just set a flag to indicate that the image needs
|
|
// to be editing again. When the current edit ends, we'll check this
|
|
// flag and re-edit as needed. Using this flag means that it is okay
|
|
// to call edit() more quickly than the ImageProcessor can actually
|
|
// process the preview image. If the user drags the exposure slider
|
|
// quickly, for example, we will end up skipping some intermediate
|
|
// gamma values and will not do more image processing than the device
|
|
// can handle.
|
|
if (!callback && this.editing) {
|
|
this.needsAnotherEdit = true;
|
|
return;
|
|
}
|
|
this.editing = true;
|
|
|
|
if (!this.previewImageData) {
|
|
var self = this;
|
|
this.generateNewPreview(function() {
|
|
// If we got a new preview image it may be smaller than
|
|
// the old one so we have to clear the canvas before drawing it
|
|
self.finishEdit(callback, true);
|
|
});
|
|
} else {
|
|
// If we're using the same preview image we don't have to clear
|
|
// first because we will set all of the pixels that are already set.
|
|
this.finishEdit(callback, false);
|
|
}
|
|
};
|
|
|
|
ImageEditor.prototype.finishEdit = function(callback, eraseCanvas) {
|
|
var self = this;
|
|
var canvas = this.previewCanvas;
|
|
var previewContext = canvas.getContext('2d');
|
|
var imagedata = this.previewImageData;
|
|
var left = Math.floor((canvas.width - imagedata.width) / 2);
|
|
var top = Math.floor((canvas.height - imagedata.height) / 2);
|
|
|
|
this.dest.x = left;
|
|
this.dest.y = top;
|
|
this.dest.width = imagedata.width;
|
|
this.dest.height = imagedata.height;
|
|
|
|
this.processor.setGamma(this.edits.exposure.gamma);
|
|
this.processor.setMatrix(this.edits.effect.matrix);
|
|
this.processor.setLevels(this.edits.enhance.autoLevels);
|
|
|
|
var copiedPixels = new Uint8Array(imagedata.data);
|
|
|
|
this.processor.processImage(copiedPixels.buffer)
|
|
.then(function(processedPixels) {
|
|
var processedImageData =
|
|
new ImageData(new Uint8ClampedArray(processedPixels),
|
|
imagedata.width, imagedata.height);
|
|
requestAnimationFrame(function() {
|
|
if (!self.previewCanvas) {
|
|
return;
|
|
}
|
|
if (eraseCanvas) {
|
|
previewContext.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
previewContext.putImageData(processedImageData, left, top);
|
|
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
|
|
self.editing = false;
|
|
if (self.needsAnotherEdit) {
|
|
self.needsAnotherEdit = false;
|
|
self.edit();
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// Apply the edits offscreen and pass the full-size edited image as a blob
|
|
// to the specified callback function. The code here is much like the
|
|
// code above in edit().
|
|
//
|
|
// This function releases the this.original image so you should only call
|
|
// it to get the edited image when you are done with the ImageEditor.
|
|
//
|
|
ImageEditor.prototype.getFullSizeBlob = function(type, done, progress) {
|
|
//
|
|
// We can tune this algorithm by varying these constants.
|
|
//
|
|
// In theory, using more threads will allow the save to be faster on
|
|
// multi-core CPUs. But testing with 5mp images on Flame and Nexus 5
|
|
// I find that using 2 threds is only marginally faster than using 1,
|
|
// and using more than 2 slows things down. I suspect that a 5mp image
|
|
// is just not enough work for a fast device like nexus 5. Maybe with
|
|
// larger images more threads will have more of an impact.
|
|
//
|
|
// The more tiles, the smoother the progress bar animation will be but
|
|
// the longer the overall save will take.
|
|
//
|
|
const NUM_THREADS = 2;
|
|
const NUM_TILES = 24;
|
|
|
|
if (progress) { // Get the progress bar to appear right away
|
|
progress(0.01);
|
|
}
|
|
|
|
// Create an offscreen canvas and copy the image into it
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = this.source.width; // "full size" is cropped image size
|
|
canvas.height = this.source.height;
|
|
var context = canvas.getContext('2d', { willReadFrequently: true });
|
|
context.drawImage(this.original,
|
|
this.source.x, this.source.y,
|
|
this.source.width, this.source.height,
|
|
0, 0, this.source.width, this.source.height);
|
|
|
|
// As soon as we've copied the original image into the canvas we are
|
|
// done with the original and should release it to reduce memory usage.
|
|
this.original.src = '';
|
|
|
|
// How many pixels do we have to process?
|
|
var total_pixels = canvas.width * canvas.height;
|
|
|
|
// How many pixels have we processed so far?
|
|
var processed_pixels = 0;
|
|
|
|
function makeTileList(imageWidth, imageHeight, tileWidth, tileHeight) {
|
|
var tiles = [];
|
|
var x = 0, y = 0;
|
|
while (y < imageHeight) {
|
|
x = 0;
|
|
while (x < imageWidth) {
|
|
var tile = {x: x, y: y, w: tileWidth, h: tileHeight};
|
|
if (x + tileWidth > imageWidth) {
|
|
tile.w = imageWidth - x;
|
|
}
|
|
if (y + tileHeight > imageHeight) {
|
|
tile.h = imageHeight - y;
|
|
}
|
|
tiles.push(tile);
|
|
x += tileWidth;
|
|
}
|
|
y += tileHeight;
|
|
}
|
|
return tiles;
|
|
}
|
|
|
|
// Divide the image into a set of tiled rectangles
|
|
var tileHeight = Math.max(Math.round(this.source.height / NUM_TILES), 32);
|
|
var rectangles = makeTileList(this.source.width, this.source.height,
|
|
this.source.width, tileHeight);
|
|
|
|
// Create and initialize image processors to do the work.
|
|
// Each one has its own worker thread.
|
|
var processors = [];
|
|
for (var i = 0; i < NUM_THREADS; i++) {
|
|
processors[i] = new ImageProcessorThread(this.source.width * tileHeight);
|
|
processors[i].setGamma(this.edits.exposure.gamma);
|
|
processors[i].setMatrix(this.edits.effect.matrix);
|
|
processors[i].setLevels(this.edits.enhance.autoLevels);
|
|
}
|
|
|
|
// After this first synchronous portion, including the big drawImage()
|
|
// we'll guess that we're about 5% complete.
|
|
if (progress) {
|
|
progress(0.05);
|
|
}
|
|
|
|
// Loop through all the rectangles, get the image data for each, send
|
|
// it to a processor and collect the promises we get.
|
|
//
|
|
// XXX: this might be more efficient if we didn't get all the image data
|
|
// at once and instead waited for the processors to finish their tiles
|
|
// before getting more data for them.
|
|
//
|
|
var promises = [];
|
|
rectangles.forEach(function(rect, index) {
|
|
// Get the input pixels for this tile
|
|
var tile = context.getImageData(rect.x, rect.y, rect.w, rect.h);
|
|
// Choose a processor to handle this tile
|
|
var processor = processors[index % processors.length];
|
|
var promise = processor.processImage(tile.data.buffer)
|
|
.then(function(editedBuffer) {
|
|
// Copy the edited pixels from the tile back to the canvas
|
|
var editedTile =
|
|
new ImageData(new Uint8ClampedArray(editedBuffer), rect.w, rect.h);
|
|
context.putImageData(editedTile, rect.x, rect.y);
|
|
// Update the progress bar
|
|
processed_pixels += rect.w * rect.h;
|
|
if (progress) {
|
|
// Processing the pixels takes 85% of our time (as a rough guess)
|
|
progress(0.05 + 0.85 * processed_pixels / total_pixels);
|
|
}
|
|
});
|
|
promises.push(promise);
|
|
});
|
|
|
|
// Now wait for all the editing promises to be complete and save
|
|
// the edited image
|
|
Promise.all(promises).then(function() {
|
|
// We're done processing the image, so we can free the processors
|
|
// This should kill the workers and their memory a little faster
|
|
// than they might otherwise be garbage collected.
|
|
processors.forEach(function(processor) { processor.destroy(); });
|
|
|
|
function gotEncodedBlob(blob) {
|
|
// Move the progress bar to the end
|
|
if (progress) {
|
|
progress(1.0);
|
|
}
|
|
|
|
// Pass the blob to the callback.
|
|
// setTimeout is just so that the user can see the progress bar change.
|
|
setTimeout(function() {
|
|
done(blob);
|
|
});
|
|
}
|
|
|
|
// we need to save these for Exif rewrite.
|
|
var canvasW = canvas.width;
|
|
var canvasH = canvas.height;
|
|
|
|
function updateExif(blob, metaData, callback) {
|
|
metaData.Orientation = 1;
|
|
if (metaData.PixelXDimension) {
|
|
metaData.PixelXDimension = canvasW;
|
|
}
|
|
if (metaData.PixelYDimension) {
|
|
metaData.PixelYDimension = canvasH;
|
|
}
|
|
JPEGParser.writeExifMetaData(
|
|
blob, metaData,
|
|
(error, modifiedBlob) => {
|
|
if (error) {
|
|
console.error('Error' + error);
|
|
}
|
|
// Process modified file
|
|
callback(modifiedBlob);
|
|
});
|
|
}
|
|
|
|
var originalBlob = this.imageBlob;
|
|
var originalExif = this.edits.EXIF;
|
|
|
|
// Finally, convert the edited image to a blob and pass to the callback.
|
|
canvas.toBlob(function(blob) {
|
|
// Now that we've got the blob, we don't need the canvas anymore
|
|
context = null;
|
|
canvas.width = canvas.height = 0;
|
|
canvas = null;
|
|
progress(0.95);
|
|
|
|
if (type == 'image/jpeg') {
|
|
// we are most likely to have originalExif here.
|
|
if (originalExif) {
|
|
updateExif(blob, originalExif, gotEncodedBlob);
|
|
} else {
|
|
LazyLoader.load(['shared/js/media/jpeg-exif.js'], () => {
|
|
JPEGParser.readExifMetaData(originalBlob, (error, metaData) => {
|
|
if (error || !metaData) {
|
|
gotEncodedBlob(blob);
|
|
return;
|
|
}
|
|
updateExif(blob, metaData, gotEncodedBlob);
|
|
});
|
|
});
|
|
}
|
|
} else {
|
|
gotEncodedBlob(blob);
|
|
}
|
|
}, type);
|
|
}.bind(this));
|
|
};
|
|
|
|
ImageEditor.prototype.isCropOverlayShown = function() {
|
|
return this.cropCanvas;
|
|
};
|
|
|
|
// Returns true if the crop region is anything different than the
|
|
// entire dest rectangle. If this method returns false, there is no
|
|
// need to call getCroppedRegionBlob().
|
|
ImageEditor.prototype.hasBeenCropped = function() {
|
|
var dpr = window.devicePixelRatio;
|
|
return (this.cropOverlayRegion.left !== 0 ||
|
|
this.cropOverlayRegion.top !== 0 ||
|
|
this.cropOverlayRegion.right < Math.floor(this.dest.width / dpr) ||
|
|
this.cropOverlayRegion.bottom < Math.floor(this.dest.height / dpr));
|
|
};
|
|
|
|
// Display cropping controls
|
|
// XXX: have to handle rotate/resize
|
|
ImageEditor.prototype.showCropOverlay = function showCropOverlay(newRegion) {
|
|
var self = this;
|
|
|
|
// Create a canvas to display the crop overlay.
|
|
// Ignore the device pixel ratio and use CSS pixels for this canvas.
|
|
var canvas = this.cropCanvas = document.createElement('canvas');
|
|
canvas.id = 'edit-crop-canvas'; // for stylesheet
|
|
this.container.appendChild(canvas);
|
|
canvas.width = canvas.clientWidth;
|
|
canvas.height = canvas.clientHeight;
|
|
var context = this.cropContext = canvas.getContext('2d');
|
|
|
|
// Crop handle styles
|
|
context.translate(25, 15);
|
|
context.lineCap = 'round';
|
|
// XXX
|
|
// Please turn on the followig line when Bug 937529 is fixed. This is an
|
|
// workaround to have active handles drawn.
|
|
// context.lineJoin = 'round';
|
|
context.strokeStyle = 'rgba(255,255,255,1)';
|
|
|
|
// Start off with a crop region that is the one passed in, if it is not null.
|
|
// Otherwise, it should be the entire preview canvas
|
|
var region;
|
|
if (newRegion) {
|
|
region = this.cropOverlayRegion;
|
|
region.left = newRegion.left;
|
|
region.top = newRegion.top;
|
|
region.right = newRegion.right;
|
|
region.bottom = newRegion.bottom;
|
|
} else {
|
|
region = this.cropOverlayRegion;
|
|
var dpr = window.devicePixelRatio;
|
|
region.left = 0;
|
|
region.top = 0;
|
|
region.right = Math.floor(this.dest.width / dpr);
|
|
region.bottom = Math.floor(this.dest.height / dpr);
|
|
}
|
|
this.drawCropControls();
|
|
|
|
var isCropping = false;
|
|
this.cropCanvas.addEventListener('pan', function(ev) {
|
|
if (!isCropping) {
|
|
self.cropStart(ev);
|
|
isCropping = true;
|
|
}
|
|
});
|
|
this.cropCanvas.addEventListener('swipe', function() {
|
|
isCropping = false;
|
|
});
|
|
};
|
|
|
|
ImageEditor.prototype.hideCropOverlay = function hideCropOverlay() {
|
|
if (this.isCropOverlayShown()) {
|
|
this.container.removeChild(this.cropCanvas);
|
|
this.cropCanvas.width = 0;
|
|
this.cropCanvas = this.cropContext = null;
|
|
}
|
|
};
|
|
|
|
// Force set source size to crop sizes in edit settings
|
|
ImageEditor.prototype.forceSetCropRegion = function forceSetCropRegion() {
|
|
this.source.x = this.edits.crop.x;
|
|
this.source.y = this.edits.crop.y;
|
|
this.source.width = this.edits.crop.w;
|
|
this.source.height = this.edits.crop.h;
|
|
};
|
|
|
|
// Reset image to full original size
|
|
ImageEditor.prototype.resetCropRegion = function resetCropRegion() {
|
|
this.source.x = 0;
|
|
this.source.y = 0;
|
|
this.source.width = this.original.width;
|
|
this.source.height = this.original.height;
|
|
};
|
|
|
|
ImageEditor.prototype.drawCropControls = function(handle) {
|
|
var canvas = this.cropCanvas;
|
|
var context = this.cropContext;
|
|
var region = this.cropOverlayRegion;
|
|
var dpr = window.devicePixelRatio;
|
|
var dest = {
|
|
x: Math.floor(this.dest.x / dpr),
|
|
y: Math.floor(this.dest.y / dpr),
|
|
width: Math.floor(this.dest.width / dpr),
|
|
height: Math.floor(this.dest.height / dpr)
|
|
};
|
|
var left = region.left + dest.x;
|
|
var top = region.top + dest.y;
|
|
var right = region.right + dest.x;
|
|
var bottom = region.bottom + dest.y;
|
|
var centerX = (left + right) / 2;
|
|
var centerY = (top + bottom) / 2;
|
|
var width = right - left;
|
|
var height = bottom - top;
|
|
|
|
// Erase everything
|
|
context.clearRect(-25, -15, canvas.width, canvas.height);
|
|
|
|
// Overlay the preview canvas with translucent gray
|
|
context.fillStyle = 'rgba(0, 0, 0, .5)';
|
|
context.fillRect(dest.x, dest.y, dest.width, dest.height);
|
|
|
|
// Clear a rectangle so interior of the crop region shows through
|
|
context.clearRect(left, top, width, height);
|
|
|
|
// Draw a border around the crop region
|
|
context.lineWidth = 1;
|
|
context.strokeRect(left, top, width, height);
|
|
|
|
// Draw the drag handles in the corners of the crop region
|
|
context.lineWidth = 5;
|
|
context.beginPath();
|
|
|
|
// N
|
|
context.moveTo(centerX - 23, top + 1);
|
|
context.lineTo(centerX + 23, top + 1);
|
|
|
|
// E
|
|
context.moveTo(right - 1, centerY - 23);
|
|
context.lineTo(right - 1, centerY + 23);
|
|
|
|
// S
|
|
context.moveTo(centerX - 23, bottom - 1);
|
|
context.lineTo(centerX + 23, bottom - 1);
|
|
|
|
// W
|
|
context.moveTo(left + 1, centerY - 23);
|
|
context.lineTo(left + 1, centerY + 23);
|
|
|
|
// Don't draw the corner handles if there is an aspect ratio we're maintaining
|
|
if (!this.cropAspectWidth) {
|
|
// NE
|
|
context.moveTo(right - 23, top + 1);
|
|
context.lineTo(right - 1, top + 1);
|
|
context.lineTo(right - 1, top + 23);
|
|
|
|
// SE
|
|
context.moveTo(right - 1, bottom - 23);
|
|
context.lineTo(right - 1, bottom - 1);
|
|
context.lineTo(right - 23, bottom - 1);
|
|
|
|
// SW
|
|
context.moveTo(left + 23, bottom - 1);
|
|
context.lineTo(left + 1, bottom - 1);
|
|
context.lineTo(left + 1, bottom - 23);
|
|
|
|
// NW
|
|
context.moveTo(left + 1, top + 23);
|
|
context.lineTo(left + 1, top + 1);
|
|
context.lineTo(left + 23, top + 1);
|
|
}
|
|
|
|
// Draw all the handles at once
|
|
context.stroke();
|
|
|
|
// If one of the handles is being used, highlight it
|
|
if (handle) {
|
|
var cx, cy;
|
|
switch (handle) {
|
|
case 'n':
|
|
cx = centerX;
|
|
cy = top;
|
|
break;
|
|
case 'ne':
|
|
cx = right;
|
|
cy = top;
|
|
break;
|
|
case 'e':
|
|
cx = right;
|
|
cy = centerY;
|
|
break;
|
|
case 'se':
|
|
cx = right;
|
|
cy = bottom;
|
|
break;
|
|
case 's':
|
|
cx = centerX;
|
|
cy = bottom;
|
|
break;
|
|
case 'sw':
|
|
cx = left;
|
|
cy = bottom;
|
|
break;
|
|
case 'w':
|
|
cx = left;
|
|
cy = centerY;
|
|
break;
|
|
case 'nw':
|
|
cx = left;
|
|
cy = top;
|
|
break;
|
|
}
|
|
|
|
context.beginPath();
|
|
context.arc(cx, cy, 25, 0, 2 * Math.PI);
|
|
context.fillStyle = 'rgba(255,255,255,.5)';
|
|
context.lineWidth = 1;
|
|
context.fill();
|
|
}
|
|
};
|
|
|
|
// Called when the first pan event comes in on the crop canvas
|
|
ImageEditor.prototype.cropStart = function(ev) {
|
|
var self = this;
|
|
var region = this.cropOverlayRegion;
|
|
var dpr = window.devicePixelRatio;
|
|
var dest = {
|
|
x: Math.floor(this.dest.x / dpr),
|
|
y: Math.floor(this.dest.y / dpr),
|
|
width: Math.floor(this.dest.width / dpr),
|
|
height: Math.floor(this.dest.height / dpr)
|
|
};
|
|
var rect = this.previewCanvas.getBoundingClientRect();
|
|
var x0 = ev.detail.position.screenX - rect.left - dest.x;
|
|
var y0 = ev.detail.position.screenY - rect.top - dest.y;
|
|
var left = region.left;
|
|
var top = region.top;
|
|
var right = region.right;
|
|
var bottom = region.bottom;
|
|
var aspectRatio = this.cropAspectWidth ?
|
|
this.cropAspectWidth / this.cropAspectHeight :
|
|
0;
|
|
var centerX = (region.left + region.right) / 2;
|
|
var centerY = (region.top + region.bottom) / 2;
|
|
|
|
// Return true if (x0,y0) is within 25 pixels of (x,y)
|
|
function hit(x, y) {
|
|
return (x0 > x - 25 && x0 < x + 25 &&
|
|
y0 > y - 25 && y0 < y + 25);
|
|
}
|
|
|
|
if (hit((left + right) / 2, top)) {
|
|
drag('n');
|
|
} else if (hit(right, (top + bottom) / 2)) {
|
|
drag('e');
|
|
} else if (hit((left + right) / 2, bottom)) {
|
|
drag('s');
|
|
} else if (hit(left, (top + bottom) / 2)) {
|
|
drag('w');
|
|
} else if (!aspectRatio) {
|
|
if (hit(right, top)) {
|
|
drag('ne');
|
|
} else if (hit(right, bottom)) {
|
|
drag('se');
|
|
} else if (hit(left, bottom)) {
|
|
drag('sw');
|
|
} else if (hit(left, top)) {
|
|
drag('nw');
|
|
} else {
|
|
drag(); // with no argument, do a pan instead of a drag
|
|
}
|
|
} else {
|
|
drag(); // pan
|
|
}
|
|
|
|
function drag(handle) {
|
|
window.addEventListener('pan', move, true);
|
|
window.addEventListener('swipe', up, true);
|
|
|
|
self.drawCropControls(handle); // highlight drag handle
|
|
|
|
function move(e) {
|
|
var dx = e.detail.absolute.dx;
|
|
var dy = e.detail.absolute.dy;
|
|
|
|
var newleft = region.left;
|
|
var newright = region.right;
|
|
var newtop = region.top;
|
|
var newbottom = region.bottom;
|
|
|
|
if (!handle) {
|
|
pan(dx, dy);
|
|
return;
|
|
}
|
|
|
|
switch (handle) {
|
|
case 'n':
|
|
newtop = top + dy;
|
|
break;
|
|
case 'ne':
|
|
newright = right + dx;
|
|
newtop = top + dy;
|
|
break;
|
|
case 'e':
|
|
newright = right + dx;
|
|
break;
|
|
case 'se':
|
|
newright = right + dx;
|
|
newbottom = bottom + dy;
|
|
break;
|
|
case 's':
|
|
newbottom = bottom + dy;
|
|
break;
|
|
case 'sw':
|
|
newleft = left + dx;
|
|
newbottom = bottom + dy;
|
|
break;
|
|
case 'w':
|
|
newleft = left + dx;
|
|
break;
|
|
case 'nw':
|
|
newleft = left + dx;
|
|
newtop = top + dy;
|
|
break;
|
|
}
|
|
|
|
// If there is an aspect ratio, make sure we maintain it.
|
|
// Note that if there is an aspect ratio we won't display
|
|
// the corner drag handles, so we don't have to handle those.
|
|
if (aspectRatio) {
|
|
var width, height;
|
|
switch (handle) {
|
|
case 'n':
|
|
case 's':
|
|
// change width to match the new height, keeping the center still
|
|
height = newbottom - newtop;
|
|
width = height * aspectRatio;
|
|
newleft = Math.floor(centerX - Math.floor(width / 2));
|
|
newright = Math.ceil(centerX + Math.ceil(width / 2));
|
|
break;
|
|
case 'e':
|
|
case 'w':
|
|
// Change height to match new width, keeping center still
|
|
width = newright - newleft;
|
|
height = width / aspectRatio;
|
|
newtop = Math.floor(centerY - Math.floor(height / 2));
|
|
newbottom = Math.ceil(centerY + Math.ceil(height / 2));
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Now if the new region is out of bounds then bail out without
|
|
// changing the region at all and ignore this move event
|
|
if (newtop < 0 || newleft < 0 ||
|
|
newright > dest.width || newbottom > dest.height) {
|
|
return;
|
|
}
|
|
|
|
// Don't let the crop region become smaller than 100x100. If it does
|
|
// then the sensitive regions of the crop handles start to intersect.
|
|
// If there is a cropping aspect ratio, then the minimum size in
|
|
// one dimension will be 100 and will be larger in the other.
|
|
var minWidth = 100, minHeight = 100;
|
|
if (aspectRatio) {
|
|
if (aspectRatio > 1) {
|
|
minWidth = Math.round(minWidth * aspectRatio);
|
|
} else if (aspectRatio < 1) {
|
|
minHeight = Math.round(minHeight / aspectRatio);
|
|
}
|
|
}
|
|
|
|
// if the width is less than the minimum allowed (due to orientation
|
|
// change), only allow the crop region to get bigger
|
|
var newWidth = newright - newleft;
|
|
if ((newWidth < (region.right - region.left)) && (newWidth < minWidth)) {
|
|
return;
|
|
}
|
|
var newHeight = newbottom - newtop;
|
|
if ((newHeight < (region.bottom - region.top)) &&
|
|
(newHeight < minHeight)) {
|
|
return;
|
|
}
|
|
|
|
// Otherwise, all is well, so update the crop region and redraw
|
|
region.left = newleft;
|
|
region.right = newright;
|
|
region.top = newtop;
|
|
region.bottom = newbottom;
|
|
|
|
self.drawCropControls(handle);
|
|
}
|
|
|
|
function pan(dx, dy) {
|
|
if (dx > 0) {
|
|
dx = Math.min(dx, dest.width - right);
|
|
}
|
|
if (dx < 0) {
|
|
dx = Math.max(dx, -left);
|
|
}
|
|
if (dy > 0) {
|
|
dy = Math.min(dy, dest.height - bottom);
|
|
}
|
|
if (dy < 0) {
|
|
dy = Math.max(dy, -top);
|
|
}
|
|
|
|
region.left = left + dx;
|
|
region.right = right + dx;
|
|
region.top = top + dy;
|
|
region.bottom = bottom + dy;
|
|
|
|
self.drawCropControls();
|
|
}
|
|
|
|
function up(e) {
|
|
// Enable Apply and Save button if it's first edit.
|
|
if (enableSaveAndApplyButtons) {
|
|
enableSaveAndApplyButtons();
|
|
}
|
|
window.removeEventListener('pan', move, true);
|
|
window.removeEventListener('swipe', up, true);
|
|
self.drawCropControls(); // erase drag handle highlight
|
|
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
// If the crop overlay is displayed, use the current position of the
|
|
// overlaid crop region to actually set the crop region of the original image
|
|
ImageEditor.prototype.cropImage = function(callback) {
|
|
if (!this.isCropOverlayShown()) {
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
return;
|
|
}
|
|
|
|
var region = this.cropOverlayRegion;
|
|
var dpr = window.devicePixelRatio;
|
|
var dest = {
|
|
x: Math.floor(this.dest.x / dpr),
|
|
y: Math.floor(this.dest.y / dpr),
|
|
width: Math.floor(this.dest.width / dpr),
|
|
height: Math.floor(this.dest.height / dpr)
|
|
};
|
|
|
|
// Convert the preview crop region to fractions
|
|
var left = Math.min(region.left / dest.width, 1.0);
|
|
var right = Math.min(region.right / dest.width, 1.0);
|
|
var top = Math.min(region.top / dest.height, 1.0);
|
|
var bottom = Math.min(region.bottom / dest.height, 1.0);
|
|
|
|
// Now convert those fractions to pixels in the original image
|
|
left = Math.floor(left * this.source.width);
|
|
right = Math.ceil(right * this.source.width);
|
|
top = Math.floor(top * this.source.height);
|
|
bottom = Math.ceil(bottom * this.source.height);
|
|
|
|
// XXX: tweak these to make sure we still have the right aspect ratio
|
|
// after rounding to pixels
|
|
console.error('Maintain aspect ratio precisely!!!');
|
|
|
|
// And update the real crop region
|
|
this.source.x += left;
|
|
this.source.y += top;
|
|
this.source.width = right - left;
|
|
this.source.height = bottom - top;
|
|
|
|
this.resetPreview();
|
|
this.edit(callback);
|
|
};
|
|
|
|
// Pass no arguments for freeform 1,1 for square,
|
|
// 2,3 for portrait, 3,2 for landscape.
|
|
ImageEditor.prototype.setCropAspectRatio = function(ratioWidth, ratioHeight) {
|
|
var region = this.cropOverlayRegion;
|
|
var dpr = window.devicePixelRatio;
|
|
var dest = {
|
|
x: Math.floor(this.dest.x / dpr),
|
|
y: Math.floor(this.dest.y / dpr),
|
|
width: Math.floor(this.dest.width / dpr),
|
|
height: Math.floor(this.dest.height / dpr)
|
|
};
|
|
|
|
this.cropAspectWidth = ratioWidth || 0;
|
|
this.cropAspectHeight = ratioHeight || 0;
|
|
|
|
if (ratioWidth && ratioHeight) {
|
|
// Constrained cropping, centered on image
|
|
var centerX = dest.width / 2;
|
|
var centerY = dest.height / 2;
|
|
|
|
var scaleX = dest.width / ratioWidth;
|
|
var scaleY = dest.height / ratioHeight;
|
|
var scale = Math.min(scaleX, scaleY);
|
|
|
|
var width = Math.floor(scale * ratioWidth);
|
|
var height = Math.floor(scale * ratioHeight);
|
|
|
|
region.left = centerX - width / 2;
|
|
region.right = centerX + width / 2;
|
|
region.top = centerY - height / 2;
|
|
region.bottom = centerY + height / 2;
|
|
}
|
|
else {
|
|
// Freeform cropping
|
|
region.left = 0;
|
|
region.top = 0;
|
|
region.right = dest.width;
|
|
region.bottom = dest.height;
|
|
}
|
|
this.drawCropControls();
|
|
};
|
|
|
|
// Return the crop region as an object with left, top, width and height
|
|
// properties. The values of these properties are numbers between 0 and 1
|
|
// representing fractions of the full image width and height.
|
|
ImageEditor.prototype.getCropRegion = function() {
|
|
var region = this.cropOverlayRegion;
|
|
var previewRect = this.dest;
|
|
var dpr = window.devicePixelRatio;
|
|
|
|
// Convert the preview crop region to fractions
|
|
var left = dpr * region.left / previewRect.width;
|
|
var right = dpr * region.right / previewRect.width;
|
|
var top = dpr * region.top / previewRect.height;
|
|
var bottom = dpr * region.bottom / previewRect.height;
|
|
|
|
return {
|
|
left: left,
|
|
top: top,
|
|
width: Math.min(right - left, 1.0),
|
|
height: Math.min(bottom - top, 1.0)
|
|
};
|
|
};
|
|
|
|
// Covert the cropped region in image pixels to object with left, right, top,
|
|
// bottom properties in CSS Pixel to be used to show crop overlay
|
|
ImageEditor.prototype.getCropOverlayRegion = function(cropSettings) {
|
|
var dpr = window.devicePixelRatio;
|
|
|
|
var cropOverlay = {};
|
|
cropOverlay.left = Math.floor((cropSettings.x * this.scale) / dpr);
|
|
cropOverlay.top = Math.floor((cropSettings.y * this.scale) / dpr);
|
|
cropOverlay.right = Math.floor(((cropSettings.x + cropSettings.w) *
|
|
this.scale) / dpr);
|
|
cropOverlay.bottom = Math.floor(((cropSettings.y + cropSettings.h) *
|
|
this.scale) / dpr);
|
|
return cropOverlay;
|
|
};
|
|
|
|
ImageEditor.prototype.autoEnhancement = function(callback) {
|
|
var self = this;
|
|
if (!this.edits.enhance.autoLevels) { // if not already enhanced
|
|
this.getAutoLevels().then(setEnhancement);
|
|
} else {
|
|
setEnhancement(null);
|
|
}
|
|
|
|
function setEnhancement(levels) {
|
|
self.edits.enhance.autoLevels = levels;
|
|
self.edit();
|
|
if (callback) {
|
|
callback(levels !== null);
|
|
}
|
|
}
|
|
};
|
|
|
|
/*
|
|
* Compute red, green, and blue min and max levels for auto enhancement
|
|
* based on the image histogram returned by computeHistogram().
|
|
*
|
|
* The levels computed here are used by ImageProcessor to do simple
|
|
* linear equalization. For each channel, we find the lowest pixel and
|
|
* the highest, and then do a linear transformation so that the lowest
|
|
* go to 0 and the highest go to 255. A couple of refinements: instead
|
|
* of finding the lowest and highest pixels, we find the level of the
|
|
* bottom 1% and top 1% of pixels and use those. This allows us to
|
|
* deal with small amounts of noise in the image. Also, if the min-max
|
|
* range isn't very wide, ImageProcessor doesn't modify that channel
|
|
* at all. This is for non-photographic images that have solid colors
|
|
* in them: we don't want to wash those out.
|
|
*
|
|
* I also tried implementing "histogram equalization" based on the post at
|
|
* http://www.generation5.org/content/2004/histogramEqualization.asp
|
|
* This gave really vivid color enhancement, probably too vivid.
|
|
* Also, it enhanced noise and overexposed regions in a bad way, and it
|
|
* didn't deal with non-photo images that were mostly the same color.
|
|
* Black text on light blue turned into black on white. Wikipedia lists
|
|
* some of the shortcomings of histogram equalization here:
|
|
* http://en.wikipedia.org/wiki/Histogram_equalization#Overview
|
|
*
|
|
* In the future, we could try histogram equalization with the
|
|
* clipping technique described here:
|
|
* http://en.wikipedia.org/wiki/Adaptive_histogram_equalization#Contrast_Limited_AHE
|
|
* By aggressively clipping the peaks of the histogram before
|
|
* computing the cumulative histogram maybe we can get the best of the
|
|
* the linear and histogram techniques.
|
|
*
|
|
* Also, maybe we'd get better results if we only computed a histogram
|
|
* for the center of the image and then enhanced the entire image
|
|
* based on the middle. Or, more generally, we could weight the
|
|
* histogram so that pixels near the middle count for more than pixels
|
|
* near the edge. All pixels get 1 count. Then those more than 1/8th
|
|
* from any edge get another count (that's the center 9/16ths of the
|
|
* pixels). Then all the pixels that are more than 1/4 from the edge
|
|
* (the center 1/4 of the pixels) get a third count.
|
|
*/
|
|
|
|
// Return a Promise for auto enhancment parameters for the current preview.
|
|
// If they have already been computed, then the promise will resolve
|
|
// immediately. Otherwise, the promise will resolve when they are computed.
|
|
// This calls the computeHistogram() method of ImageProcessor to compute
|
|
// a histogram of the current preview, if that has not already been computed.
|
|
ImageEditor.prototype.getAutoLevels = function() {
|
|
var self = this;
|
|
|
|
if (this.autoLevels) {
|
|
return Promise.resolve(this.autoLevels);
|
|
}
|
|
|
|
if (!this.previewImageData) {
|
|
// this should not happen
|
|
return Promise.reject(new Error('called getAutoLevels when no preview' +
|
|
'image was defined'));
|
|
}
|
|
|
|
var copiedPixels = new Uint8Array(this.previewImageData.data);
|
|
|
|
return this.processor.computeHistogram(copiedPixels.buffer)
|
|
.then(function(histogram) {
|
|
var redHistogram = new Uint32Array(histogram, 0, 256);
|
|
var greenHistogram = new Uint32Array(histogram, 256 * 4, 256);
|
|
var blueHistogram = new Uint32Array(histogram, 256 * 8, 256);
|
|
|
|
self.autoLevels = {
|
|
red: getLevels(redHistogram, 1),
|
|
green: getLevels(greenHistogram, 1),
|
|
blue: getLevels(blueHistogram, 1)
|
|
};
|
|
|
|
return self.autoLevels;
|
|
});
|
|
|
|
function getLevels(histogram, thresholdPercent) {
|
|
var total, threshold, min = 255, max = 0, i;
|
|
|
|
// How many total pixels?
|
|
// If we do weighted histograms, this may be different than
|
|
// the size of the image.
|
|
total = 0;
|
|
for (i = 0; i < 256; i++) {
|
|
total += histogram[i];
|
|
}
|
|
|
|
// How many pixels do we need to see to count as the minimum or maximum
|
|
threshold = thresholdPercent / 100 * total;
|
|
|
|
// Find the minimum level
|
|
total = 0;
|
|
for (i = 0; i < 256; i++) {
|
|
total += histogram[i];
|
|
if (total > threshold) {
|
|
min = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Find the maximum level
|
|
total = 0;
|
|
for (i = 255; i >= 0; i--) {
|
|
total += histogram[i];
|
|
if (total > threshold) {
|
|
max = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
return {
|
|
min: min,
|
|
max: max
|
|
};
|
|
}
|
|
};
|