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可編輯圖像

回答

相關問題