0
選択した画像を切り抜くにはどうすればよいですか？jQueryイメージを選択してトリミングする
私は、現在の画像をカルーセル内の画像に置き換えるかどうかを選択できるウェブページを作成しました。私はそれを期待して、私は、ZoomAvatarPictureが交換されるカルーセルの画像をクリックしてください
<div class="rcrop-wrapper">
<img id="ZoomAvatarPicture" src="Pictures/PhotoAlbum/203.jpg" height="200" />
</div>
<div class="owl-carousel-v4 margin-bottom-40">
<div class="owl-slider-v4">
<div class="item">
<img src="Pictures/PhotoAlbum/90.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/90.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/22.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/22.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/21.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/21.jpg"/>
</div>
</div>
。新しく選択したZoomAvatarPicture画像を切り抜きたい。これは私がrcropのために追加されたコードである
）私は第三のソフトウェアをクロップパーティ（例えばjQueryのrcropとimgAreaSelect）を試してみたが、そのトリミングされた画像は、元画像、203.jpgのとおりです。
jQuery(document).ready(function() {
$('#ZoomAvatarPicture').rcrop({
full: true,
preserveAspectRatio: true,
minSize: [50, 50],
inputsPrefix: '',
grid: false,
});
$('#ZoomAvatarPicture').on('rcrop-changed', function e() {
var srcResized = $(this).rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
})
});
そして、私はrcropとimageSelectで同じ結果を得たので、私はトリミングされた画像
<div id="cropped-resized">
<h3>Images resized (50x50)</h3>
</div>
を保持するdivが、それは問題がソフトウェアではなく、何ができるかの私の理解ではないと信じて私をリードしていましたjQueryで
はまた、rcropのデモページはこちらです：http://www.jqueryscript.net/demo/Responsive-Mobile-friendly-Image-Cropper-With-jQuery-rcrop/
私はこのコード
function rcrop_Avatar()
{
var srcResized = $('#ZoomAvatarPicture').rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
alert('src = ' + $('#ZoomAvatarPicture').attr('src'));
}
function resetListener()
{
$('#ZoomAvatarPicture').off(onclick, 'rcrop-changed', rcrop_Avatar);
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
rcrop_Avatar();
}
jQuery(document).ready(function() {
App.init();
App.initScrollBar();
Datepicker.initDatepicker();
OwlCarousel.initOwlCarousel();
CirclesMaster.initCirclesMaster1();
StyleSwitcher.initStyleSwitcher();
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
$('#ZoomAvatarPicture').on('rcrop-changed', rcrop_Avatar);
});
を追加し、これにHTMLを変更した：私はまだだ
<div class="item">
<img src="Pictures/PhotoAlbum/Work/90.jpg" onclick="$('#CurrentAvatarPicture').attr('src','Pictures/PhotoAlbum/Work/90.jpg');resetListener();"/>
</div>
同じ結果が得られます。 （すなわち、トリミングされた画像は、新たに選択された画像ではなく元の画像である）。
プロセス全体がブートストラップ方式です。私はこのルートを忘れて、すべてをiframeのタブ付きのシリーズに入れるべきだと思っています。
？あなたがそこから評価しようとすると、コンソールには何が表示されますか？ – LordNeo
@LordNeo PictureIDを削除しました。それは私のデータベースのテーブルのフィールドでした。私は問題を書き直しました。 –
あなたが（rcropまたはimgAreaSelectのいずれかを使用して）あなたがそれを修正するのを助けることができるように使用しようとしているコードを投稿してください。 – LordNeo