Hinzufügen eines Wasserzeichens zu einer Leinwand, die bereits ein Bild hat - HTML5, Leinwand

Question

Ich habe eine Kamera Video-Feed und eine Leinwand.

Die Leinwand, das Bild des Futters erfolgt, wenn Benutzer klickt

 <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> 

Senden Nach Benutzer geklickt hat Senden, kann er Anteil klicken Sie auf das Bild zu.

 <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> 

Ich möchte eine andere png oben auf das Bild, um Benutzer vor überlagern können, die ersten Snap Einreichen von Share-Taste auf klicken.

JS für das Hochladen Bild:

  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); 
     }; 

Wie Overlay ich ein zweites Bild auf der Oberseite (wie Wasserzeichen) beim Hochladen?

Answer 1

Hier ist eine Möglichkeit, eine temporäre Leinwand mit:

• Erstellen Ihnen eine temporäre In-Memory-Leinwand: document.createElement('canvas')

• die große Leinwand auf die temporäre Leinwand Draw: tempContext.drawImage(mainCanvas,0,0)

• Fügen Sie überlappenden Text (oder etwas) als Wasserzeichen hinzu: tempContext.fillText('Mine!',0,0)

• die DataURL der temporären Leinwand Get: tempCanvas.toDataURL()

Beispielcode und eine Demo:

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>