Question

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

onload="TexttoImage(); SecurityCode()"

Answer 2

您可以尝试使用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的工作代码。

Answer 3

你可以创建一个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>

html / javascript - 在页面加载时输入/文本到图像

3 个答案: