2012-07-16 9 views
7

Tôi đang tạo trang web cho người dùng nơi họ có thể tạo biểu trưng tùy chỉnh. Đối với điều này tôi cần một cơ sở để thêm văn bản động từ hộp văn bản mà người dùng sẽ điền vào và văn bản sau đó sẽ xuất hiện trên hình ảnh được chọn. Có cách nào, nói cho Javascript, thông qua đó tôi có thể thực hiện các kịch bản trên? Sẽ đánh giá cao bất kỳ đề xuất nào về cách tôi có thể thực hiện việc này.Thêm văn bản động trên hình ảnh

HTML của tôi cho đến nay là:

<html> 
    <body> 
    <input type="text" id="submit"/> 
    <img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" /> 
    </body> 

và jQuery tôi:

$('#submit').change(function() { 
    $('#toChange').text($('#submit').val()); 
}); 

nhưng tôi đã không được thành công cho đến nay.

+0

Nếu bạn đang tạo hình ảnh bằng PHP, bạn sẽ phải chuyển giá trị hộp văn bản cho tập lệnh và sau đó tải lại hình ảnh đã tạo. Bạn có thể sử dụng một cuộc gọi AJAX để gửi văn bản và nhận lại một URL mới cho hình ảnh. – Alex

+0

Bạn có nghĩa là bạn muốn văn bản xuất hiện trên hình ảnh hoặc thực sự được lưu dưới dạng tệp có văn bản trên đó? JavaScript không thể làm điều sau - bạn cần một cái gì đó như [PHP GD] (http://www.php.net/gd) – Utkanos

+1

Ah, bạn muốn làm một cái gì đó như [** www.cooltext.com ** ] (http://www.cooltext.com) rồi. – arttronics

Trả lời

9

Bạn có thể thử như sau:

  1. Sử dụng HTML5 Canvas để vẽ lại hình ảnh của bạn Ví dụ: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
  2. Ngày đầu của hình ảnh render sử dụng HTML5 Canvas API để rút ra những văn bản mà bạn muốn với font cần thiết thuộc tính Tham chiếu: https://developer.mozilla.org/en/Drawing_text_using_a_canvas

Hy vọng hữu ích của nó.

+1

Tất cả các điểm tốt - nhưng OP muốn lưu tệp hình ảnh với văn bản trên đó, tôi nghĩ vậy. – Utkanos

+0

@Utkanos và user1528490 Bạn có thể lưu ngữ cảnh Canvas dưới dạng tệp hình ảnh. Ví dụ ở đây: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/. Hy vọng nó giúp! – 18bytes

+0

Về lưu và tải xuống canvas dưới dạng hình ảnh, hãy xem tại đây: http://jsfiddle.net/softvar/5hnyf/ – Kurtis92