將圖像轉換爲Base64包括其邊框圖像樣式

-1

我正在開發一個應用程序，允許用戶裁剪圖像併爲圖像選擇邊框。我想知道的是，如果它有可能通過JavaScript將帶有邊框樣式的圖像轉換爲base64？將圖像轉換爲Base64包括其邊框圖像樣式

var img = new Image(); 
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; 
var pat = canvasContext.createPattern(img,"repeat"); 
canvasContext.strokeStyle = pat; 
canvasContext.lineWidth = 5; 
canvasContext.strokeRect(-(this.rotatedOffset.x * exportZoom), -(this.rotatedOffset.y * exportZoom), canvas.width, canvas.height);

上面的代碼只是在畫布上添加了一個黑色邊框。

現在，我想要做的是添加一個圖像/圖案作爲邊框到畫布。

更新：根據@ K3N的回答，我創建了裁剪圖像的新畫布，並增加了圖案的邊框。爲我的需求工作。

來源

2017-03-09 Ricky

絕對有可能。您可以將邊框和圖像繪製到畫布上（您可能需要創建具有考慮邊框尺寸的畫布上下文），然後使用類似方法將其導出到Cropit。 – Dan

感謝您的回覆。我的主要問題是需要添加一個CSS邊框圖像到裁剪後的圖像並導出到base64。我可以在畫布上添加一個簡單的邊框，但是我想添加更復雜的圖案作爲邊框。我將如何實現這一目標？我更新了我的問題。 – Ricky

在CSS中這樣做沒有意義。你將不得不模仿CSS樣式（因爲你不能將位圖直接保存在DOM元素或樣式之外），並且仍然將其傳輸到畫布（包含所有包含的挑戰），因此只需將邊框直接添加到畫布而不需要圍繞使用CSS的大圓圈。 – K3N

我會建議直接用帆布做這個。由於DOM + CSS不容易作爲位圖傳輸到畫布中，因此您可以直接繪製到畫布而不是模擬CSS樣式，最後在畫布上進行繪製。

您可以在畫布中使用圖案，但等待圖像加載很重要。圖像加載是異步的，在調用createPattern()時，圖像可能不會被加載和解碼，這將創建一個空的圖案。只需使用加載事件來確保：

var img = new Image(), pat; 
img.onload = function() {       // wait for image to load 
    pat = canvasContext.createPattern(this, "repeat"); // image is ready (here "this") 
    canvasContext.strokeStyle = pat; 
    canvasContext.lineWidth = 5; 
    canvasContext.strokeRect(-(this.rotatedOffset.x * exportZoom), -(this.rotatedOffset.y * exportZoom), canvas.width, canvas.height);  
    // next step (if any) from here ... 
}; 
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';

當然，這將適用於在應用邊框之前繪製到畫布上的圖像。出於這個原因，建議您預先加載畫布所需的所有圖像，以確保正確的繪圖順序。

來源

2017-03-09 19:47:12 K3N

謝謝@ K3N，它現在的工作:)我注意到的是圖像不與邊界寬度成正比。有沒有辦法做到這一點？換句話說，使que模式的圖像調整到邊框寬度？例如：http://imgur.com/sV35utX – Ricky

@Ricky較新的瀏覽器支持setTransform模式對象，它允許你f.ex.在應用之前縮放模式。你可以嘗試'var f = dstWidth/img.width; pat.setTransform（f，0,0，f，0,0）;'（如果需要的話，對於y）。如果瀏覽器不支持，則必須以所需的圖案大小製作屏幕外畫布，然後按比例繪製圖像，然後將該畫布用作圖案源。 – K3N

我試圖使用setTransform（）函數，但我收到以下錯誤：.setTransform不是一個函數（我在Chrome上測試它）。無論哪種方式，我已經標記你的答案是正確的，因爲它解決了我的主要問題:) – Ricky

嘗試使用Croppie，它是一個jQuery插件，它提供了一幅base64裁剪後的圖像。

https://foliotek.github.io/Croppie/

我沒有非的jQuery版本的權利，但Croppie是體面的。

來源

2017-03-09 13:53:57

感謝您的回覆。我試過這個插件，但無法使用AngularJS正常工作，所以我使用了Cropit。儘管如此，我的問題不是圖像裁剪插件，但如何將一個圖像的CSS邊框圖像樣式轉換爲base64。更新我的問題。 – Ricky

@ricky - 抱歉，我知道，結合croppie文件是有點麻煩，但是，我知道有一個''爲NG-1.4.x' –

ngcroppie'指令我試過指令，但版本1.6.x似乎存在一些問題。我將仔細看看未來項目的模塊:) – Ricky

將圖像轉換爲Base64包括其邊框圖像樣式

回答

相關問題