Write Text On Image in ASP.NET

[ASP.NET] Hướng dẫn chèn chữ vào hình ảnh

Write Text On Image in ASP.NET
Nguồn: flickr.com – Ton Ten

Khi bạn sở hữu một website, bạn chia sẻ hình ảnh lên đó, và lý do nào đó bạn không muốn người khác sử dụng lại. Ví dụ như đó là hình ảnh ngôi sao nổi tiếng mà bạn chụp được. Ảnh sản phẩm bạn đang kinh doanh, không thể cho đối thủ cạnh tranh lấy và sử dụng trên website của họ, hoặc đơn giản là bạn muốn đánh dấu bản quyền lên hình ảnh của mình. Bạn có lý do chính đáng để làm như vậy, và bạn sẽ đánh dấu lên bức ảnh (watermark) của mình. Điều này chúng ta hay gặp khi lướt web, bạn cứ thử vào một trang web bất kỳ, sẽ thấy họ ghi chú lên ảnh logo hay tên website….
Có nhiều công cụ khác nhau giúp bạn làm điều đó, bạn có thể dùng công cụ online như https://www.watermark.ws, hoặc photoshop, mình thì hay dùng phần mềm FastStone Photo Resizer để chèn chữ (chèn logo) lên ảnh. Và còn rất nhiều công cụ khác…
Tuy vậy ở khía cạnh là một lập trình viên, bạn có thể không muốn dùng chúng, vì nó không chủ động. Bạn muốn tạo ra một công cụ hay chức năng hay ho nào đó, hình ảnh đưa lên website của bạn sẽ tự động chèn watermark vào. Thật thú vị phải không nào? Nếu bạn đang lập trình web với ASP.NET thì thật đơn giản để làm điều đó. Chúng ta sẽ sử dụng các thư viện .NET cung cấp sẵn và bắt tay vào ngay thôi. Hướng dẫn sau sẽ giúp bạn chèn chữ lên ảnh trong ASP.NET.

Đầu tiên chúng ta tạo ra một trang TextOnImage.aspx. Trong sự kiện Page_Load chúng ta sẽ viết code cho nó như sau:

Chú ý: Ta cần 2 thư viên sau – hãy thêm chúng vào.

using System.Drawing;
using System.Drawing.Imaging;

Code

 
protected void Page_Load(object sender, EventArgs e)
    {
        // Đường dẫn file ảnh. 
        string imageFile = Server.MapPath("~/images/girlvn.jpg");
        string textToWrite = "AO DAI VIET NAM";

        // Tạo đối tượng Bitmap truyền vào đường dẫn File ảnh
        Bitmap myBitmap = new Bitmap(imageFile);
        // Tạo đối tượng Graphic từ Bitmap
        Graphics myGraphics = Graphics.FromImage(myBitmap);
        // Định dạng Style
        StringFormat myStringFormat = new StringFormat();
        myStringFormat.Alignment = StringAlignment.Near;

        myGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
        Font myFont = new Font("Tahoma", 35, FontStyle.Regular);
        Color fontColor = Color.White;
        SolidBrush myBrush = new SolidBrush(fontColor);

        // Vẽ lại hình ảnh, chèn nội dung mới vào.
        myGraphics.DrawString(textToWrite, myFont, myBrush, new Point(430, 410), myStringFormat);

        // Xuất hình ảnh mới
        Response.ContentType = "image/jpeg";
        myBitmap.Save(Response.OutputStream, ImageFormat.Jpeg);

        // Dùng code này nếu lưu ảnh vào ổ cứng của bạn.
        // myBitmap.Save(Server.MapPath("~/images/aodai.jpg"));
    }

OK. Chúng ta F5 để xem kết quả. Nếu hiện ra như hình ở đầu bài viết thì chúc mừng bạn đã thành công.
Để sử dụng ở trang khác, ở đây chúng ta tạo thêm một trang Default.aspx.
Thêm code này vào và xem kết quả nhé.


Tuyệt vời. Tuy nhiên không dừng lại ở đó, chúng ta muốn nó phải chèn chữ vào hình cho chúng ta chọn, chứ không phải gán cứng như trên.
Chúng ta sửa lại một chút hàm Page_Load như sau: Chỉ cần sửa 2 dòng dưới này thôi nhé

 
string imageFile =Server.MapPath( Request.QueryString["file"]);
string textToWrite = Request.QueryString["text"];

Trên trang Default.aspx thay bằng. Từ nay về sau bạn chỉ cần dùng đường dẫn này thì mọi hình ảnh trên website của bạn sẽ được chèn nội dung vào. Thật đơn giản phải không nào?


Kết quả

Write Text On Image in ASP.NET
Nguồn: flickr.com – Ton Ten

Chúc các bạn thành công.

Published by

tuanitpro

Tôi là Lê Thanh Tuấn, và tôi chia sẻ những điều mình cho rằng nó là thú vị, hay giúp ích cho bạn!

9 thoughts on “[ASP.NET] Hướng dẫn chèn chữ vào hình ảnh”

    1. Cái này Thái có thể viết thành 1 Handler, trước mình hay xài kiểu thu nhỏ ảnh, sau đó chèn text lên. Khi đó nó có dạng này: Handler.axd?file=&text=&w=100&h=100. Như vậy cải thiện tốc độ hiển thị rồi đó. 🙂

Leave a Reply