在javascript中的图像上写文本

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

我想使用已经在服务器上的图像，这意味着我有一个变量$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>

来源

2015-05-15 xdwonder911

您好，欢迎来SO ，你为了达到这个目的而尝试过什么？另外，请阅读http://stackoverflow.com/help/how-to-ask。 – Epodax

如果你想使用服务器上的图像，你需要先上传它，或者使用gd库并在php中插入文本。 – jcubic

谢谢，我会给它一个阅读。到目前为止，我已经尝试将img.src更改为图像路径并将输入类型更改为提交，但无论我做什么都是完全无用的，因为可悲的是，当涉及到javascript时，我是一个完整的白痴：S – xdwonder911

您可以将图像加载到画布上，像这样：

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可变

来源

2015-05-15 13:31:14 JKirchartz

谢谢你，我已经做到了，然后我将输入类型从“文件”更改为“提交”，之后它不起作用（图片没有出现）。现在我问如何用提交而不是文件来显示图像。我假设它在脚本中的某个地方，但我尝试了大部分线路，但无法使其工作。我真的不得不开始学习这个javascript尽快。 – xdwonder911

在javascript中的图像上写文本

回答

相关问题