반응형
새로 만든 이미지를 새 탭에서 열려면 어떻게 해야 합니까?
아래 코드는 같은 페이지 하단에 이미지를 만듭니다.이미지를 같은 페이지에 표시하지 않고 새 탭/창에 표시하려면 어떻게 해야 합니까?
success: function (data) {
var image = new Image();
image.src = "data:image/jpg;base64," + data.d;
document.body.appendChild(image);
}
예를 들어 다음과 같습니다.
success: function (data) {
var image = new Image();
image.src = "data:image/jpg;base64," + data.d;
var w = window.open("");
w.document.write(image.outerHTML);
}
현재의 제안은 Chrome에서는 동작하지 않고, 항상 화이트 페이지를 표시해, 현재는 사용하고 있습니다.
const base64ImageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const contentType = 'image/png';
const byteCharacters = atob(base64ImageData.substr(`data:${contentType};base64,`.length));
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += 1024) {
const slice = byteCharacters.slice(offset, offset + 1024);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
const blobUrl = URL.createObjectURL(blob);
window.open(blobUrl, '_blank');
제레미 덕분이에요!
https://stackoverflow.com/a/16245768/8270748
최신 솔루션 - 2019-10년까지 작동.
새 탭에서 이미지를 엽니다.
let data = 'data:image/png;base64,iVBORw0KGgoAAAANS';
let w = window.open('about:blank');
let image = new Image();
image.src = data;
setTimeout(function(){
w.document.write(image.outerHTML);
}, 0);
https://stackoverflow.com/a/58615423/2450431 https://stackoverflow.com/a/46510790/2450431 https://stackoverflow.com/a/27798235/2450431
문서를 사용할 수 있습니다.write() 및 html 페이지를 직접 추가합니다.이 옵션을 사용하면 탭 제목도 추가할 수 있습니다.
const newTab = window.open();
newTab?.document.write(
`<!DOCTYPE html><head><title>Document preview</title></head><body><img src="${base64File}" width="100px" height="100px" ></body></html>`);
newTab?.document.close();
데모
업데이트된 DEMO(팝이 차단된 상태에서도 Chrome에서 작동) - 2021년 3월 3일
콜의 랩핑window.open는, 이하에 상술한 문제를 회피합니다.
document.getElementById('my_button').addEventListener('click', (evt) => {
window.open("https://via.placeholder.com/150", '_blank')
});
64비트 Windows 10의 Chrome 88에서 최종 테스트 완료.
언급URL : https://stackoverflow.com/questions/27798126/how-to-open-the-newly-created-image-in-a-new-tab
반응형
'programing' 카테고리의 다른 글
| CSS - 아이폰 및 Safari의 선택 메뉴에서 옵션 숨기기 (0) | 2023.03.17 |
|---|---|
| 년수를 얻기 위한 Oracle 날짜 차이 (0) | 2023.03.12 |
| 반응 원어민에서 전역 변수/상수 (0) | 2023.03.12 |
| 각도 2.0은 $120에 해당합니다.$140 (0) | 2023.03.12 |
| 스프링 @트랜잭션 읽기 전용 전파 (0) | 2023.03.12 |