1
画像をアップロードして、選択した画像をプレビューし、サイズを変更してからサイズ変更したバージョンを表示できます。JavaScriptの画像アップロードとサイズ変更の問題
元のコードでは静的な画像のサイズを変更できるようになったので、この静的な画像を置き換える画像をアップロードする機能を追加しました。 （＃image-3）。
ただし、アップロードしてサイズを変更すると、サイズ変更されたバージョンに静止画像が表示されます。
私は完全にJavascriptで特定されておらず、助けていただければ幸いです！ありがとうございました。
$(document).ready(function() {
$('#image-3').rcrop({
minSize: [500, 500],
preserveAspectRatio: true,
preview: {
display: true,
size: [100, 100],
wrapper: '#custom-preview-wrapper'
}
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image-3').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$('#image-3').on('rcrop-changed', function() {
var srcOriginal = $(this).rcrop('getDataURL');
var srcResized = $(this).rcrop('getDataURL', 50, 50);
$('#cropped-original').append('<img src="' + srcOriginal + '">');
$('#cropped-resized').append('<img src="' + srcResized + '">');
});
}
}
$("#imgInp").change(function() {
readURL(this);
});
});body {
margin: 0;
padding: 0px
}
main {
min-height: 500px;
display: block
}
pre {
overflow: auto;
}
.demo {
padding: 20px;
}
.image-wrapper {
max-width: 600px;
min-width: 200px;
}
img {
max-width: 100%;
}
#image-4-wrapper .rcrop-outer-wrapper {
opacity: .75;
}
#image-4-wrapper .rcrop-outer {
background: #000
}
#image-4-wrapper .rcrop-croparea-inner {
border: 1px dashed #fff;
}
#image-4-wrapper .rcrop-handler-corner {
width: 12px;
height: 12px;
background: none;
border: 0 solid #51aeff;
}
#image-4-wrapper .rcrop-handler-top-left {
border-top-width: 4px;
border-left-width: 4px;
top: -2px;
left: -2px
}
#image-4-wrapper .rcrop-handler-top-right {
border-top-width: 4px;
border-right-width: 4px;
top: -2px;
right: -2px
}
#image-4-wrapper .rcrop-handler-bottom-right {
border-bottom-width: 4px;
border-right-width: 4px;
bottom: -2px;
right: -2px
}
#image-4-wrapper .rcrop-handler-bottom-left {
border-bottom-width: 4px;
border-left-width: 4px;
bottom: -2px;
left: -2px
}
#image-4-wrapper .rcrop-handler-border {
display: none;
}
#image-4-wrapper .clayfy-touch-device.clayfy-handler {
background: none;
border: 0 solid #51aeff;
border-bottom-width: 6px;
border-right-width: 6px;
}
label {
display: inline-block;
width: 60px;
margin-top: 10px;
}
#update {
margin: 10px 0 0 60px;
padding: 10px 20px;
}
#cropped-original,
#cropped-resized {
padding: 20px;
border: 4px solid #ddd;
min-height: 60px;
margin-top: 20px;
}
#cropped-original img,
#cropped-resized img {
margin: 5px;
}<script src="https://rawgit.com/aewebsolutions/rcrop/master/dist/rcrop.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type="file" id="imgInp" />
</form>
<div class="demo">
<div class="image-wrapper">
<img id="image-3" src="https://raw.githubusercontent.com/aewebsolutions/rcrop/master/demos/images/demo.jpg">
<div id="custom-preview-wrapper"></div>
<div id="cropped-resized">
<h3>Images resized (50x50)</h3>
</div>
<div id="cropped-original">
<h3>Images not resized (original size)</h3>
</div>
</div>
</div>