2012-11-12 2 views
1

나는 이미 가게에서 API가 제공하는 파일 스토리지에 파일을 성공 자바 스크립트, 에 대한 파일 시스템 API와 함께 연주 한읽기 이미지 파일 및 I가 시도

SVG 문제 (자바 스크립트)에 표시 ,

그러나 화상 (SVG 이미지)를 JPG 이미지 이다 저장된 파일을 읽어들이 FileReaderreadAsDataURL 방법, 이렇게 I는 xlink:href 특성을 이용하여 SVG에 표시 가능하여 읽어 에서 제공 한 "Inspect Element"를 사용할 때 이미지 (비어 있음)가 표시되지 않습니다. 크롬, 나는 xlink:href 속성이이 값으로 가득 보았다

"data:image/jpeg;base64,AAEAAAD/////AQAAAAAAAAAMAgAAAFZOZXREaXNwbGF5U3lzdGVtcy5TaGFyZWQsIFZlcnNpb249NC4xLjQ2OTUuMTY5NDMsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAME5ldERpc3BsYXlTeXN0ZW1zLlN5bmNocm9uaXphdGlvbi5SZW1vdGVGaWxlRGF0YQQAAAAPQ3JlYXRpb25UaW1lVXRjEExhc3RXcml0ZVRpbWVVdGMEU2l6ZQxSZWxhdGl2ZVBhdGgAAAABDQ0JAgAAAKrTBCT9is9IV01fnlvSy0h16AwAAAAAAAYDAAAACkRlc2VydC5qcGcLAA ..." 

내가 잘못이 무엇인지 모르는

(나머지는 A 's의 매우 긴 순서입니다),

이전 0123로 인코딩

var element; 
element= document.createElementNS("http://www.w3.org/2000/svg", "image"); 
element.setAttribute("id", "img1"); 
element.setAttribute("x", "30"); 
element.setAttribute("y", "250"); 
element.setAttribute("width", "150"); 
element.setAttribute("height", "150"); 

fs.root.getFile("Desert.jpg", {}, function (fileEntry) { 
    fileEntry.file(function (file) { 
     var reader = new FileReader(); 

     reader.onloadend = function (e) { 
     element.setAttribute("xlink:href", e.target.result); 
     }; 

     reader.readAsDataURL(file); 
    }, FileExceptions); 
},FileExceptions); //error callback 

return element; 

원시 문자열 URI : 여기서 I는

파일을 판독하고 요소를 표시하는 데 사용하는 코드:

data:image/jpeg;base64,AAEAAAD/////AQAAAAAAAAAMAgAAAFZOZXREaXNwbGF5U3lzdGVtcy5TaGFyZWQsIFZlcnNpb249NC4xLjQ2OTUuMTY5NDMsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAME5ldERpc3BsYXlTeXN0ZW1zLlN5bmNocm9uaXphdGlvbi5SZW1vdGVGaWxlRGF0YQQAAAAPQ3JlYXRpb25UaW1lVXRjEExhc3RXcml0ZVRpbWVVdGMEU2l6ZQxSZWxhdGl2ZVBhdGgAAAABDQ0JAgAAAKrTBCT9is9IV01fnlvSy0h16AwAAAAAAAYDAAAACkRlc2VydC5qcGcLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA...AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA= 

...이 너무 길어서 A "(S)의 시퀀스를 짧게

것을 나타낸다.

내가 처음에 삽입 파일 시스템에 파일을 생성/삽입 코드입니다 :

function InsertFile(fileName: string, blob:Blob) { 
    fs.root.getFile(fileName, { create: true /*exclusive: true*/ }, function (fileEntry) { 
     //change the exclusive to true, this is for debugging only 
     fileEntry.createWriter(function (fileWriter) { 
      fileWriter.onwriteend = function (e) { InfoLog("Write Completed"); }; 
     fileWriter.onerror = function (e) { InfoLog("Write Failed \r\n" + e.toString()); }; 
     fileWriter.write(blob); 
     },FileExceptions); 
    }, FileExceptions); 
} 

파일 이름은 "Desert.jpg"가 포함 나는 이미 그것을 확인하고 그건 사실이야 나는 서버에서 덩어리를 가지고

+0

전체 svg 요소의 소스를 게시 할 수 있습니까? – btel

+0

다른 브라우저에서도로드됩니까? – Duopixel

+0

아니로드되지 않습니다 .. 그리고 일반 HTML img 요소를 변경하려고했는데 어떻게 든 깨진 이미지를 표시합니다. –

답변

0

문제 solved..apparently 블롭 또는 스크립트, 의 코드와 파일을 잘못된 것은 실제로

HTML5의 파일 시스템 스토리지 API에 제대로 저장이 없다

변환 방법을 변경 한 후 클라이언트 (html5)로 보내지는 파일을 byte()로 변환하지 못한 서버 (.net)에서 Blob이 실제로 손상되었다는 것이 문제였습니다. 서버, 이미지를 올바르게 올바르게로드 할 수 있습니다