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

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

logo/acct.jpg

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

Answer 1

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

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

Answer 2

我终于想通了。我把这个放在我的观点中：

<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);
}

我也在 Whosebug 上搜索了这个解决方案，但我已经没有 link。现在是这样的：

因此，当我单击图像时，window 会出现 select 另一幅图像。顺便说一句，所有这些都只是前端，所以我不需要再次重新上传图像并将其保存到我的数据库中。

Yii2 可编辑图像

Yii2 Editable Image

css

php

image

widget

yii2