使用Ajax上傳DOM圖像 - 將圖像轉換爲文件？

我需要進行圖片上傳。在上傳圖片之前，我從文件輸入中獲取圖片，使用畫布調整圖片的大小，然後將結果保存爲DOM中的圖片元素。如何將我的圖像對象轉換爲文件對象，以便我可以使用ajax上傳它？使用Ajax上傳DOM圖像 - 將圖像轉換爲文件？

編輯：

這裏是我做的：

$.fitIn = function(size, bbox) { 

    var r = size.w/size.h; 

    if(r > bbox.w/bbox.h) { 
     var newW = bbox.w, 
      newH = newW/r; 

    } else { 
     var newH = bbox.h, 
      newW = newH * r; 
    } 

    return { w: newW, h: newH }; 
}; 

$.resizeImage = function(image, newW, newH, outputFormat) { 

    if(null == outputFormat) { 
     var temp = image.src.split('.'); 
     outputFormat = temp[temp.length - 1]; 
    } 

    var canvas = document.createElement('canvas'); 
    canvas.width = newW; 
    canvas.height = newH; 

    var context = canvas.getContext('2d'); 
    context.drawImage(image, 0, 0, newW, newH); 

    var newImage = document.createElement('img'); 
    newImage.src = canvas.toDataURL('image/' + outputFormat); 

    return newImage; 
}; 

$.createThumb = function(image) { 

    var newSize = $.fitIn(
     { w: image.width, h: image.height }, 
     { w: THUMB_W, h: THUMB_H } 
    ); 

    return $.resizeImage(image, newSize.w, newSize.h, THUMB_FORMAT); 
};

然後：

var originalImage = document.getElementById('testImage'); 
var newImage = lwf.resizeImage(originalImage, 480, 270);

（$不是jQuery的）

感謝您的幫助:)

來源

2013-01-04 Virus721

告訴我們你做了什麼？ –

編輯我的帖子我的帖子與代碼:) – Virus721

你c使用canvas.toDataURL（）來獲取base64編碼的字符串，如果它。將其發送到服務器，解碼並將其保存爲文件。

來源

2013-01-04 19:34:00 lucassp

感謝您的回答。將圖像保存爲字符串是一種明確的方法嗎？ – Virus721

這是通過AJAX獲取畫布圖像並將其發送到服務器的唯一方法。在服務器上，您只需將其解碼並保存即可。 – lucassp

canvas.toDataURL（）將爲您提供一個像「data：image/png; base64，ABC123 ...」一樣的字符串。例如，在PHP中，如果使用正則表達式或strtok或其他方法提取「ABC123 ...」部分，則只需執行'file_put_contents（「$ path.png」，base64_decode（「ABC123 ...」））; '和圖像是一個正常的PNG文件 – kendsnyder

使用Ajax上傳DOM圖像 - 將圖像轉換爲文件？

回答

相關問題