fetch API로 이미지 검색 및 Data URI 게시
내용
POST 통신하면서 이미지를 이미지 태그에 넣는 방법이 없을까 찾고 있었지만, 잘 묶여있는 것이 발견되지 않았기 때문에, 비망록. 통신 후에 응답 결과를 바이너리 데이터로 하고, 그에 대해 Data URI(web 브라우저상에 영역을 확보했을 때의 임시 URI?)를 발행하고, 이것을 ![]()
태그의 src로 설정한다.
만일 다음과 같은 html이 있었다고 한다.
<img class="image"></img>
그렇다면 다음과 같은 느낌.
fetch(url, {
method: "POST",# GET, POST
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, same-origin, *omit
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
"hoge":"hoge" // post時の引数
})
}).then(respons => {
return respons.blob(); // バイナリデータとする？
}).then(blob =>{
return URL.createObjectURL(blob); // Data URI発行
}).then(dataUri =>{
$('.image').attr('src', dataUri);
})
});
Reference
이 문제에 관하여(fetch API로 이미지 검색 및 Data URI 게시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/StrayDog/items/5a8516be469de726765a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<img class="image"></img>
fetch(url, {
method: "POST",# GET, POST
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, same-origin, *omit
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
"hoge":"hoge" // post時の引数
})
}).then(respons => {
return respons.blob(); // バイナリデータとする？
}).then(blob =>{
return URL.createObjectURL(blob); // Data URI発行
}).then(dataUri =>{
$('.image').attr('src', dataUri);
})
});
Reference
이 문제에 관하여(fetch API로 이미지 검색 및 Data URI 게시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/StrayDog/items/5a8516be469de726765a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
