使用暗室js對多幅圖像進行圖像裁切和旋轉

我使用darkroom.js來裁剪和旋轉客戶端的圖像。它的工作正常單個圖像，但我希望它爲多個圖像。任何人都可以爲此目的幫助解決這個問題或任何其他參考js。使用暗室js對多幅圖像進行圖像裁切和旋轉

var dkrm = new Darkroom('#target', { 
    // Size options 
    minWidth: 100, 
    minHeight: 100, 
    maxWidth: 600, 
    maxHeight: 500, 
    ratio: 4/3, 
    backgroundColor: '#000', 

    // Plugins options 
    plugins: { 
    //save: false, 
    crop: { 
     quickCropKey: 67, //key "c" 
     //minHeight: 50, 
     //minWidth: 50, 
     //ratio: 4/3 
    } 
    }, 

    // Post initialize script 
    initialize: function() { 
    var cropPlugin = this.plugins['crop']; 
    // cropPlugin.selectZone(170, 25, 300, 300); 
    cropPlugin.requireFocus(); 
    } 
});

下面是HTML

<div class="figure-wrapper"> 
     <figure class="image-container target"> 
     <img src="./images/domokun-big.jpg" alt="DomoKun" class="edit-img" id="target"> 
     </figure> 
    </div> 
    <div class="figure-wrapper"> 
     <figure class="image-container target"> 
     <img src="./images/domokun-big.jpg" alt="DomoKun" class="edit-img" id="target"> 
     </figure> 
    </div>

我也改變了id="target"到class="target"但它並不適用於多個

Extensions url

來源

2016-05-30 S Rana

工作這實際上不是你的問題的答案，但是我對這個主題的研究很少。

首先，我不能讓Darkroom使用圖像的類屬性。有js錯誤 - 看來Darkroom使用給定的選擇器（示例中的id）發出http請求來獲取dom元素。如果你向他提供Jquery選擇中的類的當前元素，它將不起作用。

我已經做了一些小技巧來處理這種情況。你可以在這個回購中看到它（由標準Darkroom演示製作）：https://github.com/renta/darkroomtest

正如你所看到的，這個決定有一些麻煩。它看起來像一個骯髒的黑客和用戶改變了他的想法圖像編輯 - 他可以關閉Darkroom面板後點擊其保存按鈕。

另外我還有第二種方法來解決這個任務。如果有人對此感興趣，我可以將代碼公開回購。

的主題有：

你有幾個圖像畫廊;
點擊當前圖像後，會出現一個帶有此圖像或其原始圖像（如果圖像爲預覽圖像）的開啓模式窗口。對於模態窗口，我使用這個庫https://github.com/samdark/the-modal（不是廣告:)）。它能夠在打開模式窗口時自定義函數，我可以在其中放置圖像並啓動Darkroom lib。
你用暗房保存圖像並關閉模式窗口。之後，您可以輕鬆更新圖庫中的圖像，以便用戶在關閉模式後可以看到結果。

該變體是可行的並且沒有大規模編輯方法的問題。

希望，這個答案會幫助別人。

來源

2016-07-23 08:53:47

使用暗室js對多幅圖像進行圖像裁切和旋轉

回答

相關問題