Добавление водяного знака на холст, который уже имеет изображение - HTML5, Canvas

Question

У меня есть видеоролик и холст.

Полотно принимает изображение подачи, когда пользователь нажимает кнопку Submit

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

После пользователь щелкает по кнопке Отправить, он может нажать Share, чтобы загрузить картинку.

 <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 поверх изображения до отправившего пользователя 1-й оснастки, нажав на кнопку Отправить.

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

Как наложить изображение на 2-й сверху (как водяной знак) при загрузке?

Answer 1

Вот один из способов, используя временный холст:

• Создать временную в памяти холст: document.createElement('canvas')

• Нарисуйте основной холст на временный холст: tempContext.drawImage(mainCanvas,0,0)

• Добавьте некоторый дублирующий текст (или что-то) в качестве водяного знака: tempContext.fillText('Mine!',0,0)

• Получить dataURL временного холста: 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>