JavaScript更改後上傳圖片

我有一個Drupal-7網站，並且我已經創建了一個模塊，您可以在該模塊上傳圖像並在提交圖像之前預覽圖像。JavaScript更改後上傳圖片

<img id="blah" src="sites/all/themes/my_theme/logo.png" alt="default image" />

然後，我有一些按鈕，調用JavaScript函數的onclick和動態改變上傳圖像的邊界。

現在，我想要的是，當用戶上傳圖片時，他提交表格，我上傳他的圖片與他選擇的邊框。
我該如何做到這一點？
提交按鈕和圖片上傳通過我的.module文件中的php表單調用

來源

2016-04-13 Argiris A

這是很常見的算法，在互聯網上有很多例子，支持的瀏覽器是10 ie和所有的現代瀏覽器。

1. Convert user selected file to image (img.src = URL.createObjectURL(userSelectedFile)) 
2. Load image to html5 canvas (canvas.getContext("2d").drawImage(image,0,0,width, height)) 
3. Draw Border on html5 canvas (canvas.getContext("2d").drawRectangle(0,0, width, height)) 
4. Convert canvas to blob (canvas.toBlob(function(blob){/** use new blob **/})) 
5. Upload this blob to server by xhr or xhr + FormData

來源

2016-04-22 10:52:37

您必須在服務器端處理圖像（添加邊框）。當用戶提交表單時，他向服務器端發送關於他選擇的邊界的信息。並利用這些信息，你必須通過ImageMajick改變上傳圖像或等

來源

2016-04-13 08:55:53

imagemagick代碼在提交按鈕表單創建時進入.module文件中，看起來非常有用，但我不知道如何實現它。 –

既然你有一個JavaScript函數的onclick會動態變化，上傳的圖片

function borderColor() { 
var color; 
// change border color 
$("#borderColorPickID").val(color); // pass color to form 
}

的邊境通行證的十六進制顏色值或顏色名稱「綠色，藍色」等在一個隱藏的輸入。

<img id="blah" src="sites/all/themes/my_theme/logo.png" alt="default image" /> 
<input type="hidden" value="" name="borderColorPick" id="borderColorPickID" />

綁定圖像名稱和顏色值，服務器端，以相應地重命名圖像。

所以，如果上傳的圖片是upload.png和顏色值＃00fc00重命名並保存圖像爲上傳___ 00fc00.png

現在，所有你需要的是一個JavaScript函數來獲取邊框顏色從圖像的新名稱創建邊框並將其應用於圖像。

function applyBorder(imageName) { 
//// get color from image name 
//// apply border to image 
}

來源

2016-04-19 19:57:53

不幸的是，我沒有顏色作爲邊框。我使用CSS邊框圖像。你的答案也適用於這種情況嗎？ –

是的，如果它是唯一的，你可以傳遞「border-image」名稱而不是顏色。您可以使用jQuery更改css border-image屬性 –

這是一個快速解決方法，可以在不需要將有關圖像和邊界的信息存儲到drupal安裝中的數據庫的情況下執行所需操作。 –

JavaScript更改後上傳圖片

回答

相關問題