php - Yii2 可编辑图像

Question

是否可以使图像可编辑？我有一个发票模板，并且可以编辑该发票的商店详细信息(商店 Logo 、名称、地址、电子邮件等)。一切正常，只是我不知道如何使商店 Logo 可编辑。

这是我显示商店 Logo 的方式:

<img src="<?php echo $model->storeLogo; ?>" width="150"><br><br>

现在，我使用 INPUT_FILEINPUT 尝试了 Kartik 的可编辑小部件，但它只显示图像路径:

<?php 
    echo Editable::widget([
        'model' => $model,
        'name'=> 'storeLogo', 
        'value' => $model->storeLogo,
        'inputType' => Editable::INPUT_FILEINPUT,
        'header' => 'Logo',
        'size'=>'md',
        'options' => ['class'=>'form-control']
    ]);
?>

上面小部件的示例输出是:

logo/acct.jpg

如何让图像本身可以编辑？或者还有其他方法可以编辑图像吗？你的想法会有很大帮助。谢谢。

Answer 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 上搜索了这个解决方案，但我已经没有链接了。这是现在的样子:

所以当我点击图片时，会出现一个窗口让我选择另一张图片。顺便说一句，所有这些都只是前端，所以我不需要再次重新上传图像并将其保存到我的数据库中。