143 lines
3.4 KiB
JavaScript
143 lines
3.4 KiB
JavaScript
import {
|
|
DATA_PREVIEW,
|
|
} from './constants';
|
|
import {
|
|
each,
|
|
empty,
|
|
extend,
|
|
getData,
|
|
getTransforms,
|
|
removeData,
|
|
setData,
|
|
setStyle,
|
|
} from './utilities';
|
|
|
|
export default {
|
|
initPreview() {
|
|
const { crossOrigin } = this;
|
|
const { preview } = this.options;
|
|
const url = crossOrigin ? this.crossOriginUrl : this.url;
|
|
const image = document.createElement('img');
|
|
|
|
if (crossOrigin) {
|
|
image.crossOrigin = crossOrigin;
|
|
}
|
|
|
|
image.src = url;
|
|
this.viewBox.appendChild(image);
|
|
this.image2 = image;
|
|
|
|
if (!preview) {
|
|
return;
|
|
}
|
|
|
|
const previews = preview.querySelector ? [preview] : document.querySelectorAll(preview);
|
|
|
|
this.previews = previews;
|
|
|
|
each(previews, (element) => {
|
|
const img = document.createElement('img');
|
|
|
|
// Save the original size for recover
|
|
setData(element, DATA_PREVIEW, {
|
|
width: element.offsetWidth,
|
|
height: element.offsetHeight,
|
|
html: element.innerHTML,
|
|
});
|
|
|
|
if (crossOrigin) {
|
|
img.crossOrigin = crossOrigin;
|
|
}
|
|
|
|
img.src = url;
|
|
|
|
/**
|
|
* Override img element styles
|
|
* Add `display:block` to avoid margin top issue
|
|
* Add `height:auto` to override `height` attribute on IE8
|
|
* (Occur only when margin-top <= -height)
|
|
*/
|
|
img.style.cssText = (
|
|
'display:block;' +
|
|
'width:100%;' +
|
|
'height:auto;' +
|
|
'min-width:0!important;' +
|
|
'min-height:0!important;' +
|
|
'max-width:none!important;' +
|
|
'max-height:none!important;' +
|
|
'image-orientation:0deg!important;"'
|
|
);
|
|
|
|
empty(element);
|
|
element.appendChild(img);
|
|
});
|
|
},
|
|
|
|
resetPreview() {
|
|
each(this.previews, (element) => {
|
|
const data = getData(element, DATA_PREVIEW);
|
|
|
|
setStyle(element, {
|
|
width: data.width,
|
|
height: data.height,
|
|
});
|
|
|
|
element.innerHTML = data.html;
|
|
removeData(element, DATA_PREVIEW);
|
|
});
|
|
},
|
|
|
|
preview() {
|
|
const { imageData, canvasData, cropBoxData } = this;
|
|
const { width: cropBoxWidth, height: cropBoxHeight } = cropBoxData;
|
|
const { width, height } = imageData;
|
|
const left = cropBoxData.left - canvasData.left - imageData.left;
|
|
const top = cropBoxData.top - canvasData.top - imageData.top;
|
|
|
|
if (!this.cropped || this.disabled) {
|
|
return;
|
|
}
|
|
|
|
setStyle(this.image2, extend({
|
|
width,
|
|
height,
|
|
}, getTransforms(extend({
|
|
translateX: -left,
|
|
translateY: -top,
|
|
}, imageData))));
|
|
|
|
each(this.previews, (element) => {
|
|
const data = getData(element, DATA_PREVIEW);
|
|
const originalWidth = data.width;
|
|
const originalHeight = data.height;
|
|
let newWidth = originalWidth;
|
|
let newHeight = originalHeight;
|
|
let ratio = 1;
|
|
|
|
if (cropBoxWidth) {
|
|
ratio = originalWidth / cropBoxWidth;
|
|
newHeight = cropBoxHeight * ratio;
|
|
}
|
|
|
|
if (cropBoxHeight && newHeight > originalHeight) {
|
|
ratio = originalHeight / cropBoxHeight;
|
|
newWidth = cropBoxWidth * ratio;
|
|
newHeight = originalHeight;
|
|
}
|
|
|
|
setStyle(element, {
|
|
width: newWidth,
|
|
height: newHeight,
|
|
});
|
|
|
|
setStyle(element.getElementsByTagName('img')[0], extend({
|
|
width: width * ratio,
|
|
height: height * ratio,
|
|
}, getTransforms(extend({
|
|
translateX: -left * ratio,
|
|
translateY: -top * ratio,
|
|
}, imageData))));
|
|
});
|
|
},
|
|
};
|