Menampilkan sebagian gambar menggunakan css tetapi membuatnya responsif dengan img-responsive
Saya telah membuat sistem di mana pengguna akan mengunggah gambar, ukurannya diubah menjadi lebar tertentu dan kemudian pengguna dapat memotong gambar (sebelumnya menggunakan imgAreaSelect tetapi ditingkatkan ke Jcrop untuk menambahkan penggunaan seluler).
Saya memiliki ini semua bekerja dengan baik. Setelah pengguna memindahkan pemilih Jcrop ke tempat yang mereka inginkan dan memilih tombol simpan, saya meminta jQuery menulis beberapa CSS mewah untuk menunjukkan bagian gambar yang diinginkan pengguna (sisanya disembunyikan overflow: hidden
) ditambah lebih banyak formulir untuk menambahkan kredit foto dan lainnya informasi tentang foto.
Ini sekali lagi, berfungsi dengan baik ... di desktop. Gambar berukuran penuh di perangkat seluler dan tidak responsif sehingga Anda tidak dapat melihat sebagian besar foto. Saya telah mencoba membungkus kepala saya di sekitar ini untuk sementara waktu sekarang (selain menonaktifkan foto pratinjau). Apakah ada cara agar metode saya responsif?
$(document).on('click','#save-image',function() { //$('img.mobimg').imgAreaSelect({remove:true});
//$('#the-image').fadeOut(); //Write the preview image using variables from image selector. $('#the-image').fadeOut().html('<div align="center"><div id="img" style="position: relative; width: '+$('#w').val()+'px; height: '+$('#h').val()+'px; overflow: hidden;">'+
'<img src="'+theimg+'" id="finished-image" style="position: absolute; top: -'+$('#y1').val()+'px; left: '+$('#x1').val()+'px;">'+
'</div></div><hr>').fadeIn(function() { $('#finished-image').addClass('img-responsive'); }); // Fade in form to allow user to finish adding details. $('.form-finish').fadeIn();
// Fade in main form submit button to allow user to submit the completed form.
$('.panel-footer').fadeIn(); // Final Submit Button to Fade In
jcrop_api.destroy();
});
Jawaban
Menggunakan CSS untuk memangkas gambar berfungsi dengan baik untuk desktop yang lebih lebar dari gambar itu sendiri tetapi ketika mengubah ukuran gambar secara responsif hampir tidak mungkin karena lebar dan tinggi gambar yang selalu berubah tergantung pada perangkat.
Sebagai gantinya; Saya beralih ke JavaScript yang benar-benar memangkas gambar ke lebar dan tinggi dan lokasi yang diinginkan, ditetapkan oleh Jcrop yang kemudian tidak memiliki masalah menggunakan img-responsive
untuk mengubah ukuran gambar ke perangkat seluler.
function showPart(img, offsetTop, offsetLeft, width, height){
var src = img.src;
$(img).replaceWith("<canvas id='cnvs' class='img-responsive' style='max-width:100%;'></canvas>");
var canvas = document.getElementById('cnvs');
canvas.height = height;
canvas.width = width;
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
ctx.drawImage(this, offsetLeft, offsetTop, width, height, 0, 0, width, height);
};
img.src = src;
}
Jawaban asli yang berisi cuplikan ini: https://stackoverflow.com/a/36436245/956106