如何在使用javaScript的圖片文件（png）中添加文本？

我發現我不能這樣做（在圖片中添加文字），我發現了一種與JAVA的方式，但我很喜歡通過使用Javascript找到一種方式。如何在使用javaScript的圖片文件（png）中添加文本？

2013-06-05 user2456922

你只是希望它看起來像文本添加到圖片，或做你實際上需要修改png文件嗎？ – user2000008

只是出於興趣 - 你爲什麼要這麼做？您可以在圖片上放置文字。如果這是水印或類似的東西，如果用戶禁用JS，這將無法正常工作。 – MarioP

你需要永久修改PNG，還是隻需要在網站上顯示圖片時顯示文字？它需要用Javascript嗎？你會對CSS感到滿意嗎？ – John

您可以用帆布做的，

<canvas id="canvas" width="340" height="340"></canvas>

腳本，

function addTextToImage(imagePath, text) { 
    var circle_canvas = document.getElementById("canvas"); 
    var context = circle_canvas.getContext("2d"); 

    // Draw Image function 
    var img = new Image(); 
    img.src = imagePath; 
    img.onload = function() { 
     context.drawImage(img, 0, 0); 
     context.lineWidth = 1; 
     context.fillStyle = "#CC00FF"; 
     context.lineStyle = "#ffff00"; 
     context.font = "18px sans-serif"; 
     context.fillText(text, 50, 50); 
    }; 
} 
addTextToImage("http://www.gravatar.com/avatar/0c7c99dec43bb0062494520e57f0b9ae?s=256&d=identicon&r=PG", "Your text");

http://jsfiddle.net/wAY6Y/

來源

2013-06-05 19:04:10

這可能會幫助我，我正在努力... thnx很多chamika – user2456922

@ user2456922：''circle_canvas .toDataURL（）'會給你圖像數據的URL。 –

如何在使用javaScript的圖片文件（png）中添加文本？

回答

相關問題