html/input/text到页面加载时的图像

html/input/text to image on page load

本文关键字：加载 图像 input text html      更新时间：2023-09-26

我是HTML和javascript的新手。我希望有人能帮我解决这个问题。我正在生成一个代码，并将值传递给一个文本框，然后将该值转换为图像。我需要在页面加载上执行这两个函数，这可能吗？我希望有人能帮忙。非常感谢！

这是我的代码：

function SecurityCode() {                                                                                                    
    //Generate security code and assign to 'text'
    document.getElementById('text').value = GeneratedCode;	
}
function TexttoImage(){
    // found this code here , thanks Stackoverflow! 
    var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');
    
    document.getElementById('text').addEventListener('onload', function (){
        tCtx.canvas.width = tCtx.measureText(this.value).width;
        tCtx.fillText(this.value, 0, 10);
        imageElem.src = tCtx.canvas.toDataURL();
        console.log(imageElem.src);
    }, false);
} 
<body onload='TexttoImage();'>
    <canvas id='textCanvas' width='65' height='42'></canvas>
    <img id='image' width='65' height='42'>  
    <input type='text' id='text' >
</body>

您可以创建一个init函数，该函数重新组合所有函数，而不是在加载时收费

function SecurityCode() {                                                                                                    
//Generate security code and assign to 'text'
document.getElementById('text').value = GeneratedCode;  
}
function TexttoImage(){
    // found this code here , thanks Stackoverflow! 
    var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');
    document.getElementById('text').addEventListener('onload', function (){
        tCtx.canvas.width = tCtx.measureText(this.value).width;
        tCtx.fillText(this.value, 0, 10);
        imageElem.src = tCtx.canvas.toDataURL();
        console.log(imageElem.src);
    }, false);
} 
function initFormOnLoad(){
    SecurityCode();
    TexttoImage();
}

以你的形式

<body onload='initFormOnLoad();'>
    <canvas id='textCanvas' width='65' height='42'></canvas>
    <img id='image' width='65' height='42'>  
    <input type='text' id='text' >
</body>

onload属性需要一个JavaScript代码字符串，所以您可以简单地将这两个函数放在一起！

onload="TexttoImage(); SecurityCode()"

您可以尝试使用jquery来缓解您的问题，您需要在html页面中包含以下内容

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

HTML-

<body>
    <canvas id='textCanvas' width='65' height='42'>
    <img id='image' width='65' height='42' /></canvas>
    <input type='text' id='text' />
</body>

javascript-

   function SecurityCode() {
       //Generate security code and assign to 'text'
       document.getElementById('text').value = "hello1"; //GeneratedCode;
   }
   function TexttoImage() {
       // found this code here , thanks Stackoverflow! 
       var tCtx = document.getElementById('textCanvas').getContext('2d');
       imageElem = document.getElementById('image');
       tCtx.canvas.width = tCtx.measureText(document.getElementById('text').value).width;
       tCtx.fillText(document.getElementById('text').value, 0, 10);
       imageElem.src = tCtx.canvas.toDataURL();
   }
   $(function() { // nearly equivalent to body.onload but a better option to use
       SecurityCode();
       TexttoImage();
   })

看看jsfiddle的工作代码。

相关文章：