Question

我需要将文本添加到已上传的图像中，然后将带有文本的新图像上传回服务器。

我想使用已经在服务器上的图片，这意味着我有一个变量$image_location直接链接到已经设置的图像。

我在StackOverflow上找到了一些代码，可以将文本放在通过上传表单上传的图片上。

我的问题是如何更改它，以便我可以使用服务器上已有的图片而不是上传图片。

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var
maxSize=600, // Max width or height of the image
font='italic small-caps bold 40px/50px arial', // font style
fontColor='white', // font color
textX=50, // text x position
textY=50, // text y position
h=function(e){
 var fr=new FileReader();
 fr.onload=function(e){
  var img=new Image();

  img.onload=function(){
   var r=maxSize/Math.max(this.width,this.height),
   w=Math.round(this.width*r),
   h=Math.round(this.height*r),
   c=document.createElement("canvas"),cc=c.getContext("2d");
   c.width=w;c.height=h;
   cc.drawImage(this,0,0,w,h);

   cc.font=font;
   cc.fillStyle=fontColor;
   cc.fillText(document.getElementById('t').value,textX,textY);

   this.src=c.toDataURL();
   document.body.appendChild(this);
  }
  img.src=e.target.result;
 }
 fr.readAsDataURL(e.target.files[0]);
}
window.onload=function(){
 document.getElementById('f').addEventListener('change',h,false);
}
</script>
</head>
<body>
1.write text
<input type="text" id="t">
2.add image
<input type="file" id="f">
</body>
</html>

Answer 1

您可以将图像加载到画布，如下所示：

var img = new Image();
img.onload = function(){
    c.width = img.width;
    c.height = img.height;
    cc.drawImage(img, 0, 0, img.width, img.height);
}
img.src = '/path/to/image.jpg';

因此看起来您唯一需要更改的是img.src变量

使用javascript

1 个答案: