0
border-radiusが50%の<img>タグの画像の中心を円の画像として表示しようとしています。問題は、imageがURLの代わりにfirebase storageファイルから表示されることです。ファイアベースのJavaScriptを使用したセンター画像
私は画像の中心を示すために、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" />を私は何私であるこの結果を、取得
しかし、私はfirebase（からの画像を使用する場合は、完全である：欲しいです同じ画像がところで）その後、私はこの結果が得られます。また、上記URLの画像を作るに使用された画像を（）を中心に使用され、また、JavaScriptがここ
がFirebaseとコードです：
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に保存するボタンです。これらの関数は機能していますが、問題は、firebaseでsrcを受け取る代わりに、imgタグの中でsrcを使用しているときと同じように、境界半径の中心として画像の中心を表示するスクリプトです。 – FeReTu