上传图片，然后使其可移动并调整大小

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

在$(document).on('click', '.block-add', function () {..}回调中包括reader.onload()内部的代码。

Answer 2

您要执行的操作有些混乱。

首先，确定您要做什么？如果是我，我也会将Comman js或Pica resize image lib之类的库用于生产，以便也将其存储在后端。