Yii2可编辑图像

Question

是否可以制作图像？我有一个发票模板，我可以编辑该发票的商店详细信息（商店标识，姓名，地址，电子邮件等）。除了我不知道如何使商店徽标可编辑外，一切正常。

以下是我展示商店徽标的方式：

<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']
    ]);
?>

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

  

标志/ 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上搜索了这个解决方案，但我还没有链接。以下是它现在的样子：

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

Answer 2

我建议您使用Kartik's file input小部件吗？这样可以轻松上传新图像以替换您拥有的图像。

至于编辑图像，这需要在前端完成，你需要一个javascript或jquery库，连接到Yii2的'Imagine'库。那里有很多，你只需要找到一个适合你想要编辑的那个。