图片加水印

html#

Copy Highlighter-hljs
<html>
<head>
<meta charset="UTF-8">
<title>身份证件加水印</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="description" content="身份证件加水印 - ID card watermark">
<!--<link rel="shortcut icon" href="favicon.ico">-->
<link rel="stylesheet" href="css/pure-min.css">
<link rel="stylesheet" href="css/style.css">
 
<style>
#workspace {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    user-select: none;
}
 
#image-layer img {
    display: block;
    width: 100%;
}
#text-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
#file-form {
    width: 0;
    height: 0;
    overflow: hidden;
}
 
ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid #eee;
    list-style: none;
    font-size: 14px;
}
 
li {
    clear: both;
    overflow: hidden;
    padding: .5em 0;
    border-bottom: 1px solid #eee;
}
 
.pure-form {
    margin-left: 20px;
}
 
.pure-form label {
    display: block;
    overflow: hidden;
    margin: 0;
}
 
.pure-form .name {
    float: left;
    margin: 6px 0;
}
 
input {
    float: right;
    text-align: right;
    margin-top: 9px;
    margin-top: 0;
    width: 5em;
}
 
input[type=&quot;range&quot;] {
    margin-top: 8px;
}
 
.value {
    float: right;
    margin-right: 5px;
    margin-top: 6px;
}
 
#wm_text {
    width: 100%;
}
 
#generate {
    margin: 1em 0;
}
</style>
</head>
 
<!--禁止右键-->
<!--<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">-->
 
 
<div id="header">
    <h1>身份证件加水印</h1>
    <h2>ID card watermark</h2>
</div>
 
<div id="main" class="pure-g">
    <div class="pure-u-1-2">
        <div id="workspace">
            <div id="image-layer"></div>
            <canvas id="text-layer"></canvas>
        </div>
        <p><button id="selectbtn" class="pure-button pure-button-primary" type="button">选择图片</button></p>
        <form id="file-form"><input type="file" name="selectfile" id="selectfile" accept="image/*"></form>
    </div>
    <div class="pure-u-1-2">
        <form class="pure-form" id="settigns-form">
            <ul>
                <li><label><span class="name">文字</span><textarea type="text" id="wm_text" name="text">仅提供×××，申请办理×××，他用无效</textarea></label></li>
                <li><label><span class="name">字体大小</span><input type="number" name="size" value="30" min="1"></label></li>
                <li><label><span class="name">颜色</span><input type="color" name="color" value="#FFFFFF"></label></li>
                <li><label><span class="name">透明度</span><input type="range" name="opacity" value="0.7" min="0.1" max="1" step="0.1"><span class="value">0.7</span></label></li>
            </ul>
 
            <button id="generate" class="pure-button pure-button-primary" disabled="">生成图片</button>
            <a id="save" class="pure-button" style="display:none" download="new_png.png">下载图片</a>
        </form>
    </div>
</div>
 
<script>
if (!window.FileReader) {
    document.getElementById("main").innerHTML = "您使用的浏览器 Out 了。";
}
 
function $(s) {
    return document.getElementById(s);
}
 
var selectBtn = $("selectbtn");
var selectFile = $("selectfile");
var settingsForm = $("settigns-form");
var textLayer = $("text-layer");
var textCtx = textLayer.getContext("2d");
var x = 0;
var y = 0;
var timer;
var img;
var w;
var h;
 
function drawText(context) {
    if (!img) return;
 
    var ctx = context || textCtx;
    var text = settingsForm.text.value;
    var size = parseInt(settingsForm.size.value);
    var top = 0;
    var width;
 
    if (!context) ctx.clearRect(0, 0, w, h);
 
    ctx.globalAlpha = settingsForm.opacity.value;
    ctx.textBaseline = "top";
    ctx.fillStyle = settingsForm.color.value;
    ctx.font = size + "px/1 ' Microsoft Yahei'";
 
    var strArr = [];
    var textLen = 0;
 
    while (text.length) {
        textLen = 0;
 
        while (textLen < text.length && ctx.measureText(text.substring(0, textLen + 1)).width < textLayer.width) {
            textLen++;
        };
 
        strArr.push(text.substring(0, textLen));
        text = text.substring(textLen);
    }
 
    top = (textLayer.height - strArr.length * size) / 2;
 
    strArr.forEach(function(str) {
        ctx.fillText(str, 0, top);
 
        top += size;
    });
 
    var lastLineWidth = ctx.measureText(strArr[strArr.length - 1]).width;
    var fillLineHeight = size / 5;
    ctx.fillRect(lastLineWidth, top - ((size - fillLineHeight) / 2), w - lastLineWidth - (size / 10), fillLineHeight);
}
 
function preventDefault(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}
 
function readFile(file, callback) {
    var reader = new FileReader();
 
    reader.onload = function(evt) {
        callback && callback(null, evt);
    };
 
    reader.onerror = function(evt) {
        switch (evt.target.error.code) {
            case evt.target.error.NOT_FOUND_ERR:
                alert("错误：文件未找到！");
                break;
            case evt.target.error.NOT_READABLE_ERR:
                alert("错误：文件无法读取。");
                break;
            case evt.target.error.ABORT_ERR:
                alert("错误：文件读取被中断。");
                break;
            case evt.target.error.ENCODING_ERR:
                alert("错误：文件无法读取。");
                break;
            case evt.target.error.SECURITY_ERR:
                lert("错误：文件被锁定。");
                break;
            default:
                alert("错误：文件读取失败。");
        }
        callback && callback(evt);
    };
 
    reader.readAsDataURL(file);
}
 
function fileHandler(evt) {
    preventDefault(evt);
 
    var file = evt.target.files[0];
 
    if (!file) {
        alert("错误：没有选择任何文件。");
        return;
    } else if (file.type.indexOf("image/") === -1) {
        alert("错误：请选择图像格式文件。");
        return;
    } else {
        selectBtn.innerHTML = "正在加载…";
        selectBtn.disabled = "disabled";
 
        readFile(file, function(error, event) {
            selectBtn.innerHTML = "选择图片";
            selectBtn.removeAttribute("disabled");
            $("file-form").reset();
 
            if (error) return;
 
            document.getElementById('save').style.display = 'none';
 
            var oldImg = img;
 
            img = new Image();
 
            img.onload = function() {
                if (oldImg) oldImg.parentNode.removeChild(oldImg);
 
                $("image-layer").appendChild(img);
                $("generate").removeAttribute("disabled");
 
                w = textLayer.width = img.naturalWidth;
                h = textLayer.height = img.naturalHeight;
 
                settingsForm.size.value = Math.floor(Math.sqrt(img.naturalWidth * img.naturalHeight * .9 / settingsForm.text.value.length));
 
                drawText();
            };
 
            img.src = event.target.result;
        });
    }
}
 
function updateSettings() {
    if (img && this.name === 'text') {
        settingsForm.size.value = Math.floor(Math.sqrt(img.naturalWidth * img.naturalHeight * .9 / this.value.length));
    }
 
    clearTimeout(timer);
    timer = setTimeout(drawText, 100);
}
 
Array.prototype.forEach.call(document.getElementById("settigns-form").querySelectorAll("input, textarea"), function(input) {
    if (input.type === "range") {
        input.nextSibling.innerHTML = input.value;
 
        input.oninput = function() {
            this.nextSibling.innerHTML = this.value;
        };
 
        input.onchange = function() {
            this.nextSibling.innerHTML = this.value;
            updateSettings();
        };
    } else {
        input.onchange = updateSettings;
    }
});
 
selectBtn.onclick = function() {
    selectFile.click();
};
 
selectFile.onchange = function(evt) {
    fileHandler(evt);
};
 
settingsForm.onsubmit = function() {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
 
    canvas.width = w;
    canvas.height = h;
 
    ctx.drawImage(img, 0, 0);
    drawText(ctx);
 
    document.getElementById('save').href = canvas.toDataURL();
    document.getElementById('save').style.display = 'inline-block';
 
    return false;
};
</script>
 
</body>
</html>

css#

pure-min.css

Copy Highlighter-hljs
/*!
Pure v0.4.2
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*/
/*!
normalize.css v1.1.3 | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block
}
 
audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}
 
audio:not([controls]) {
    display: none;
    height: 0
}
 
[hidden] {
    display: none
}
 
html {
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
 
html, button, input, select, textarea {
    font-family: sans-serif
}
 
body {
    margin: 0
}
 
a:focus {
    outline: thin dotted
}
 
a:active, a:hover {
    outline: 0
}
 
h1 {
    font-size: 2em;
    margin: .67em 0
}
 
h2 {
    font-size: 1.5em;
    margin: .83em 0
}
 
h3 {
    font-size: 1.17em;
    margin: 1em 0
}
 
h4 {
    font-size: 1em;
    margin: 1.33em 0
}
 
h5 {
    font-size: .83em;
    margin: 1.67em 0
}
 
h6 {
    font-size: .67em;
    margin: 2.33em 0
}
 
abbr[title] {
    border-bottom: 1px dotted
}
 
b, strong {
    font-weight: 700
}
 
blockquote {
    margin: 1em 40px
}
 
dfn {
    font-style: italic
}
 
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}
 
mark {
    background: #ff0;
    color: #000
}
 
p, pre {
    margin: 1em 0
}
 
code, kbd, pre, samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em
}
 
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}
 
q {
    quotes: none
}
 
q:before, q:after {
    content: '';
    content: none
}
 
small {
    font-size: 80%
}
 
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}
 
sup {
    top: -.5em
}
 
sub {
    bottom: -.25em
}
 
dl, menu, ol, ul {
    margin: 1em 0
}
 
dd {
    margin: 0 0 0 40px
}
 
menu, ol, ul {
    padding: 0 0 0 40px
}
 
nav ul, nav ol {
    list-style: none;
    list-style-image: none
}
 
img {
    border: 0;
    -ms-interpolation-mode: bicubic
}
 
svg:not(:root) {
    overflow: hidden
}
 
figure {
    margin: 0
}
 
form {
    margin: 0
}
 
fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}
 
legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px
}
 
button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle
}
 
button, input {
    line-height: normal
}
 
button, select {
    text-transform: none
}
 
button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
    *overflow: visible
}
 
button[disabled], html input[disabled] {
    cursor: default
}
 
input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px
}
 
input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}
 
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}
 
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}
 
textarea {
    overflow: auto;
    vertical-align: top
}
 
table {
    border-collapse: collapse;
    border-spacing: 0
}
 
[hidden] {
    display: none !important
}
 
.pure-g {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
    text-rendering: optimizespeed;
    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    display: -ms-flexbox;
    -ms-flex-flow: row wrap
}
 
.opera-only :-o-prefocus, .pure-g {
    word-spacing: -.43em
}
 
.pure-u {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto
}
 
.pure-g [class *="pure-u"] {
    font-family: sans-serif
}
 
.pure-u-1, .pure-u-1-1, .pure-u-1-2, .pure-u-1-3, .pure-u-2-3, .pure-u-1-4, .pure-u-3-4, .pure-u-1-5, .pure-u-2-5, .pure-u-3-5, .pure-u-4-5, .pure-u-5-5, .pure-u-1-6, .pure-u-5-6, .pure-u-1-8, .pure-u-3-8, .pure-u-5-8, .pure-u-7-8, .pure-u-1-12, .pure-u-5-12, .pure-u-7-12, .pure-u-11-12, .pure-u-1-24, .pure-u-2-24, .pure-u-3-24, .pure-u-4-24, .pure-u-5-24, .pure-u-6-24, .pure-u-7-24, .pure-u-8-24, .pure-u-9-24, .pure-u-10-24, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto
}
 
.pure-u-1-24 {
    width: 4.1667%;
    *width: 4.1357%
}
 
.pure-u-1-12, .pure-u-2-24 {
    width: 8.3333%;
    *width: 8.3023%
}
 
.pure-u-1-8, .pure-u-3-24 {
    width: 12.5%;
    *width: 12.469%
}
 
.pure-u-1-6, .pure-u-4-24 {
    width: 16.6667%;
    *width: 16.6357%
}
 
.pure-u-1-5 {
    width: 20%;
    *width: 19.969%
}
 
.pure-u-5-24 {
    width: 20.8333%;
    *width: 20.8023%
}
 
.pure-u-1-4, .pure-u-6-24 {
    width: 25%;
    *width: 24.969%
}
 
.pure-u-7-24 {
    width: 29.1667%;
    *width: 29.1357%
}
 
.pure-u-1-3, .pure-u-8-24 {
    width: 33.3333%;
    *width: 33.3023%
}
 
.pure-u-3-8, .pure-u-9-24 {
    width: 37.5%;
    *width: 37.469%
}
 
.pure-u-2-5 {
    width: 40%;
    *width: 39.969%
}
 
.pure-u-5-12, .pure-u-10-24 {
    width: 41.6667%;
    *width: 41.6357%
}
 
.pure-u-11-24 {
    width: 45.8333%;
    *width: 45.8023%
}
 
.pure-u-1-2, .pure-u-12-24 {
    width: 50%;
    *width: 49.969%
}
 
.pure-u-13-24 {
    width: 54.1667%;
    *width: 54.1357%
}
 
.pure-u-7-12, .pure-u-14-24 {
    width: 58.3333%;
    *width: 58.3023%
}
 
.pure-u-3-5 {
    width: 60%;
    *width: 59.969%
}
 
.pure-u-5-8, .pure-u-15-24 {
    width: 62.5%;
    *width: 62.469%
}
 
.pure-u-2-3, .pure-u-16-24 {
    width: 66.6667%;
    *width: 66.6357%
}
 
.pure-u-17-24 {
    width: 70.8333%;
    *width: 70.8023%
}
 
.pure-u-3-4, .pure-u-18-24 {
    width: 75%;
    *width: 74.969%
}
 
.pure-u-19-24 {
    width: 79.1667%;
    *width: 79.1357%
}
 
.pure-u-4-5 {
    width: 80%;
    *width: 79.969%
}
 
.pure-u-5-6, .pure-u-20-24 {
    width: 83.3333%;
    *width: 83.3023%
}
 
.pure-u-7-8, .pure-u-21-24 {
    width: 87.5%;
    *width: 87.469%
}
 
.pure-u-11-12, .pure-u-22-24 {
    width: 91.6667%;
    *width: 91.6357%
}
 
.pure-u-23-24 {
    width: 95.8333%;
    *width: 95.8023%
}
 
.pure-u-1, .pure-u-1-1, .pure-u-5-5, .pure-u-24-24 {
    width: 100%
}
 
.pure-g-r {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    display: -ms-flexbox;
    -ms-flex-flow: row wrap
}
 
.opera-only :-o-prefocus, .pure-g-r {
    word-spacing: -.43em
}
 
.pure-g-r [class *="pure-u"] {
    font-family: sans-serif
}
 
.pure-g-r img {
    max-width: 100%;
    height: auto
}
 
@media (min-width: 980px) {
    .pure-visible-phone {
        display: none
    }
 
    .pure-visible-tablet {
        display: none
    }
 
    .pure-hidden-desktop {
        display: none
    }
}
 
@media (max-width: 480px) {
    .pure-g-r > .pure-u, .pure-g-r > [class *="pure-u-"] {
        width: 100%
    }
}
 
@media (max-width: 767px) {
    .pure-g-r > .pure-u, .pure-g-r > [class *="pure-u-"] {
        width: 100%
    }
 
    .pure-hidden-phone {
        display: none
    }
 
    .pure-visible-desktop {
        display: none
    }
}
 
@media (min-width: 768px) and (max-width: 979px) {
    .pure-hidden-tablet {
        display: none
    }
 
    .pure-visible-desktop {
        display: none
    }
}
 
.pure-button {
    display: inline-block;
    *display: inline;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
 
.pure-button::-moz-focus-inner {
    padding: 0;
    border: 0
}
 
.pure-button {
    font-family: inherit;
    font-size: 100%;
    *font-size: 90%;
    *overflow: visible;
    padding: .5em 1em;
    color: #444;
    color: rgba(0, 0, 0, .8);
    *color: #444;
    border: 1px solid #999;
    border: 0 rgba(0, 0, 0, 0);
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px
}
 
.pure-button-hover, .pure-button:hover, .pure-button:focus {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, .05)), to(rgba(0, 0, 0, .1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .1));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1))
}
 
.pure-button:focus {
    outline: 0
}
 
.pure-button-active, .pure-button:active {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset, 0 0 6px rgba(0, 0, 0, .2) inset
}
 
.pure-button[disabled], .pure-button-disabled, .pure-button-disabled:hover, .pure-button-disabled:focus, .pure-button-disabled:active {
    border: 0;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    filter: alpha(opacity=40);
    -khtml-opacity: .4;
    -moz-opacity: .4;
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none
}
 
.pure-button-hidden {
    display: none
}
 
.pure-button::-moz-focus-inner {
    padding: 0;
    border: 0
}
 
.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected {
    background-color: #0078e7;
    color: #fff
}
 
.pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form select, .pure-form textarea {
    padding: .5em .6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
 
.pure-form input:not([type]) {
    padding: .5em .6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
 
.pure-form input[type=color] {
    padding: .2em .5em
}
 
.pure-form input[type=text]:focus, .pure-form input[type=password]:focus, .pure-form input[type=email]:focus, .pure-form input[type=url]:focus, .pure-form input[type=date]:focus, .pure-form input[type=month]:focus, .pure-form input[type=time]:focus, .pure-form input[type=datetime]:focus, .pure-form input[type=datetime-local]:focus, .pure-form input[type=week]:focus, .pure-form input[type=number]:focus, .pure-form input[type=search]:focus, .pure-form input[type=tel]:focus, .pure-form input[type=color]:focus, .pure-form select:focus, .pure-form textarea:focus {
    outline: 0;
    outline: thin dotted \9;
    border-color: #129FEA
}
 
.pure-form input:not([type]):focus {
    outline: 0;
    outline: thin dotted \9;
    border-color: #129FEA
}
 
.pure-form input[type=file]:focus, .pure-form input[type=radio]:focus, .pure-form input[type=checkbox]:focus {
    outline: thin dotted #333;
    outline: 1px auto #129FEA
}
 
.pure-form .pure-checkbox, .pure-form .pure-radio {
    margin: .5em 0;
    display: block
}
 
.pure-form input[type=text][disabled], .pure-form input[type=password][disabled], .pure-form input[type=email][disabled], .pure-form input[type=url][disabled], .pure-form input[type=date][disabled], .pure-form input[type=month][disabled], .pure-form input[type=time][disabled], .pure-form input[type=datetime][disabled], .pure-form input[type=datetime-local][disabled], .pure-form input[type=week][disabled], .pure-form input[type=number][disabled], .pure-form input[type=search][disabled], .pure-form input[type=tel][disabled], .pure-form input[type=color][disabled], .pure-form select[disabled], .pure-form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3
}
 
.pure-form input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3
}
 
.pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] {
    background: #eee;
    color: #777;
    border-color: #ccc
}
 
.pure-form input:focus:invalid, .pure-form textarea:focus:invalid, .pure-form select:focus:invalid {
    color: #b94a48;
    border-color: #ee5f5b
}
 
.pure-form input:focus:invalid:focus, .pure-form textarea:focus:invalid:focus, .pure-form select:focus:invalid:focus {
    border-color: #e9322d
}
 
.pure-form input[type=file]:focus:invalid:focus, .pure-form input[type=radio]:focus:invalid:focus, .pure-form input[type=checkbox]:focus:invalid:focus {
    outline-color: #e9322d
}
 
.pure-form select {
    border: 1px solid #ccc;
    background-color: #fff
}
 
.pure-form select[multiple] {
    height: auto
}
 
.pure-form label {
    margin: .5em 0 .2em
}
 
.pure-form fieldset {
    margin: 0;
    padding: .35em 0 .75em;
    border: 0
}
 
.pure-form legend {
    display: block;
    width: 100%;
    padding: .3em 0;
    margin-bottom: .3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5
}
 
.pure-form-stacked input[type=text], .pure-form-stacked input[type=password], .pure-form-stacked input[type=email], .pure-form-stacked input[type=url], .pure-form-stacked input[type=date], .pure-form-stacked input[type=month], .pure-form-stacked input[type=time], .pure-form-stacked input[type=datetime], .pure-form-stacked input[type=datetime-local], .pure-form-stacked input[type=week], .pure-form-stacked input[type=number], .pure-form-stacked input[type=search], .pure-form-stacked input[type=tel], .pure-form-stacked input[type=color], .pure-form-stacked select, .pure-form-stacked label, .pure-form-stacked textarea {
    display: block;
    margin: .25em 0
}
 
.pure-form-stacked input:not([type]) {
    display: block;
    margin: .25em 0
}
 
.pure-form-aligned input, .pure-form-aligned textarea, .pure-form-aligned select, .pure-form-aligned .pure-help-inline, .pure-form-message-inline {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle
}
 
.pure-form-aligned textarea {
    vertical-align: top
}
 
.pure-form-aligned .pure-control-group {
    margin-bottom: .5em
}
 
.pure-form-aligned .pure-control-group label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0
}
 
.pure-form-aligned .pure-controls {
    margin: 1.5em 0 0 10em
}
 
.pure-form input.pure-input-rounded, .pure-form .pure-input-rounded {
    border-radius: 2em;
    padding: .5em 1em
}
 
.pure-form .pure-group fieldset {
    margin-bottom: 10px
}
 
.pure-form .pure-group input {
    display: block;
    padding: 10px;
    margin: 0;
    border-radius: 0;
    position: relative;
    top: -1px
}
 
.pure-form .pure-group input:focus {
    z-index: 2
}
 
.pure-form .pure-group input:first-child {
    top: 1px;
    border-radius: 4px 4px 0 0
}
 
.pure-form .pure-group input:last-child {
    top: -2px;
    border-radius: 0 0 4px 4px
}
 
.pure-form .pure-group button {
    margin: .35em 0
}
 
.pure-form .pure-input-1 {
    width: 100%
}
 
.pure-form .pure-input-2-3 {
    width: 66%
}
 
.pure-form .pure-input-1-2 {
    width: 50%
}
 
.pure-form .pure-input-1-3 {
    width: 33%
}
 
.pure-form .pure-input-1-4 {
    width: 25%
}
 
.pure-form .pure-help-inline, .pure-form-message-inline {
    display: inline-block;
    padding-left: .3em;
    color: #666;
    vertical-align: middle;
    font-size: .875em
}
 
.pure-form-message {
    display: block;
    color: #666;
    font-size: .875em
}
 
@media only screen and (max-width: 480px) {
    .pure-form button[type=submit] {
        margin: .7em 0 0
    }
 
    .pure-form input:not([type]), .pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form label {
        margin-bottom: .3em;
        display: block
    }
 
    .pure-group input:not([type]), .pure-group input[type=text], .pure-group input[type=password], .pure-group input[type=email], .pure-group input[type=url], .pure-group input[type=date], .pure-group input[type=month], .pure-group input[type=time], .pure-group input[type=datetime], .pure-group input[type=datetime-local], .pure-group input[type=week], .pure-group input[type=number], .pure-group input[type=search], .pure-group input[type=tel], .pure-group input[type=color] {
        margin-bottom: 0
    }
 
    .pure-form-aligned .pure-control-group label {
        margin-bottom: .3em;
        text-align: left;
        display: block;
        width: 100%
    }
 
    .pure-form-aligned .pure-controls {
        margin: 1.5em 0 0
    }
 
    .pure-form .pure-help-inline, .pure-form-message-inline, .pure-form-message {
        display: block;
        font-size: .75em;
        padding: .2em 0 .8em
    }
}
 
.pure-menu ul {
    position: absolute;
    visibility: hidden
}
 
.pure-menu.pure-menu-open {
    visibility: visible;
    z-index: 2;
    width: 100%
}
 
.pure-menu ul {
    left: -10000px;
    list-style: none;
    margin: 0;
    padding: 0;
    top: -10000px;
    z-index: 1
}
 
.pure-menu > ul {
    position: relative
}
 
.pure-menu-open > ul {
    left: 0;
    top: 0;
    visibility: visible
}
 
.pure-menu-open > ul:focus {
    outline: 0
}
 
.pure-menu li {
    position: relative
}
 
.pure-menu a, .pure-menu .pure-menu-heading {
    display: block;
    color: inherit;
    line-height: 1.5em;
    padding: 5px 20px;
    text-decoration: none;
    white-space: nowrap
}
 
.pure-menu.pure-menu-horizontal > .pure-menu-heading {
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0;
    vertical-align: middle
}
 
.pure-menu.pure-menu-horizontal > ul {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle
}
 
.pure-menu li a {
    padding: 5px 20px
}
 
.pure-menu-can-have-children > .pure-menu-label:after {
    content: '\25B8';
    float: right;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif;
    margin-right: -20px;
    margin-top: -1px
}
 
.pure-menu-can-have-children > .pure-menu-label {
    padding-right: 30px
}
 
.pure-menu-separator {
    background-color: #dfdfdf;
    display: block;
    height: 1px;
    font-size: 0;
    margin: 7px 2px;
    overflow: hidden
}
 
.pure-menu-hidden {
    display: none
}
 
.pure-menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}
 
.pure-menu-horizontal li {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle
}
 
.pure-menu-horizontal li li {
    display: block
}
 
.pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label:after {
    content: "\25BE"
}
 
.pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label {
    padding-right: 30px
}
 
.pure-menu-horizontal li.pure-menu-separator {
    height: 50%;
    width: 1px;
    margin: 0 7px
}
 
.pure-menu-horizontal li li.pure-menu-separator {
    height: 1px;
    width: auto;
    margin: 7px 2px
}
 
.pure-menu.pure-menu-open, .pure-menu.pure-menu-horizontal li .pure-menu-children {
    background: #fff;
    border: 1px solid #b7b7b7
}
 
.pure-menu.pure-menu-horizontal, .pure-menu.pure-menu-horizontal .pure-menu-heading {
    border: 0
}
 
.pure-menu a {
    border: 1px solid transparent;
    border-left: 0;
    border-right: 0
}
 
.pure-menu a, .pure-menu .pure-menu-can-have-children > li:after {
    color: #777
}
 
.pure-menu .pure-menu-can-have-children > li:hover:after {
    color: #fff
}
 
.pure-menu .pure-menu-open {
    background: #dedede
}
 
.pure-menu li a:hover, .pure-menu li a:focus {
    background: #eee
}
 
.pure-menu li.pure-menu-disabled a:hover, .pure-menu li.pure-menu-disabled a:focus {
    background: #fff;
    color: #bfbfbf
}
 
.pure-menu .pure-menu-disabled > a {
    background-image: none;
    border-color: transparent;
    cursor: default
}
 
.pure-menu .pure-menu-disabled > a, .pure-menu .pure-menu-can-have-children.pure-menu-disabled > a:after {
    color: #bfbfbf
}
 
.pure-menu .pure-menu-heading {
    color: #565d64;
    text-transform: uppercase;
    font-size: 90%;
    margin-top: .5em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dfdfdf
}
 
.pure-menu .pure-menu-selected a {
    color: #000
}
 
.pure-menu.pure-menu-open.pure-menu-fixed {
    border: 0;
    border-bottom: 1px solid #b7b7b7
}
 
.pure-paginator {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
    text-rendering: optimizespeed;
    list-style: none;
    margin: 0;
    padding: 0
}
 
.opera-only :-o-prefocus, .pure-paginator {
    word-spacing: -.43em
}
 
.pure-paginator li {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto
}
 
.pure-paginator .pure-button {
    border-radius: 0;
    padding: .8em 1.4em;
    vertical-align: top;
    height: 1.1em
}
 
.pure-paginator .pure-button:focus, .pure-paginator .pure-button:active {
    outline-style: none
}
 
.pure-paginator .prev, .pure-paginator .next {
    color: #C0C1C3;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .45)
}
 
.pure-paginator .prev {
    border-radius: 2px 0 0 2px
}
 
.pure-paginator .next {
    border-radius: 0 2px 2px 0
}
 
@media (max-width: 480px) {
    .pure-menu-horizontal {
        width: 100%
    }
 
    .pure-menu-children li {
        display: block;
        border-bottom: 1px solid #000
    }
}
 
.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb
}
 
.pure-table caption {
    color: #000;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center
}
 
.pure-table td, .pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: 6px 12px
}
 
.pure-table td:first-child, .pure-table th:first-child {
    border-left-width: 0
}
 
.pure-table thead {
    background: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom
}
 
.pure-table td {
    background-color: transparent
}
 
.pure-table-odd td {
    background-color: #f2f2f2
}
 
.pure-table-striped tr:nth-child(2n-1) td {
    background-color: #f2f2f2
}
 
.pure-table-bordered td {
    border-bottom: 1px solid #cbcbcb
}
 
.pure-table-bordered tbody > tr:last-child td, .pure-table-horizontal tbody > tr:last-child td {
    border-bottom-width: 0
}
 
.pure-table-horizontal td, .pure-table-horizontal th {
    border-width: 0 0 1px;
    border-bottom: 1px solid #cbcbcb
}
 
.pure-table-horizontal tbody > tr:last-child td {
    border-bottom-width: 0
}

style.css

Copy Highlighter-hljs
body, input, button, textarea, select {
    font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Verdana, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", "Noto Sans CJK SC", "Source Han Sans CN", SimSun, sans-serif;
}
 
a {
    color: #3b8bba;
    text-decoration: none;
}
 
a:hover {
    color: #265778;
}
 
#nav {
    background: #222;
}
 
#nav.translucent {
    background: none;
}
 
#nav a {
    color: #ddd;
    text-decoration: none;
    padding: .5em;
    display: inline-block;
}
 
#nav a:hover {
    color: #eee;
}
 
#nav .c7sky-ribbon {
    position: absolute;
    right: 10px;
    top: -3px;
    background: url(../images/ribbon.png) no-repeat 50% 0;
    text-indent: -99em;
    overflow: hidden;
    width: 36px;
    height: 56px;
    padding: 0;
    border-top: 3px solid #34BB98;
    -webkit-transition: top .3s;
    -moz-transition: top .3s;
    transition: top .3s;
}
#nav .c7sky-ribbon:hover {
    top: 0;
}
 
#header, #main {
    margin: 0 auto;
    max-width: 768px;
}
 
#header {
    margin: 2em auto;
    padding: 1em 0 2em;
    border-bottom: 1px solid #eee;
    text-align: center;
    line-height: 1.5;
}
 
#header h1 {
    margin: 0;
    color: #444;
    font-weight: 300;
    font-size: 300%;
}
 
#header h2 {
    margin: 0;
    color: #666;
    font-weight: 300;
    font-size: 125%;
}
 
.adsbygoogle {
    margin: 50px auto;
    display: block!important;
}

posted @ 2023-03-31 10:38 流年中渲染了微笑阅读(26) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· source标签下的src属性中的url

· Linux-1. 基本命令的基本格式

· Django中models模块增删改查

· seaborn学习笔记（二）：散点图、线图

· 6、好莱坞明星识别

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

公告

昵称：流年中渲染了微笑
园龄： 7年3个月
粉丝： 33
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

流年中渲染了微笑

图片加水印

html#

css#

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<html>
	<head>
	<meta charset="UTF-8">
	<title>身份证件加水印</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
	<meta name="description" content="身份证件加水印 - ID card watermark">
	<!--<link rel="shortcut icon" href="favicon.ico">-->
	<link rel="stylesheet" href="css/pure-min.css">
	<link rel="stylesheet" href="css/style.css">

	<style>
	#workspace {
	position: relative;
	margin-bottom: 20px;
	overflow: hidden;
	user-select: none;
	}

	#image-layer img {
	display: block;
	width: 100%;
	}
	#text-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	#file-form {
	width: 0;
	height: 0;
	overflow: hidden;
	}

	ul {
	margin: 0;
	padding: 0;
	border-top: 1px solid #eee;
	list-style: none;
	font-size: 14px;
	}

	li {
	clear: both;
	overflow: hidden;
	padding: .5em 0;
	border-bottom: 1px solid #eee;
	}

	.pure-form {
	margin-left: 20px;
	}

	.pure-form label {
	display: block;
	overflow: hidden;
	margin: 0;
	}

	.pure-form .name {
	float: left;
	margin: 6px 0;
	}

	input {
	float: right;
	text-align: right;
	margin-top: 9px;
	margin-top: 0;
	width: 5em;
	}

	input[type="range"] {
	margin-top: 8px;
	}

	.value {
	float: right;
	margin-right: 5px;
	margin-top: 6px;
	}

	#wm_text {
	width: 100%;
	}

	#generate {
	margin: 1em 0;
	}
	</style>
	</head>

	<!--禁止右键-->
	<!--<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">-->


	<div id="header">
	<h1>身份证件加水印</h1>
	<h2>ID card watermark</h2>
	</div>

	<div id="main" class="pure-g">
	<div class="pure-u-1-2">
	<div id="workspace">
	<div id="image-layer"></div>
	<canvas id="text-layer"></canvas>
	</div>
	<p><button id="selectbtn" class="pure-button pure-button-primary" type="button">选择图片</button></p>
	<form id="file-form"><input type="file" name="selectfile" id="selectfile" accept="image/*"></form>
	</div>
	<div class="pure-u-1-2">
	<form class="pure-form" id="settigns-form">
	<ul>
	<li><label><span class="name">文字</span><textarea type="text" id="wm_text" name="text">仅提供×××，申请办理×××，他用无效</textarea></label></li>
	<li><label><span class="name">字体大小</span><input type="number" name="size" value="30" min="1"></label></li>
	<li><label><span class="name">颜色</span><input type="color" name="color" value="#FFFFFF"></label></li>
	<li><label><span class="name">透明度</span><input type="range" name="opacity" value="0.7" min="0.1" max="1" step="0.1"><span class="value">0.7</span></label></li>
	</ul>

	<button id="generate" class="pure-button pure-button-primary" disabled="">生成图片</button>
	<a id="save" class="pure-button" style="display:none" download="new_png.png">下载图片</a>
	</form>
	</div>
	</div>

	<script>
	if (!window.FileReader) {
	document.getElementById("main").innerHTML = "您使用的浏览器 Out 了。";
	}

	function $(s) {
	return document.getElementById(s);
	}

	var selectBtn = $("selectbtn");
	var selectFile = $("selectfile");
	var settingsForm = $("settigns-form");
	var textLayer = $("text-layer");
	var textCtx = textLayer.getContext("2d");
	var x = 0;
	var y = 0;
	var timer;
	var img;
	var w;
	var h;

	function drawText(context) {
	if (!img) return;

	var ctx = context \|\| textCtx;
	var text = settingsForm.text.value;
	var size = parseInt(settingsForm.size.value);
	var top = 0;
	var width;

	if (!context) ctx.clearRect(0, 0, w, h);

	ctx.globalAlpha = settingsForm.opacity.value;
	ctx.textBaseline = "top";
	ctx.fillStyle = settingsForm.color.value;
	ctx.font = size + "px/1 ' Microsoft Yahei'";

	var strArr = [];
	var textLen = 0;

	while (text.length) {
	textLen = 0;

	while (textLen < text.length && ctx.measureText(text.substring(0, textLen + 1)).width < textLayer.width) {
	textLen++;
	};

	strArr.push(text.substring(0, textLen));
	text = text.substring(textLen);
	}

	top = (textLayer.height - strArr.length * size) / 2;

	strArr.forEach(function(str) {
	ctx.fillText(str, 0, top);

	top += size;
	});

	var lastLineWidth = ctx.measureText(strArr[strArr.length - 1]).width;
	var fillLineHeight = size / 5;
	ctx.fillRect(lastLineWidth, top - ((size - fillLineHeight) / 2), w - lastLineWidth - (size / 10), fillLineHeight);
	}

	function preventDefault(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	}

	function readFile(file, callback) {
	var reader = new FileReader();

	reader.onload = function(evt) {
	callback && callback(null, evt);
	};

	reader.onerror = function(evt) {
	switch (evt.target.error.code) {
	case evt.target.error.NOT_FOUND_ERR:
	alert("错误：文件未找到！");
	break;
	case evt.target.error.NOT_READABLE_ERR:
	alert("错误：文件无法读取。");
	break;
	case evt.target.error.ABORT_ERR:
	alert("错误：文件读取被中断。");
	break;
	case evt.target.error.ENCODING_ERR:
	alert("错误：文件无法读取。");
	break;
	case evt.target.error.SECURITY_ERR:
	lert("错误：文件被锁定。");
	break;
	default:
	alert("错误：文件读取失败。");
	}
	callback && callback(evt);
	};

	reader.readAsDataURL(file);
	}

	function fileHandler(evt) {
	preventDefault(evt);

	var file = evt.target.files[0];

	if (!file) {
	alert("错误：没有选择任何文件。");
	return;
	} else if (file.type.indexOf("image/") === -1) {
	alert("错误：请选择图像格式文件。");
	return;
	} else {
	selectBtn.innerHTML = "正在加载…";
	selectBtn.disabled = "disabled";

	readFile(file, function(error, event) {
	selectBtn.innerHTML = "选择图片";
	selectBtn.removeAttribute("disabled");
	$("file-form").reset();

	if (error) return;

	document.getElementById('save').style.display = 'none';

	var oldImg = img;

	img = new Image();

	img.onload = function() {
	if (oldImg) oldImg.parentNode.removeChild(oldImg);

	$("image-layer").appendChild(img);
	$("generate").removeAttribute("disabled");

	w = textLayer.width = img.naturalWidth;
	h = textLayer.height = img.naturalHeight;

	settingsForm.size.value = Math.floor(Math.sqrt(img.naturalWidth * img.naturalHeight * .9 / settingsForm.text.value.length));

	drawText();
	};

	img.src = event.target.result;
	});
	}
	}

	function updateSettings() {
	if (img && this.name === 'text') {
	settingsForm.size.value = Math.floor(Math.sqrt(img.naturalWidth * img.naturalHeight * .9 / this.value.length));
	}

	clearTimeout(timer);
	timer = setTimeout(drawText, 100);
	}

	Array.prototype.forEach.call(document.getElementById("settigns-form").querySelectorAll("input, textarea"), function(input) {
	if (input.type === "range") {
	input.nextSibling.innerHTML = input.value;

	input.oninput = function() {
	this.nextSibling.innerHTML = this.value;
	};

	input.onchange = function() {
	this.nextSibling.innerHTML = this.value;
	updateSettings();
	};
	} else {
	input.onchange = updateSettings;
	}
	});

	selectBtn.onclick = function() {
	selectFile.click();
	};

	selectFile.onchange = function(evt) {
	fileHandler(evt);
	};

	settingsForm.onsubmit = function() {
	var canvas = document.createElement("canvas");
	var ctx = canvas.getContext("2d");

	canvas.width = w;
	canvas.height = h;

	ctx.drawImage(img, 0, 0);
	drawText(ctx);

	document.getElementById('save').href = canvas.toDataURL();
	document.getElementById('save').style.display = 'inline-block';

	return false;
	};
	</script>

	</body>
	</html>

	body, input, button, textarea, select {
	font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Verdana, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", "Noto Sans CJK SC", "Source Han Sans CN", SimSun, sans-serif;
	}

	a {
	color: #3b8bba;
	text-decoration: none;
	}

	a:hover {
	color: #265778;
	}

	#nav {
	background: #222;
	}

	#nav.translucent {
	background: none;
	}

	#nav a {
	color: #ddd;
	text-decoration: none;
	padding: .5em;
	display: inline-block;
	}

	#nav a:hover {
	color: #eee;
	}

	#nav .c7sky-ribbon {
	position: absolute;
	right: 10px;
	top: -3px;
	background: url(../images/ribbon.png) no-repeat 50% 0;
	text-indent: -99em;
	overflow: hidden;
	width: 36px;
	height: 56px;
	padding: 0;
	border-top: 3px solid #34BB98;
	-webkit-transition: top .3s;
	-moz-transition: top .3s;
	transition: top .3s;
	}
	#nav .c7sky-ribbon:hover {
	top: 0;
	}

	#header, #main {
	margin: 0 auto;
	max-width: 768px;
	}

	#header {
	margin: 2em auto;
	padding: 1em 0 2em;
	border-bottom: 1px solid #eee;
	text-align: center;
	line-height: 1.5;
	}

	#header h1 {
	margin: 0;
	color: #444;
	font-weight: 300;
	font-size: 300%;
	}

	#header h2 {
	margin: 0;
	color: #666;
	font-weight: 300;
	font-size: 125%;
	}

	.adsbygoogle {
	margin: 50px auto;
	display: block!important;
	}