參考

w3 canvas

starter 1

<html>
<head>

</head>
<body>
    
    
    <form>
        <img id="imgtarget" style="display:none" src="0007.jpg" /> 
        
     <input type="text" id="inp"/>
      <button type="submit">Save</button>
    </form>
    <br>
    <canvas id="canvasTarget"  style="width:600px"/>
    <script src="AddText_1.js"></script>
</body>
</html>

<img id="imgtarget" style="display:none" src="0004.jpg" /> display:none 設定不出現

原始碼(AddText_1.js)

var canvas = document.getElementById('canvas'),
        ctx = canvasTarget.getContext('2d');
canvasTarget.width = imgtarget.width;
//canvas.crossOrigin = "Anonymous";
canvasTarget.height = imgtarget.height;
ctx.drawImage(imgtarget, 0, 0);
 
inp.onchange = function (e)
{
    ctx.font = "36pt Verdana";
    var txt = e.target.value;
    if(txt.length>0) {
        //redraw image
        ctx.clearRect(0,0,canvasTarget.width,canvasTarget.height);
        ctx.drawImage(imgtarget, 0, 0);
        //refill text
        ctx.fillStyle = "red";
        ctx.fillText(e.target.value,40,80);
    }
}

狀況:有時候不出現。猜測: 可能需要onload 事件

imgtarget.onload=function(e)
{
    ctx.drawImage(imgtarget, 0, 0);
}

start 2

測試

{{< codepenremote htmlFile="AddText_1.html" jsFile="AddText_1.js"

}}

原始碼: html js

<html>
<head>

</head>
<body>
    
    
    <form>
        <img id="imgtarget" style="display:none" src="0007.jpg" /> 
        
     <input type="text" id="inp"/>
      <button type="submit">Save</button>
    </form>
    <br>
    <canvas id="canvasTarget"  style="width:600px"/>
    <script src="AddText_1.js"></script>
</body>
</html>

var canvas = document.getElementById('canvas'),
        ctx = canvasTarget.getContext('2d');
canvasTarget.width = imgtarget.width;
//canvas.crossOrigin = "Anonymous";
canvasTarget.height = imgtarget.height;
ctx.drawImage(imgtarget, 0, 0);
 
inp.onchange = function (e)
{
    ctx.font = "36pt Verdana";
    var txt = e.target.value;
    if(txt.length>0) {
        //redraw image
        ctx.clearRect(0,0,canvasTarget.width,canvasTarget.height);
        ctx.drawImage(imgtarget, 0, 0);
        //refill text
        ctx.fillStyle = "red";
        ctx.fillText(e.target.value,40,80);
    }
}