загрузить изображение, а затем сделать его подвижным и изменять его размер

Question

Я пытаюсь сделать загрузчик изображений, а после загрузки сделать его подвижным и изменять его размер. У меня есть 2 сценария с jquery, я могу загрузить изображение и переместить / изменить размер другого, но не могу использовать его вместе.

Загрузчик:

<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>

<div class="block">
<div id="background">
<img id="bg" src="" alt="" width="auto" height="50%"/>
</div>
</div>

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#bg')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}

сделать другое изменяемый и изменяемый размер изображения:

$(document).ready(function () {
$(document).on('click', '.block-add', function () {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});

Он работает отдельно, но если я хочу сделать это для загруженного изображения, изображение просто не появляется.

Answer 1

операция, которую вы хотите сделать, немного сбивает с толку.

Прежде всего, решите, что вы собираетесь делать? Если бы это был я, я бы использовал библиотеки типа Comman js или Pica с измененным размером изображения lib для производственного использования, чтобы хранить его также на серверной части.

Answer 2

Включите код, который находится внутри $(document).on('click', '.block-add', function () {..} в reader.onload() обратном вызове.