Question

我有一个画布设置，允许在画布上上传和显示图像，通过在单击sumbit按钮时抓取用户输入在图像上绘制文本。我希望在单击提交按钮时看到正在键入的图像上的文本。

我的index.html.erb

<canvas id="imageCanvas"></canvas>
<input type="file" id="imageLoader" name="imageLoader"/>
<input id="text" type="text" placeholder="your text" style="width: 300px; 
height: 28px; z-index: 0;"></input>
<button id="entertext">Submit</button>

我的javascript

$(function() {

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);    
            ctx.font = "40pt Calibri";
            ctx.fillStyle = 'white';
            $('#entertext').click(function(){
                ctx.fillText($("#text").val(), 30, 40);
            });  
        }    

        img.src = event.target.result;
   }

   reader.readAsDataURL(e.target.files[0]);  
}

});

Answer 1

您应该输入以下代码：

ctx.fillText($("#text").val(), 30, 40);

进入$("#text").on("change", function() { ... here ... })处理程序。

当我在图像画布上绘制文本时，如何查看文本

1 个答案: