上傳圖像然后使其可移動和可調整大小

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 調整圖像庫之類的庫用於生產用途，以便將其存儲在后端。