JavaScript for Firebase的中心图像

问题描述：

我试图在<img>标记中显示一个图像的中心，该标记的border-radius为50%，对于圆形图像。问题是image显示在firebase存储文件中，而不是url。JavaScript for Firebase的中心图像

我与JavaScript代码试图显示图像的中心，它工作得很好，如果我这样做：

.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    overflow: hidden 
 
} 
 

 
.wh { 
 
    height: 100%!important 
 
} 
 

 
.ww { 
 
    width: 100%!important 
 
}

<div class="box" style="border-radius:50%;"> 
 
    <img src="1.jpg" /> 
 
</div> 
 
<input type="file" id="fileButton" /> <input type="submit" value="Upload" id="uploadButton" />

我得到这样的结果，这是我想：

但是如果我使用火力的图像（这是完全的相同的图像顺便说一句），那么我得到这样的结果：

这里是火力地堡代码中使用，并且还JavaScript的用于定心图像（其也用于制造上文所述URL图像）：

var fileButton = document.getElementById('fileButton'); 
 
var uploadButton = document.getElementById('uploadButton'); 
 

 
fileButton.addEventListener('change', function(e) { 
 
    var file = e.target.files[0]; 
 

 
    //Create a storage ref in firebase 
 
    var storageRef = firebase.storage().ref('test/profilePic.jpg'); 
 

 
    console.log(file.height); 
 

 
    uploadButton.addEventListener('click', function(e) { 
 
    storageRef.put(file).then(function() { 
 
     window.open('profil.php?error=1', '_top'); 
 
    }); 
 

 

 
    }); 
 
}); 
 

 
var storage = firebase.storage(); 
 
var storageRef = storage.ref(); 
 
var spaceRef = storageRef.child('test/profilePic.jpg'); 
 

 
storageRef.child('test/profilePic.jpg').getDownloadURL().then(function(url) { 
 

 
    var test = url; 
 
    document.getElementById('profilePicture').src = test; 
 

 
}).catch(function(error) { 
 

 
}); 
 

 

 

 
$('.box').each(function() { 
 

 

 
    //set size 
 
    var th = $(this).height(), //box height 
 
    tw = $(this).width(), //box width 
 
    im = $(this).children('img'), //image 
 
    ih = im.height(), //inital image height 
 
    iw = im.width(); //initial image width 
 
    if (ih > iw) { //if portrait 
 
    im.addClass('ww').removeClass('wh'); //set width 100% 
 
    } else { //if landscape 
 
    im.addClass('wh').removeClass('ww'); //set height 100% 
 
    } 
 
    //set offset 
 
    var nh = im.height(), //new image height 
 
    nw = im.width(), //new image width 
 
    hd = (nh - th)/2, 
 
    wd = (nw - tw)/2; 
 
    if (nh < nw) { //if portrait 
 
    im.css({ 
 
     marginLeft: '-' + wd + 'px', 
 
     marginTop: 0 
 
    }); //offset left 
 
    } else { 
 
    im.css({ 
 
     marginTop: '-' + hd + 'px', 
 
     marginLeft: '0px' 
 
    }); //offset top 
 
    } 
 
});

.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    overflow: hidden 
 
} 
 

 
.wh { 
 
    height: 100%!important 
 
} 
 

 
.ww { 
 
    width: 100%!important 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box" style="border-radius:50%;"> 
 
    <img id="profilePicture" /> 
 
</div> 
 
<input type="file" id="fileButton" /> <input type="submit" value="Upload" id="uploadButton" />

有谁知道如何解决这一问题？

是什么'uploadButton'，什么是'fileButton'在你的代码？ – Dekel

该代码段未运行。添加jQuery，看看你是否没有遗漏任何东西。 – Juan

@Dekel我已添加按钮。它只是一个文件按钮和一个将图像保存到firebase的按钮。这些函数正在工作，问题在于脚本应该将图像的中心显示为边框半径的中心，就像我在img标记中使用src时所做的那样，而不是使用firebase接收src。 – FeReTu

答

这里可能有几个问题。

您可能会遇到异步问题（在Firebase返回数据之前，您正在设置JavaScript样式）。
你应该有你的CSS样式。
千万不要使用！重要，明白和使用CSS specificity。

如果你正确设置你的CSS，它会为你处理。我拿出firebase和许多其他不必要的部件来保持它的清洁。这个问题要么是异步问题，要么不是正确使用CSS。我使用JavaScript模拟了setTimeout的异步更改。

setTimeout(function(){ 
 
    document.getElementById("imageid").src="http://www.threeriversschools.org/pages/district-blog/image/section-image/soccer-194.jpg"; 
 
},3000);

.box{ 
 
height:100px; 
 
width:100px; 
 
overflow:hidden 
 
} 
 
.box img{ 
 
    width : 100%; 
 
    height : 100%; 
 
}

<div class="box" style="border-radius:50%;" > 
 
<img id="imageid" src="http://cdn-mf1.heartyhosting.com/sites/mensfitness.com/files/styles/wide_videos/public/soccer-kick-goal-kickoff-1280.jpg?itok=z-E-ZQem" /> 
 
</div>

JavaScript for Firebase的中心图像

相关推荐