Можно ли сделать изображение редактируемым? У меня есть шаблон счета-фактуры, и я делаю данные магазина (логотип магазина, имя, адрес, адрес электронной почты и т.д.) Этого выставленного счета. Все работает нормально, за исключением того, что я не знаю, как сделать логотип магазина редактируемым.
Вот как я показываю логотип магазина:
<img src="<?php echo $model->storeLogo; ?>" width="150"><br><br>
Теперь я попробовал Kartik Editable widget с INPUT_FILEINPUT
но он отображает только путь к изображению:
<?php
echo Editable::widget([
'model' => $model,
'name'=> 'storeLogo',
'value' => $model->storeLogo,
'inputType' => Editable::INPUT_FILEINPUT,
'header' => 'Logo',
'size'=>'md',
'options' => ['class'=>'form-control']
]);
?>
Пример вывода виджета выше:
Логотип /acct.jpg
Как разрешить самому редактировать изображение? Или есть ли другие способы редактирования изображения? Ваши мысли будут очень полезны. Благодарю.
Я наконец-то понял. Я поставил это на мой взгляд:
<div class="fileUpload kv-editable-value kv-editable-link">
<span><img class="pull-left" src="<?php echo $model->storeLogo; ?>" width="150" height="150" id="output"></span>
<input type="file" accept="image/*" onchange="loadFile(event)" class="upload"/>
</div>
Затем я добавил javascript:
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
И стиль:
.fileUpload {
position: relative;
overflow: hidden;
margin: 0 auto 0;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
height: 150px;
filter: alpha(opacity=0);
}
Я также искал это решение поверх stackoverflow, но у меня уже нет ссылки. Вот как это выглядит сейчас:
Поэтому, когда я нажимаю на изображение, появится окно для выбора другого изображения. Btw, все это просто интерфейс, поэтому мне не нужно снова загружать изображение и сохранять его в моей базе данных.
Могу ли я предложить использовать виджет ввода файлов Kartik? Это легко позволит вам загрузить новое изображение, чтобы заменить тот, который у вас есть.
Что касается редактирования изображения, это нужно сделать в передней части, для чего вам понадобится библиотека javascript или jquery, связанная с библиотекой Yii2 "Imagine". Там много, вам просто нужно найти тот, который подходит для того, что вы хотите отредактировать.