将水印文本更改为水印图像

Question

我希望当用户打印其中的文本时，打印的页面有水印，当我尝试使用文本水印时它可以工作但是使用图像水印它不起作用，这是打印脚本

function printDoc() {
 if (!validateMode()) { return; }
var printContents = document.getElementById('textBox').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents+'<div style="width:150px;position:fixed;bottom:5px;right:5px;opacity:.5;">Display Logo Here...</div>';
window.print();
document.body.innerHTML = originalContents;
}

即使我尝试在 printContents 之前添加水印，它也根本不起作用，这里是文本编辑器的完整脚本 JsFiddle Demo

var oDoc, sDefTxt;

function initDoc() {
  oDoc = document.getElementById("textBox");
  sDefTxt = oDoc.innerHTML;
  if (document.compForm.switchMode.checked) {
    setDocMode(true);
  }
}

function formatDoc(sCmd, sValue) {
  if (validateMode()) {
    document.execCommand(sCmd, false, sValue);
    oDoc.focus();
  }
}

function validateMode() {
  if (!document.compForm.switchMode.checked) {
    return true;
  }
  alert("Uncheck \"Show HTML\".");
  oDoc.focus();
  return false;
}

function setDocMode(bToSource) {
  var oContent;
  if (bToSource) {
    oContent = document.createTextNode(oDoc.innerHTML);
    oDoc.innerHTML = "";
    var oPre = document.createElement("pre");
    oDoc.contentEditable = false;
    oPre.id = "sourceText";
    oPre.contentEditable = true;
    oPre.appendChild(oContent);
    oDoc.appendChild(oPre);
    document.execCommand("defaultParagraphSeparator", false, "div");
  } else {
    if (document.all) {
      oDoc.innerHTML = oDoc.innerText;
    } else {
      oContent = document.createRange();
      oContent.selectNodeContents(oDoc.firstChild);
      oDoc.innerHTML = oContent.toString();
    }
    oDoc.contentEditable = true;
  }
  oDoc.focus();
}




function printDoc() {
  if (!validateMode()) {
    return;
  }
  // Add your watermark here  
  var WaterMark = '<div style="width:150px;position:fixed;bottom:5px;right:5px;opacity:.8;">Whosebug</div>';
  var printContents = document.getElementById('textBox').innerHTML;
  var originalContents = document.body.innerHTML;
  document.body.innerHTML = printContents + WaterMark;
  window.print();
  document.body.innerHTML = originalContents;
}
/*page margin*/
var cssPagedMedia = (function() {
  var style = document.createElement('style');
  document.head.appendChild(style);
  return function(rule) {
    style.innerHTML = rule;
  };
}());

cssPagedMedia.margin = function(margin) {
  cssPagedMedia('@page {margin: ' + margin + '}');
};

cssPagedMedia.margin('0');
/*page size*/
cssPagedMedia.size = function(size) {
  cssPagedMedia('@page {size: ' + size + '}');
};

var cssPagedMedia = (function() {
  var style = document.createElement('style');
  document.head.appendChild(style);
  return function(rule) {
    style.innerHTML = rule;
  };
}());
cssPagedMedia.size = function(size) {
  cssPagedMedia('@page {size: ' + size + '}');
};
cssPagedMedia.size('portrait');

.intLink {
  cursor: pointer;
}

img.intLink {
  border: 0;
}

#toolBar1 select {
  font-size: 10px;
}

#textBox {
  width: 540px;
  height: 500px;
  border: 1px #000000 solid;
  padding: 12px;
  overflow: scroll;
}

#textBox #sourceText {
  padding: 0;
  margin: 0;
  min-width: 498px;
  min-height: 200px;
}

.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: not-allowed;
}

#editMode label {
  cursor: pointer;
}

<div id="printa">

  <body onload="initDoc();">
    <form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
      <input type="hidden" name="myDoc">
      <div id="toolBar1">
        <select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
          <option selected>- التنسيق -</option>
          <option value="h1">عنوان 1 &lt;h1&gt;</option>
          <option value="h2">عنوان 2 &lt;h2&gt;</option>
          <option value="h3">عنوان 3 &lt;h3&gt;</option>
          <option value="h4">عنوان 4 &lt;h4&gt;</option>
          <option value="h5">عنوان 5 &lt;h5&gt;</option>
          <option value="h6">عنوان فرعي &lt;h6&gt;</option>
          <option value="p">فقرة &lt;p&gt;</option>
          <option value="pre">مهيأ مسبقا &lt;pre&gt;</option>
        </select>
        <select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
          <option class="heading" selected>- الخطوط -</option>
          <option>Arial</option>
          <option>Arial Black</option>
          <option>Courier New</option>
          <option>Times New Roman</option>
        </select>
        <select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
          <option class="heading" selected>- الحجم -</option>
          <option value="1">صغير جدا</option>
          <option value="2">صغير بعض الشيء</option>
          <option value="3">عادي</option>
          <option value="4">متوسط - كبير</option>
          <option value="5">كبير</option>
          <option value="6">كبير جدا</option>
          <option value="7">أقصى</option>
        </select>
        <select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
          <option class="heading" selected>- اللون -</option>
          <option value="red">أحمر</option>
          <option value="blue">أزرق</option>
          <option value="green">أخضر</option>
          <option value="black">أسود</option>
        </select>
        <select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
          <option class="heading" selected>- الخلفية -</option>
          <option value="red">أحمر</option>
          <option value="green">أخضر</option>
          <option value="black">أسود</option>
        </select>
      </div>
      <div id="toolBar2">
        <img class="intLink" title="طباعة" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
        <img class="intLink" title="خط عريض " onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
        <img class="intLink" title="خط مائل" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
        <img class="intLink" title="تسطير" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
        <img class="intLink" title="محاذاة إلى اليسار" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
        <img class="intLink" title="محاذاة إلى الوسط" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
        <img class="intLink" title="محاذاة إلى اليمين" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
        <img class="intLink" title="الرجوع إلى الخلف" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs="
        />
        <img class="intLink" title="التقدم إلى الأمام" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="
        />
        <img class="intLink" title="قائمة ذات تعداد رقمي" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs="
        />
        <img class="intLink" title="قائمة ذات تعداد نقطي" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw=="
        />
        <img class="intLink" title="إضافة رابط" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7"
        />
        <img class="intLink" title="القص" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw=="
        />
        <img class="intLink" title="النسخ" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw=="
        />
        <img class="intLink" title="اللصق" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs="
        />
        <img class="intLink" title="المسح التام" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7"
        />

      </div>
      <iframe id="inlineFrameExample" name="inlineFrameExample" title="Inline Frame Example" width="0" height="0" dir="rtl" hidden="hidden">
  </iframe>
      <div id="textBox" contenteditable="true">


        <div style="text-align: center;"><img src="https://i.imgur.com/KDXSnOv.jpg" width="160"></div><strong style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify; background-color: rgb(255, 255, 255);">Lorem Ipsum</strong>
        <span style="color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify; background-color: rgb(255, 255, 255);">&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
          has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
      </div>

      <p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" hidden="hidden" /> </p>
      <p><input type="submit" value="Send" hidden="hidden" /></p>

如何将 img 作为水印添加到打印页面中？

Answer 1

使用针对打印的样式表可以更简单地完成此操作。

演示

https://repl.it/@AnonymousSB/SO53360134

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="print.css" rel="stylesheet" type="text/css" media="print" />
  </head>
  <body>
    <script src="script.js"></script>
    <button onclick="window.print();">Print</button>
    <img id="watermark" src="logo.png" alt="A watermark you can only see when you print" />
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id sapien et sem lobortis pharetra at vitae orci. Nullam ipsum velit, sollicitudin ac fringilla et, interdum elementum quam. Donec magna augue, dignissim vitae finibus faucibus, hendrerit quis libero. In quis quam pulvinar lacus faucibus convallis sit amet at enim. Etiam varius urna vitae sem tristique, eget placerat turpis semper. Quisque dictum purus sit amet metus venenatis vehicula. Etiam ac ex at dui imperdiet lobortis eget eget augue. Quisque fermentum aliquam condimentum. Nulla eget enim auctor, venenatis metus sit amet, aliquet turpis. Proin id pretium risus.
      </p>
    </section>
  </body>
</html>

CSS (link href="style.css" rel="stylesheet" type="text/css")

#watermark {
  display: none;
}

CSS (link href="print.css" rel="stylesheet" type="text/css" media="print")

#watermark {
  display: block;
  width: 150px;
  position: fixed;
  bottom: 5px;
  right: 5px;
  opacity: .5;
}

内联样式（替代）

<style type="text/css">
  #watermark { display: none; }
  @media print {
    #watermark {
      display: block;
      width: 150px;
      position: fixed;
      bottom: 5px;
      right: 5px;
      opacity: .5;
    }
</style>

将水印文本更改为水印图像

Change watermark text to a watermark image

javascript

css

printing

text-editor

image

演示

HTML

CSS (link href="style.css" rel="stylesheet" type="text/css")

CSS (link href="print.css" rel="stylesheet" type="text/css" media="print")

内联样式（替代）