Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Print</title>
  <link rel="stylesheet" href="css/test.css">
</head>
<body>
    <div class="images">
        <div class="image" onclick="printImg(this.getElementsByTagName('img')[0])">
            <img src="http://fc08.deviantart.net/fs8/i/2005/303/1/4/autumn_sun_by_ssilence.jpg" alt="image">
        </div>
        <div class="image" onclick="printImg(this.getElementsByTagName('img')[0])">
            <img src="http://globe-views.com/dcim/dreams/image/image-03.jpg">
        </div>
        <div class="image" onclick="printImg(this.getElementsByTagName('img')[0])">
            <img src="http://www.hdwallpapersimages.com/wp-content/uploads/images/Frozen-Logo-Symbol-HD-Images.jpg" alt="image">
        </div>
        <div class="image" onclick="printImg(this.getElementsByTagName('img')[0])">
            <img src="http://bygaga.com.ua/uploads/posts/2015-02/1424758490_krasivye-i-klassnye-kartinki-o-vesne-13.jpg" alt="image">
        </div>
    </div>
  
    <script src="js/test.js"></script>
</body>
</html>
​
 
@charset "utf-8";
html,
body {
    width: 100%;
    padding: 0;
    margin: 0;
}
.images img {
    display: block;
    max-height: 220px;
    padding: 0;
    margin: 0;
}
.images {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    margin-top: 50px;
}
​
​
​
.image{
    display: block;
    position: relative;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
}
.image::after {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggc3R5bGU9ImZpbGw6I2ZmZjsiIGQ9Ik00LDEyLjV2M2g4di0zdi0ySDRWMTIuNXogTTUsMTEuNWg2djFINVYxMS41eiBNNSwxMy41aDZ2MUg1VjEzLjV6Ii8+DQoJCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiNmZmY7IiBwb2ludHM9IjEyLDMuNSAxMiwwLjUgNCwwLjUgNCwzLjUgNCw1LjUgMTIsNS41IAkJIi8+DQoJCTxwYXRoIHN0eWxlPSJmaWxsOiNmZmY7IiBkPSJNMTQsMy41aC0xdjJ2MUgzdi0xdi0ySDJjLTEsMC0yLDEtMiwydjVjMCwxLDEsMiwyLDJoMXYtMnYtMWgxMHYxdjJoMWMxLDAsMi0xLDItMnYtNQ0KCQkJQzE2LDQuNSwxNSwzLjUsMTQsMy41eiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K') no-repeat 50% 50% black;
    background-size: 75% 75%; 
    border-radius: 12px;
    content: " ";
    opacity: 0;
    transform: scale(.5);
    transition: opacity .25s ease,
                transform .25s ease;
}
.image:hover::after {
    opacity: .5;
    transform: scale(1);
}
​
 
'use strict';
 
// Создать iFrame:
var iFr= document.createElement('iframe');
iFr.src = '#';
// Установить ему ширину равную ширине body
// (чтобы при печати изображение было на весь лист):
iFr.width = document.body.clientWidth;
// Сделать его невидимым:
iFr.style.display = "none";
// Добавить его в документ:
document.body.appendChild(iFr);
​
/**
 * Функция, которая должна вызываться по клику на кнопке Print.
 * Приримает в аргументе ссылку на элемент с изображением для печати,
 * или URL изображения.
 */
function printImg (imageArg) {
    // Если переданный аргумент не является строкой (с URL) или изображением - выдать ошибку.
    if (!(imageArg instanceof HTMLImageElement || typeof imageArg === 'string')) {
        throw new TypeError('printImg(): expected string or HTMLImageElement in first argument');
    }
    // Создать элемент для хранения изображения:
    var image = new Image();
    // Растянуть изображение на ширину iFrame (чтобы при печати все в лист влезло):
    image.style.width = '100%';
    // Если передан HTMLImageElement - взять URL изображения из него,
    // иначе взять URL из переданной строки:
    image.src = imageArg.src || imageArg;
    // Когда изображение загрузится надо поместить его в iFrame и отправить на печать:
    image.onload = function () {
        // Удалить обработчик т.к. в хроме еще одно событие onload наступит
        // после того как изображение вставится в документ (iFrame).
        this.onload = null;
        // Очистить iFrame и вставить изображение:
        iFr.contentWindow.document.body.innerHTML = "";
        iFr.contentWindow.document.body.appendChild(this);
        // Отправить на печать:
        // Тут можно было бы обойтись и одной командой iFr.contentWindow.print(),
        // но в IE это не сработает - для него надо делать отдельную инструкцию
        // (За идею спасибо Jonas Stawski - http://stackoverflow.com/a/24953075)
        var ie = iFr.contentWindow.document.execCommand('print', false, null);
        if (!ie) iFr.contentWindow.print();
    };
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
nightwolf4343pro
0viewers