给已有图像的画布添加水印 - HTML5，画布

Question

我有一个摄像头视频源和一个画布。

当用户点击提交时，画布会显示摄像头视频的图像。

     <video id="video" width="300" height="200" autoplay></video>
     </section>
      <section class="btn">
      <button id="btnClick">Submit</button><br>
      </section>

     <section>
      <canvas id="canvas" width="300" height="300">
      </section>

用户点击提交后，可以点击共享按钮上传图片。

        <input type="button" onclick="uploadEx()" value="Share" />

        <form method="post" accept-charset="utf-8" name="form1">
        <input name="hidden_data" id='hidden_data' type="hidden"/>
         </form>

我希望能够在用户点击分享按钮之前，在图片上覆盖另一个PNG图像。

用于上传图片的JS代码：

           function uploadEx() {
            var canvas = document.getElementById("canvas");
            var dataURL = canvas.toDataURL("image/png");
            document.getElementById('hidden_data').value = dataURL;

            var fd = new FormData(document.forms["form1"]);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'uploadscript.php', true);

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete + '% uploaded');
                    alert('Image uploaded');
                }
            };

            xhr.onload = function() {

            };
            xhr.send(fd);
        };

我该如何在上传时叠加第二张图像（如水印）？

- Cody Raspien

---

@GameAlchemist 知识的好处在于它是自我更新的。如果你把关于水印的知识传授给Cody Raspien，那么你自己关于水印的知识并不会减少。;-) - markE

Answer 1

以下是使用临时画布的一种方法：

• 创建一个临时内存画布：document.createElement('canvas')

• 将主画布绘制到临时画布上：tempContext.drawImage(mainCanvas,0,0)

• 添加一些重叠的文本（或其他内容）作为水印：tempContext.fillText('我的！',0,0)

• 获取临时画布的数据URL：tempCanvas.toDataURL()

示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/earth.jpg";
function start(){
  canvas.width=img.width;
  canvas.height=img.height;
  ctx.drawImage(img,0,0);
  var dataURL=watermarkedDataURL(canvas,"It's Mine!");
}


function watermarkedDataURL(canvas,text){
  var tempCanvas=document.createElement('canvas');
  var tempCtx=tempCanvas.getContext('2d');
  var cw,ch;
  cw=tempCanvas.width=canvas.width;
  ch=tempCanvas.height=canvas.height;
  tempCtx.drawImage(canvas,0,0);
  tempCtx.font="24px verdana";
  var textWidth=tempCtx.measureText(text).width;
  tempCtx.globalAlpha=.50;
  tempCtx.fillStyle='white'
  tempCtx.fillText(text,cw-textWidth-10,ch-20);
  tempCtx.fillStyle='black'
  tempCtx.fillText(text,cw-textWidth-10+2,ch-20+2);
  // just testing by adding tempCanvas to document
  document.body.appendChild(tempCanvas);
  return(tempCanvas.toDataURL());
}

body{ background-color: ivory; padding:20px;}
canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>
<h2>Watermarked...</h2>

- markE

---

有没有想法如何添加图片作为水印而不是纯文本？ - itsme

drawImage...也许可以给水印图像增加高对比度，降低饱和度但保持低不透明度？实际上这取决于您想要添加水印的图像类型。 :-) - markE