Html Toile ajouter du texte ou une image dans l'image

Question

Rendus je suis en train d'ajouter ajouter du texte (marque d'eau) en toile image générée

est mon code ici.

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

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

      } 

ce que je dois ajouter dans ce code pour ajouter marque filigrane dans l'image générée

Answer 1

Dans le gestionnaire, procédez comme suit:

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

    } 
} 

Il y a aussi des modes d'alignement à l'aide:

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

Answer 2

Découvrez Canvas.globalCompositeOperation. Si vous le définissez sur la chaîne "plus clair", cela éclaircira les pixels dessinés par la commande de dessin suivante (par exemple fillText()). Voici un exemple

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