Я пытаюсь использовать загрузку изображений HTML5 с плагином JS для перетаскивания, кадрирования и соотношения.
Я могу заставить его работать так же, как запускать виджет на странице, которая позволяет мне увеличивать и перемещать его и т. Д. Но я застрял в том, чтобы сохранить изображение, есть много вариантов, но нет примеров. Для того, что я могу собрать, он отправляет данные в URL-адрес, который я могу определить со следующими данными в качестве примера. Я предполагаю, что должен прочитать это и использовать это, чтобы сохранить данные как изображение .jpg? Я думаю по правильному пути?
Извините, что расплывчато, но я не знаю, с чего начать и что добавить, поскольку я здесь новичок, но любая помощь будет принята с благодарностью.
Мой код на моей странице:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Image upload width drag and drop, crop and ratio</title>
<meta name="description" content="A HTML5 image upload plugin build with jQuery. Can drag and drop an image, crop it and change ratio." />
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="css/html5imageupload.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-xs-6">
<div class="dropzone" data-width="960" data-height="540" data-ghost="false" data-canvas="false" data-smaller="true" data-canvas-image-only="true" data-originalsize="false" data-url="" data-resize="true" style="width: 100%;">
<input type="file" name="thumb" />
</div>
</div>
<div class="col-xs-6">
<a name="ghost"></a>
<h2>Ghosting & Original size</h2>
</div>
</div>
<hr />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/html5imageupload.js"></script>
<script>
$('#retrievingfilename').html5imageupload({
onAfterProcessImage: function() {
$('#filename').val($(this.element).data('name'));
},
onAfterCancel: function() {
$('#filename').val('');
}
});
$('#save').html5imageupload({
onSave: function(data) {
console.log(data);
},
});
$('.dropzone').html5imageupload();
$( "#myModal" ).on('shown.bs.modal', function(){
$('#modaldialog').html5imageupload();
});
/*
$('#form').html5imageupload({
onAfterProcessImage: function() {
$(this.element).closest('form').submit();
}
});
$('form button.btn').unbind('click').click(function(e) {
e.preventDefault()
$(this).closest('form').find('#form').data('html5imageupload').imageCrop()
});*/
</script>
</body>
</html>
и пример того, что он публикует, если я прав: -
The $_POST variable
array(3) {
["name"]=>
string(2) "fg"
["title"]=>
string(2) "fg"
["thumb_values"]=>
string(112422) "{"data":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA==","name":"logo.png","imageOriginalWidth":225,"imageOriginalHeight":44,"imageWidth":2762,"imageHeight":540,"width":960,"height":540,"left":-901,"top":0}"
}
The JSON object
object(stdClass)#1 (10) {
["data"]=>
string(112262) "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA=="
["name"]=>
string(8) "logo.png"
["imageOriginalWidth"]=>
int(225)
["imageOriginalHeight"]=>
int(44)
["imageWidth"]=>
int(2762)
["imageHeight"]=>
int(540)
["width"]=>
int(960)
["height"]=>
int(540)
["left"]=>
int(-901)
["top"]=>
int(0)
}