Question

我需要一些帮助。我正在使用画布在图像上设置一些文本，但这次我的要求是我必须使用Canvas / Javascript在该图像上设置一个徽标。我在下面解释我的代码。

<img class="img-responsive thumbnail" style="margin-bottom:9px; display:none;" src="images/coupon-banner-blank.jpg" crossorigin="anonymous" id="requiredImage">
<canvas id="canvas" name="canvas" class="img-responsive thumbnail" style="margin-bottom:9px;"></canvas>
<input type="file" name="logo" id="logo">

<script>
 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 = "24px Calibri";
  var y=10;
  var cnt=0;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0);
  ctx.fillStyle = 'black';
  ctx.fillText('A special Offer from AT&T', 160, 70);
  ctx.fillText('20% OFF', 190, 110);
  ctx.fillText('Your entire purchase', 190, 150);
  ctx.fillText('drawing', 60, 280);
  var dataURL=document.getElementById('canvas').toDataURL();
</script>

这是我的输出图像

在这里我可以设置图像上的文字但是我的要求是我需要通过从左侧中间位置的某个位置选择此图像上的输入文件字段来设置一个徽标。请帮我解决这个问题。

Answer 1

可以做到。确保徽标的位置不会发生变化。

＆＃13;

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("logo");
     var bg = document.getElementById("bg");
    ctx.drawImage(bg, 10, 10,220,227);
    ctx.drawImage(img, 10, 10,100,100);
};

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="bg" src="http://www.seobook.com/images/smallfish.jpg" alt="The Scream" width="220" height="277">
<img id="logo" src="https://pbs.twimg.com/profile_images/655066410087940096/QSUlrrlm.png" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p>

</body>
</html>

＆＃13;

只需更改第二个绘制图像的位置即可。更多reference。

Answer 2

你可以通过以下方式实现这一目标......

var canvas = document.getElementById('canvas'),
    img = document.getElementById('requiredImage'),
    logo = document.getElementById('logo'),
    ctx = canvas.getContext('2d');
var y = 10;
var cnt = 0;

function drawImage() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);
    ctx.fillStyle = 'yellow';
    ctx.font = "24px Calibri";
    ctx.fillText('hello', 160, 70);
    ctx.fillText('hii', 190, 110);
    ctx.fillText('copun', 190, 150);
    ctx.fillText('drawing', 60, 280);
}

// upload local image
logo.onchange = function (e) {
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.src = url;
    img.onload = function () {
        ctx.drawImage(img, 0, 0); //set position as you wish
    };
};

var dataURL = document.getElementById('canvas').toDataURL();

canvas{border: 1px solid black;}

<img class="img-responsive thumbnail" style="margin-bottom:9px; display:none" onload="drawImage()" src="http://i.imgur.com/Q6aZlme.jpg" crossorigin="anonymous" id="requiredImage">
<input type="file" name="logo" id="logo">
<canvas id="canvas" name="canvas" class="img-responsive thumbnail" style="margin-bottom:9px;"></canvas>

如何使用Canvas和Javascript在现有图像上设置一个选定的徽标

2 个答案: