image into base64 string using javascript 無法取得圖片資源解決方式

再測試javascript 把圖片轉成 base64 字串,原本在目錄底下測試還算正常可取得圖片資源

,途中想說測試其它圖片,就直接去自己的網站上去取得圖片連結,直接貼上....發現,

奇怪怎麼讀取不到,想說是不是圖片連結有錯,就把圖片連結直接貼到瀏覽器分頁上,圖片是可

已讀取到的,可是怎麼使用 XMLHttpRequest  load 卻沒反應, 覺得不太可能是SERVER問題,

就去 google 圖片,隨便找一下圖片連結 貼上,......疑!?,圖片資源是可以取得的。

不得不承認是SERVER 設定上的問題了;開啟 firebug,

觀察讀取圖片 SERVER 回應 head 狀態

 [自身SERVER 回應狀態]





[其它SERVER回應狀態]



發現 兩個SERVER ,回應的 head 有點出入,比較了一下 "access-control-allow-origin"

嫌疑最大,直接問google 大神了,查到主要資訊,以下



https://developer.mozilla.org/zh-TW/docs/HTTP/Access_control_CORS

根據上篇文章說明,很明顯的答案已經出來了,我的推斷是正確的,

基於方便測試,再另外一台有相同情況的 PHP SERVER上做測試,先新增一個檔案

.htaccess ,在"底下"內容增加到.htaccess後上傳到 PHP SERVER

!!注意：基於安全性考量,Access-Control-Allow-Origin 應該根據所需網域去設定。

參考網址

   Header add Access-Control-Allow-Origin "*"
   Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
   Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"


已上完成後,再傳一張圖片上去 PHP SERVER,再利用 XMLHttpRequest  load 再去讀取一次

就....成功讀取圖片資源了!!!!    

補上 javascript image into base64 string 參考文章 ↓

http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript