html / javascript-輸入/文本到頁面加載圖像

Question

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

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 個解決方案

解決方案1
0 2015-12-12 09:13:34

解決方案2
0 2015-12-12 09:39:26

解決方案3
0 已采納 2015-12-12 09:42:43

html / javascript-輸入/文本到頁面加載圖像

問題描述

3 個解決方案

解決方案1 0 2015-12-12 09:13:34

解決方案2 0 2015-12-12 09:39:26

解決方案3 0 已采納 2015-12-12 09:42:43

解決方案1
0 2015-12-12 09:13:34

解決方案2
0 2015-12-12 09:39:26

解決方案3
0 已采納 2015-12-12 09:42:43