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

时间：2018-11-18 11:03:27

标签： javascript css image printing text-editor

我有一个text-editor

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

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;">StackOverFlow</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作为水印添加到打印页面中？

1 个答案:

答案 0 :(得分：2)

使用针对打印的样式表有一种更简单的方法。

演示

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>
相关问题
最新问题