Yii2 可编辑图像答案

【问题标题】：Yii2 Editable ImageYii2 可编辑图像
【发布时间】：2015-03-25 17:01:30
【问题描述】：

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

这是我显示商店徽标的方式：

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

现在，我用 INPUT_FILEINPUT 尝试了 Kartik 的 Editable 小部件，但它只显示图像路径：

<?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

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

【问题讨论】：

当您说“可编辑”时，您的意思是希望能够更改图像，还是希望能够裁剪、调整大小或更改实际上传的图像？
我想改变图像然后实现裁剪/调整大小。

标签： php css image widget yii2

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

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

【讨论】：

【解决方案2】：

我可以建议您使用Kartik's file input 小部件吗？这将很容易让您上传一张新图片来替换您拥有的图片。

至于编辑图像，这需要在前端完成，为此您需要一个 javascript 或 jquery 库，连接到 Yii2 的“Imagine”库。那里有很多，您只需要找到适合您要编辑的内容即可。

【讨论】：

嗨。感谢您的回复。不过，我想我已经解决了这个问题。我刚刚发布了我的答案。