允許用戶在圖像上編寫自定義文本

所以我想要做的是讓我的用戶在文本字段中寫入內容，並且他們寫入的任何內容都會在圖像上顯示，以便它成爲圖像的一部分，並且它們可以保存到他們的電腦。允許用戶在圖像上編寫自定義文本

我將使用字段這樣

<input type='text' id='Text' name='Text' maxlength="10">

來源

2013-07-10 Ayoub

您可以考慮使用'帆布'元素。 – mohkhan

這個完整的例子，讓我們您

1.write文本你想

2.加圖像

（FileReader及Canvas）的需要現代瀏覽器

<!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>

來源

2013-07-10 07:24:51 cocco

這正是我想要的，謝謝，如果你不介意我問你一件事。我如何爲文本添加邊框？ – Ayoub

http://www.w3schools.com/tags/canvas_stroketext.asp – cocco

你可以使用<canvas>和及其JavaScript API：

加載圖像到畫布
從以文本輸入並將其添加到畫布上
將位圖數據從畫布中取出並使用data/uri將其添加到新的<img>標記。

來源

2013-07-10 07:08:39 defaude

好吧，所以我個人沒有必須使用這個之前，但我知道PHP有一些內置函數來執行所述任務。這裏是你可以找到它的地方。我希望它能幫助:)

http://php.net/manual/en/function.imagettftext.php

好了，所以做一些更深入的研究之後，我覺得這可能是有益的:)

從本質上講，這就是你想使用形式：

<form action="ProcessImage.php" method="post"> 
<input type="file" name="im"/> 
<input type="text" name="msg"/> 
<button type="submit">Submit</button>

這裏就是你要使用的PHP代碼，簡稱ProcessImage.php：

<?php 
// Set the content-type 
header('Content-Type: image/png'); 

// Create the image 
$im = $_POST['im']; 

// Create some colors 
$white = imagecolorallocate($im, 255, 255, 255); 
$grey = imagecolorallocate($im, 128, 128, 128); 
$black = imagecolorallocate($im, 0, 0, 0); 
imagefilledrectangle($im, 0, 0, 399, 29, $white); 

// The text to draw 
$text = $_POST['msg']; 
// Replace path by your own font path 
$font = 'arial.ttf'; 

// Add some shadow to the text 
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text); 

// Add the text 
imagettftext($im, 20, 0, 10, 20, $black, $font, $text); 

// Using imagepng() results in clearer text compared with imagejpeg() 
imagepng($im); 
imagedestroy($im); 
?>

來源

2013-07-10 07:09:56

允許用戶在圖像上編寫自定義文本

回答

相關問題