HTMLを使用して画像にテキストを追加、修正、表示する方法は？

Question

私はイメージにテキストを追加しなければならないプロジェクトを持っています。それを追加した後に新しいイメージになり、新しいイメージを表示する必要があります。

イメージを取得できました。イメージにテキストを追加できます。

HTML：

<img src="pic_mountain.jpg" style="width:304px;height:228px;"/> 
<h2>A Movie in the Park<br />Kung Fu Panda</h2> 

CSS：

.image { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 
h2 { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    width: 100%; 
} 

私の最初の画像のようなある：

テキストを追加した後、それは次のようになります。

今、私はこのイメージを新しいイメージとして修正する必要があります。私は元の画像に影響を与えることなく、その新しい画像を表示に使用したいと思っています。

解決方法はありますか？

他のjQueryを使用してテキストまたはを追加するための他の方法があった場合は、...

Answer 1

を私に提案してくださいPHPは文字通り無数のライブラリを持っているだけでこれを行うためのが、すべての怠け者だったと誰もが新しいフレームワークを学ぶことを望んでいませんそうHERESにいくつかの単純なPHPの関数は、ちょうどこの

注を行うには：あなたがPHPを使用しなければならないでしょうし、その後、AJAX、私はあなたがJavaScriptで求めて何をするためにどのような方法を知らないよ、リアルタイムでそれを更新する

<?php 
    $image_path = "images/image.jpeg"; 

    //Set the Content Type 
    header('Content-type: image/jpeg'); 

    // Create Image From Existing File 
    $jpg_image = imagecreatefromjpeg($image_path); 

    // Allocate A Color For The Text 
    $white = imagecolorallocate($jpg_image, 255, 255, 255); 

    // Set Path to Font File 
    $font_path = 'fonts/font.TTF'; 

    // Set Text to Be Printed On Image 
    $text = "text to write to image"; 

    // Print Text On Image 
    imagettftext($jpg_image, 25, 0, 75, 300, $white, $font_path, $text); 

    // Send Image to Browser 
    imagejpeg($jpg_image); 

    // Clear Memory 
    imagedestroy($jpg_image); 
?> 

これは、JPEGを使用した例ですが、PHPはPNG、GIF、およびいくつかの他の画像タイプ

Answer 2

こんにちはため、まったく同じ機能をサポートし、今あなたが

.imgSec { 
 
    position: relative; 
 
    width: 300px; 
 
    margin:0 auto; 
 
} 
 
.imgSec img{width:100%;height:228px;} 
 
.imgSec h2 { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    width: 100%; 
 
}

<div class="imgSec"> 
 
<img src="http://i.stack.imgur.com/8GnUj.jpg" /> 
 
<h2>A Movie in the Park<br />Kung Fu Panda</h2> 
 

 
</div>

このように試すことができませんしてくださいということ

Answer 3

HTML

<div class="item"> 
<img src="http://i.stack.imgur.com/8GnUj.jpg" style="width:304px;height:228px;"/> 
<h2>A Movie in the Park<br />Kung Fu Panda</h2> 
</div> 

とCSSは、あなたがCanvas 2D APIを使用することができます

.item { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 
h2 { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    width: 100%; 
} 

Answer 4

です。

2つのステップ：

• あなたの画像を描画するdrawImage()を使用しています。
• fillText()を入力してテキストを入力してください。

完全なデモ：

/* okay there are actually a few more steps.. */ 
 

 
var img = new Image(); 
 
img.crossOrigin ='anonymous'; // not needed if you're not using images from an other domain 
 
img.onload = function(){ // remember to wait before your image has loaded 
 
    // our canvas element 
 
    var canvas = document.createElement('canvas'); 
 
    // its drawing context 
 
    var ctx = canvas.getContext('2d'); 
 
    // don't resize the canvas with css 
 
    canvas.width = img.width; 
 
    canvas.height = img.height; 
 
    
 
    ctx.drawImage(img, 0,0) 
 
    
 
    ctx.font ='25px sans-serif'; 
 
    ctx.fillText('Hello world', 10, 40); 
 
    // just using it as a backgroundImage to demonstrate that you can export the result, you could also just append the canvas into the doc, or use the `toBlob()` method for use with FileSaver.js e.g. 
 
    document.body.style.backgroundImage = 'url('+canvas.toDataURL()+')'; 
 
    out.href = canvas.toDataURL(); 
 
    }; 
 
img.src = 'https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png?dl=0';

body{ 
 
    width: 100vw; 
 
    height:100vh; 
 
    }

<a id="out"> show me an image instead </a>