Открыть новое окно браузера с картинкой

128

04 октября 2019, 12:20

Есть картинка

<img src="photo/ar1.jpg" href="#" alt="Изображения нет" title="Посмотреть большое фото" onclick="openRis(0)">

По нажатию на картинку должна вывестись эта же картинка, но в новом окне. По каким форумам только не лазил, не помогает ничего. Сделать надо с помощью JS!!! пробовал так

var w = window.open("about:blank","help", "width=300", "height=200");
w.document.open();
w.document.body.innerHTML("<img src='photo/ar1.jpg'>");

и так

var image = new Image();
image.src = "photo/ar1.j";
var width = image.width;
var height = image.height;
window.open(src,"Image","width=" + width + ",height=" + height);

и даже как-то так

var newWin=window.open("about:blank","hello","height=500,width=500");
var div = document.createElement('div');
div.className = "alert";
var newimg = document.createElement("img");
newimg.setAttribute("src","photo/ar1.jpg");
document.getElementById("alert").appendChild(newimg);

Уже веревку с мылом ищу, помогите, пожалуйста!

Answer 1

Попробуйте так:

const c = document.getElementById("my-image"); // берем картинку по id
const d = c.src; // берем ее src
const w = window.open('about:blank','new image'); // открываем окно
w.document.write("<img src='" + d + "' alt='from old image' />"); //  вставляем картинку

P.S. Прототип: https://jsfiddle.net/bauop5q8/2/

Answer 2

Пример на Codepen

var imgs = document.querySelectorAll("img"); 
 
for (var i = 0; i < imgs.length; i++) { 
  imgs[i].addEventListener("click", (e) => { 
    let src = e.currentTarget.src; 
    window.open("about:black", "image").document.write("<img src='" + src + "' alt='something' />"); 
  }); 
}

<img src="https://picsum.photos/200/300" alt="1"> 
<img src="https://picsum.photos/200/310" alt="2"> 
<img src="https://picsum.photos/200/320" alt="3">

Answer 3

Можно обернуть картинки в тег a и воспользоваться атрибутом target="_blank".

<a href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" target="_blank"> 
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" href="#" alt="Изображения нет" title="Посмотреть большое фото"> 
</a>

P.S. Сниппет не работает, смотрите в jsfiddle.