用javascript在图像上写入文本
我需要添加文本到一个已经上传的图像，然后上传新的图像与文本回到服务器上 我想使用服务器上已经存在的映像，这意味着我有一个变量用javascript在图像上写入文本,javascript,php,Javascript,Php,我需要添加文本到一个已经上传的图像，然后上传新的图像与文本回到服务器上 我想使用服务器上已经存在的映像，这意味着我有一个变量$image\u location直接链接到已经设置的映像 我在StackOverflow上找到了一些代码，可以将文本放在通过上传表单上传的图像上 我的问题是，我将如何更改它，以便我可以使用服务器上已有的图像，而不是上载图像 <!doctype html> <html> <head> <meta charset="utf-8"&g
$image\u location<!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>
变量
maxSize=600，//图像的最大宽度或高度
font='italic小写粗体40px/50px arial'，//字体样式
fontColor='white'，//字体颜色
textX=50，//text x位置
textY=50，//text y位置
h=函数（e）{
var fr=new FileReader（）；
fr.onload=功能（e）{
var img=新图像（）；
img.onload=函数（）{
var r=maxSize/Math.max（这个.宽度，这个.高度），
w=数学圆（此宽度*r），
h=数学圆（此高度*r），
c=document.createElement（“canvas”），cc=c.getContext（“2d”）；
c、 宽度=w；c.高度=h；
cc.drawImage（这个，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（本文件）；
}
img.src=e.target.result；
}
fr.readAsDataURL（e.target.files[0]）；
}
window.onload=function（）{
document.getElementById（'f'）。addEventListener（'change'，h，false）；
}
1.写文本
2.添加图像
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