|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
import * as StackBlur from './stackblur';
|
|
|
|
|
|
|
|
|
|
class BgImage {
|
|
|
|
|
constructor(){
|
|
|
|
|
constructor() {
|
|
|
|
|
this.loaded = false;
|
|
|
|
|
|
|
|
|
|
this.isCrosBlocked = false;
|
|
|
|
|
@ -18,10 +18,7 @@ class BgImage {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.domStyles = $('head').append('<style data-type="bgimg-styles"></style>').find('style[data-type="bgimg-styles"]');
|
|
|
|
|
this.posStyles = $('head').append('<style data-type="bgimg-styles-pos"></style>').find('style[data-type="bgimg-styles-pos"]');
|
|
|
|
|
this.domStyleSheet = this.domStyles[0].sheet;
|
|
|
|
|
this.posStyleSheet = this.posStyles[0].sheet;
|
|
|
|
|
this.domStyle = document.documentElement.style;
|
|
|
|
|
|
|
|
|
|
this.hasBlurArea = false;
|
|
|
|
|
this.blurRadius = 20;
|
|
|
|
|
@ -76,10 +73,10 @@ class BgImage {
|
|
|
|
|
return featureSupport;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async loadImage(src, xCenter, yCenter){
|
|
|
|
|
async loadImage(src, xCenter, yCenter) {
|
|
|
|
|
try {
|
|
|
|
|
await fetch(src);
|
|
|
|
|
} catch(e){
|
|
|
|
|
} catch (e) {
|
|
|
|
|
this.isCrosBlocked = true;
|
|
|
|
|
this.img.crossOrigin = null;
|
|
|
|
|
}
|
|
|
|
|
@ -91,7 +88,7 @@ class BgImage {
|
|
|
|
|
this.img.src = src;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
generateBlurImage(){
|
|
|
|
|
generateBlurImage() {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
let canvas = document.createElement('canvas');
|
|
|
|
|
canvas.width = this.img.width;
|
|
|
|
|
@ -107,11 +104,11 @@ class BgImage {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async onImageLoaded(){
|
|
|
|
|
async onImageLoaded() {
|
|
|
|
|
this.imgRatio = this.img.width / this.img.height;
|
|
|
|
|
|
|
|
|
|
if(this.hasBlurArea && !this.cssFeature.backdropFilter) { // 不支持backdrop-filter，使用js生成模糊
|
|
|
|
|
if(!this.isCrosBlocked){
|
|
|
|
|
if (this.hasBlurArea && !this.cssFeature.backdropFilter) { // 不支持backdrop-filter，使用js生成模糊
|
|
|
|
|
if (!this.isCrosBlocked) {
|
|
|
|
|
//生成模糊的图片
|
|
|
|
|
//css会有白边，为了效果好只能用canvas生成了
|
|
|
|
|
await this.generateBlurImage();
|
|
|
|
|
@ -122,7 +119,7 @@ class BgImage {
|
|
|
|
|
|
|
|
|
|
this.fixPosition();
|
|
|
|
|
|
|
|
|
|
if(!this.loaded){
|
|
|
|
|
if (!this.loaded) {
|
|
|
|
|
this.viewports.forEach((viewport) => {
|
|
|
|
|
viewport.css({
|
|
|
|
|
backgroundImage: "url('" + this.source + "')",
|
|
|
|
|
@ -136,31 +133,30 @@ class BgImage {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!this.cssFeature.backdropFilter) {
|
|
|
|
|
var css = ".has-bgimg .bgimg-background-blur { ";
|
|
|
|
|
css += "background-image: url('" + this.blurSource + "'); ";
|
|
|
|
|
css += ";";
|
|
|
|
|
this.domStyleSheet.insertRule(css, this.domStyleSheet.rules.length);
|
|
|
|
|
$('body').addClass('bgimg-fallback');
|
|
|
|
|
|
|
|
|
|
this.domStyle.setProperty('--bgimg-blur-image', `url('${this.blurSource}')`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.loaded = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onWindowResize(){
|
|
|
|
|
if(this.loaded) this.fixPosition();
|
|
|
|
|
onWindowResize() {
|
|
|
|
|
if (this.loaded) this.fixPosition();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getOverflowSize(screenSize, imgSize, centerPoint){
|
|
|
|
|
getOverflowSize(screenSize, imgSize, centerPoint) {
|
|
|
|
|
let centerPointPx = imgSize * centerPoint / 100;
|
|
|
|
|
let maxOverflow = imgSize - screenSize;
|
|
|
|
|
let absOffset = centerPointPx - (screenSize / 2);
|
|
|
|
|
return Math.max(0, Math.min(maxOverflow, absOffset));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fixPosition(){
|
|
|
|
|
fixPosition() {
|
|
|
|
|
let screenRatio = window.innerWidth / window.innerHeight;
|
|
|
|
|
//计算出适合的大小以及offset
|
|
|
|
|
if(this.imgRatio > screenRatio){ //窄屏
|
|
|
|
|
if (this.imgRatio > screenRatio) { //窄屏
|
|
|
|
|
//图片高度 = 屏幕高度，横向靠近中心点
|
|
|
|
|
this.imgSize.height = window.innerHeight;
|
|
|
|
|
this.imgSize.width = this.imgSize.height * this.imgRatio;
|
|
|
|
|
@ -176,7 +172,7 @@ class BgImage {
|
|
|
|
|
this.fixViewportPosition();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fixViewportPosition(){
|
|
|
|
|
fixViewportPosition() {
|
|
|
|
|
this.viewports.forEach((viewport) => {
|
|
|
|
|
//设置viewport的style
|
|
|
|
|
viewport.css({
|
|
|
|
|
@ -185,24 +181,19 @@ class BgImage {
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if(this.hasBlurArea){
|
|
|
|
|
if (this.hasBlurArea && !this.cssFeature.backdropFilter) {
|
|
|
|
|
//设置模糊背景的style
|
|
|
|
|
let css = ".has-bgimg .bgimg-background-blur { ";
|
|
|
|
|
css += 'background-size: ' + this.imgSize.width + 'px ' + this.imgSize.height + 'px; ';
|
|
|
|
|
css += 'background-position: ' + this.imgOffset.left + 'px ' + this.imgOffset.top + 'px; ';
|
|
|
|
|
css += '}';
|
|
|
|
|
|
|
|
|
|
this.posStyleSheet.insertRule(css, this.posStyleSheet.rules.length);
|
|
|
|
|
if(this.posStyleSheet.rules.length > 1) this.posStyleSheet.deleteRule(this.posStyleSheet.rules.length - 2);
|
|
|
|
|
this.domStyle.setProperty('--bgimg-bg-size', `${this.imgSize.width}px ${this.imgSize.height}px`);
|
|
|
|
|
this.domStyle.setProperty('--bgimg-bg-pos', `${this.imgOffset.left}px ${this.imgOffset.top}px`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
addViewport(element){
|
|
|
|
|
addViewport(element) {
|
|
|
|
|
element.css('opacity', 0);
|
|
|
|
|
this.viewports.push(element);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
addBlurBackground(element){
|
|
|
|
|
addBlurBackground(element) {
|
|
|
|
|
let classList = ['bgimg-background-blur', 'bgimg-background-loading'];
|
|
|
|
|
if (this.cssFeature.backdropFilter) {
|
|
|
|
|
classList.push('bgimg-backdrop-blur');
|
|
|
|
|
@ -213,7 +204,7 @@ class BgImage {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(!global.isekai){
|
|
|
|
|
if (!global.isekai) {
|
|
|
|
|
global.isekai = {};
|
|
|
|
|
}
|
|
|
|
|
global.isekai.BgImage = BgImage;
|
|
|
|
|
|
