Редактируемое изображение Yii2

0

Можно ли сделать изображение редактируемым? У меня есть шаблон счета-фактуры, и я делаю данные магазина (логотип магазина, имя, адрес, адрес электронной почты и т.д.) Этого выставленного счета. Все работает нормально, за исключением того, что я не знаю, как сделать логотип магазина редактируемым.

Вот как я показываю логотип магазина:

<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

Как разрешить самому редактировать изображение? Или есть ли другие способы редактирования изображения? Ваши мысли будут очень полезны. Благодарю.

  • 0
    Когда вы говорите «редактируемый», вы имеете в виду, что вы хотите иметь возможность изменить изображение, или что вы хотите иметь возможность обрезать, изменять размер или изменять фактическое загруженное изображение?
  • 0
    Я хочу изменить изображение, а затем выполнить обрезку / изменение размера позже.
Теги:
image
yii2
widget

2 ответа

1
Лучший ответ

Я наконец-то понял. Я поставил это на мой взгляд:

<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, но у меня уже нет ссылки. Вот как это выглядит сейчас:

Изображение 174551

Поэтому, когда я нажимаю на изображение, появится окно для выбора другого изображения. Btw, все это просто интерфейс, поэтому мне не нужно снова загружать изображение и сохранять его в моей базе данных.

0

Могу ли я предложить использовать виджет ввода файлов Kartik? Это легко позволит вам загрузить новое изображение, чтобы заменить тот, который у вас есть.

Что касается редактирования изображения, это нужно сделать в передней части, для чего вам понадобится библиотека javascript или jquery, связанная с библиотекой Yii2 "Imagine". Там много, вам просто нужно найти тот, который подходит для того, что вы хотите отредактировать.

  • 0
    Здравствуй. Спасибо за ответ. Тем не менее, я думаю, что я решил эту проблему. Я только что опубликовал свой ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню