JavaScript - 獲取對象HTMLImageElement而不是base64字符串

這是對我之前的問題的延續，但問題是新的，並且該問題的解決方案沒有幫助。這是一個新問題。JavaScript - 獲取對象HTMLImageElement而不是base64字符串

這裏的鏈接我剛纔的問題，我問怎麼畫布轉換爲圖像：javascript- unable to convert canvas to image data

而且我希望能獲得編碼的圖像的字符串的base64，我可以通過發送到PHP服務AJAX調用和PHP服務將把它轉換爲圖像並將其移動到指定的目錄。

功能，其將畫布圖像

function convertCanvasToImage(canvas) 
{ 
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png"); 
    return image; 
}

這是我創建的形式：我想console.log()是帆布返回的圖像

var url = 'url to php service'; 
var file = dataURL; //this is the image url that i'm sending 
console.log(file); 

var formdata = new FormData(); 
formdata.append("base64image", file); 
formdata.append('csrf_test_name',csrf_token); 
var ajax = new XMLHttpRequest(); 
ajax.addEventListener("load", function(event) { 
    uploadcomplete(event); 
}, false); 
ajax.open("POST", url); 
ajax.send(formdata);

，這是我得到什麼：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAgAElEQVR4nGzbZ3Mba5au6fqvJ2JiTs/pPtVV20j0sOm9T3iARqI3IOi9SIoGHqATJe29q/v8jXs+QMWeHT0fnkgGyUgCiRfIi2ut9y9OqYGZ3yKqHWHlttFiCz1nE8Q+XuDiuSb5XEBccYgrDv6si5ZTMOZMzHkLMS6gFspI8TxiOEfkfCS0P1AM1lmcPaJYPcbyNvDDHUqVU5zdTaS1j4hFm3Erg5bxCK0KxXiWUm6OcLaAW46xCzZBNcAOF3FzK8TBIoG7QC7v4AUalqdRquVQZxeQa/PYc2vYc2uUnWUCuYovR+TMEoEVY8oOnhES2jlKVo2au0DZXiVSF/DciDDMUyjOEuerGGqJYm6VaG6DhBahOyW8eB4rrBGVl5BmZ5FmZ1HyLlrJZ37ep1jUyXseOdel7FWpBrMUgwXy3ixGJGLlZLRIxipoh...Hd7sRkseD2ebFF/Bj9btUYEnDzGHRy57XgcDiw2WyYDPdYzFp0dgvXBh0XeiPmYBit2YzBbufR4uDR4kBrd3BtNHHvs6ty3HJru+beoUXn0vPgNaD1Gbl1udFYbWhMFlU2E7du+zTmRWt75MGqw+axYvNYebRpMbmNaF0OzEE/+nQAXcrHpeBAk7BzJTm4zXg4Kdq4afq4nGS4fslyO85x1IizEbWwJzo5Lzu4bfk560Y5agY57SfYawS57sS4akfRFJxc5B1cl7XcVh85Gfo47HvYaFvY6ds5Hvg5GQY4bUY5rofQtAUumgk0XVXXozSXQxX+rnsSt20nmrqFG+URbdHMVSOGphbmrCNw1hG46Dg4aaoxP0c1B0dVD7sFO0cFG0cFG+fKNSeyhjPhBI10zmnqnPP0xRQAD1Pqs7CSV7VV3mCztM5Rbpnz8joXHSPXfQuXPQ9XAy9noxgXE4HT/8pz8X/L/D+QyAVhXuteXgAAAABJRU5ErkJggg==">

它有圖像標籤。也許是因爲那個;當我將它傳遞給PHP服務時，它無法將其轉換。這是它返回的我，當我調試

object HTMLImageElement

我試圖上述圖像標記轉換使用功能等給出以下，但失敗了的base64。

function encodeImageFileAsURL(cb) { 
    return function(){ 
     var file = this.files[0]; 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      cb(reader.result); 
     } 
     reader.readAsDataURL(file); 
    } 
}

任何人都可以幫助我瞭解我在這裏失蹤了嗎？非常感謝！

參考： https://davidwalsh.name/browser-camera

https://davidwalsh.name/convert-canvas-image

來源

2016-12-15 John Doe

注意，'的問題的''是src'一個有效的'數據URI'，但不正確編碼的文件。你確定原始圖像的MIME類型爲「image/png」嗎？你如何將圖像繪製到'

您應該將圖像作爲文件/ blob，而不是base64（這將是〜大3倍的上傳） – Endless

你已經有一個data URI在<img>元素的src以可變image。將<img>元素的src的值傳遞給php，而不是html<img>元素。

var file = image.src; //this is the image url that i'm sending

來源

2016-12-15 19:30:55 guest271314

JavaScript - 獲取對象HTMLImageElement而不是base64字符串

回答

相關問題