无法显示使用HTML和Javascript的完整图像绘制画布

Question

我遇到问题。我无法使用画布绘制完整图像。我在下面解释我的代码。

<div class="form-group"> 
<label for="exampleInputEmail1">Coupon Title</label> 
<input type="text" name="emails" id="copTitle" class="form-control" placeholder="Add Coupon Title" value="<?php echo $email; ?>" required> 
</div> 
<div class="couponimg" style="display:none;" id="blankImagediv"> 
<img class="img-responsive thumbnail" style="margin-bottom:9px; display:none;" src="http://oditek.inimages/coupon-banner-blank.jpg" crossorigin="anonymous" id="requiredImage"> 
<canvas id="canvas" class="img-responsive thumbnail" style="margin-bottom:9px;"></canvas> 
</div> 
var canvas = document.getElementById('canvas'), 
    ctx = canvas.getContext('2d'); 
    canvas.width = $('#requiredImage').width(); 
    canvas.crossOrigin = "Anonymous"; 
    canvas.height = $('#requiredImage').height(); 
    ctx.drawImage($('#requiredImage').get(0), 0, 0); 
    ctx.font = ":26pt Calibri"; 
    $(document).on('input','#copTitle',function(){ 
     $('#blankImagediv').css('display','block'); 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.drawImage($('#requiredImage').get(0), 0, 0); 
     ctx.fillStyle = "#0D5F90"; 
     ctx.fillText($(this).val(),40,80); 
    }) 

这里我得到原单图像的图像的一半，而绘制图像的.The右侧没有显示。请帮我解决这个问题。

Answer 1

喜尝试用下面的代码...

var canvas = document.getElementById('canvas'), 
    img = document.getElementById('requiredImage'), 
    ctx = canvas.getContext('2d'); 
    img.onload = drawImage; 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.font = ":26pt Calibri"; 
    $(document).on('input', '#copTitle', function() { 
     $('#blankImagediv').css('display', 'block'); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(img, 0, 0); 
     ctx.fillStyle = "#0D5F90"; 
     ctx.fillText($(this).val(), 40, 80); 
    }); 
    function drawImage() 
    { 
    ctx.drawImage(img, 0, 0); 
    }