Html Canvas добавить текст или изображение в воспроизводимое изображение

Question

я пытаюсь добавить добавить текст (вода метки) в холст сформированный образ

вот мой код.

html2canvas($("#frame"), { 
      onrendered: function (canvas) { 

       $("#outputImage").html(canvas); 

      } 

то, что я хотел бы добавить в этот код, чтобы добавить водяной знак знак в формируемого изображения

Answer 1

Внутри обработчика выполните следующие действия:

html2canvas($("#frame"), { 
    onrendered: function (canvas) { 

    var ctx = canvas.getContext("2d");  // get 2D context of canvas 

    ctx.textBaseline = "top";    // start with drawing text from top 
    ctx.font = "20px sans-serif";   // set a font and size 
    ctx.fillStyle = "red";     // set a color for the text 
    ctx.fillText("WATERMARK", 20, 20);  // draw the text at some position (x, y) 

    $("#outputImage").html(canvas); 

    } 
} 

Существует также выравнивание режимов с помощью:

ctx.textAlign = "center"; // default: "start" = left-to-right/right-to-left 
          // depending on language, override with "left" or "right" 

Answer 2

Отъезд Canvas.globalCompositeOperation. Если вы установите его в строку «светлее», это уменьшит пиксели, нарисованные следующей командой рисования (например, fillText()). Вот пример

<canvas id='canvas'></canvas> 
 
<script> 
 
    var img = new Image(); 
 
    img.src = 'http://www.javascripture.com/pic.jpg'; 
 
    img.onload = function() { 
 
    var canvas = document.getElementById('canvas'); 
 
    var context = canvas.getContext('2d'); 
 
    context.drawImage(img, 0, 0, canvas.width, canvas.height); 
 

 
    // Draw the Watermark 
 
    context.font = '48px sans-serif'; 
 
    context.globalCompositeOperation = 'lighter'; 
 
    context.fillStyle = '#444'; 
 
    context.textAlign = 'center'; 
 
    context.textBaseline = 'middle'; 
 
    context.fillText('watermark', canvas.width/2, canvas.height/2); 
 
    }; 
 
</script>