Yii2可编辑图像

是否可以编辑图像？我有发票模板，并且可以编辑该发票的商店详情（商店徽标，名称，地址，电子邮件等）。除了我不知道如何让商店徽标可编辑以外，一切正常。Yii2可编辑图像

下面是如何显示存储标志：

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

现在，我试图卡尔蒂克的可编辑的插件与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'] 
    ]); 
?>

实施例输出：

logo/acct.jpg

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

来源

2015-03-25 kaynewilder

当你说'可编辑'时，你的意思是你想要改变图像，还是希望能够裁剪，调整大小或更改实际上传的图像？ – 2015-03-25 06:37:45

我想改变图像然后实施裁剪/调整大小。 – kaynewilder 2015-03-25 07:19:40

我终于明白了。我把这个在我看来：

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

我搜索这个解决方案在计算器很好，但我已经穿上”没有链接。下面是它现在的样子：

enter image description here

所以，当我在图像上单击，会出现一个窗口，我选择另一幅图像。顺便说一句，所有这些只是前端，所以我不需要重新上传图像并将其保存到我的数据库。

来源

2015-03-25 09:01:30 kaynewilder

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

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

来源

2015-03-25 08:45:57

嗨。感谢您的回应。不过，我想我已经解决了这个问题。我刚刚发布了我的答案。 – kaynewilder 2015-03-25 09:08:33

Yii2可编辑图像

回答

相关问题