Add whiteborder and text to Image RRS feed

  • Question

  • User944339287 posted

    Hi guys<g class="gr_ gr_9 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation multiReplace" id="9" data-gr-id="9">..</g> I've nearly achieved my goal but got little improvement to my code.

    1) How do I make that area to White Color as well?
    * I knew that it's because I changed the following code from
    totalCanvasSize.Height - (borderWidth * 2)
    totalCanvasSize.Height - (borderWidth * 4)

    2) How can <g class="gr_ gr_385 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="385" data-gr-id="385">i</g> show emoji image and text properly? and allow me to align text & image to left or center. (now is absolutely align to right)

    Below is my existing code:

    Code Behind

        Protected Sub btn_submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_submit.Click
            Dim path As String = MapPath(Context.Request.ApplicationPath & "/upload/JellyFish.jpg")
            Dim image As System.Drawing.Image = System.Drawing.Image.FromFile(path)
            Dim imageWithWhiteBorder As System.Drawing.Image
            imageWithWhiteBorder = AppendBorder(System.Drawing.Image.FromFile(path), 20)
            Dim watermarkText As String = HttpUtility.HtmlDecode(Me.txt_richTextBox.Text)
            'Get the file name.
            Dim fileName As String = "JellyFishWithText.jpg"
            'Read the File into a Bitmap.
            Using bmp As New Bitmap("C:\JellyFish.jpg", False)
                Using grp As Graphics = Graphics.FromImage(bmp)
                    'Set the Color of the Watermark text.
                    Dim brush As Brush = New SolidBrush(Color.Black)
                    'Set the Font and its size.
                    Dim font As Font = New System.Drawing.Font("Arial", 20, FontStyle.Regular, GraphicsUnit.Pixel)
                    'Determine the size of the Watermark text.
                    Dim textSize As New SizeF()
                    textSize = grp.MeasureString(watermarkText, font)
                    'Position the text and draw it on the image.
                    Dim position As New Point((bmp.Width - (CInt(textSize.Width) + 10)), (bmp.Height - (CInt(textSize.Height) + 10)))
                    grp.DrawString(watermarkText, font, brush, position)
                    Using memoryStream As New MemoryStream()
                        'Save the Watermarked image to the MemoryStream.
                        bmp.Save(memoryStream, ImageFormat.Png)
                        memoryStream.Position = 0
                        'Start file download.
                        Response.ContentType = "image/png"
                        Response.AddHeader("Content-Disposition", Convert.ToString("attachment; filename=") & fileName)
                        'Write the MemoryStream to the Response.
                    End Using
                End Using
            End Using
        End Sub
        Public Function AppendBorder(ByVal original As System.Drawing.Image, ByVal borderWidth As Integer) As System.Drawing.Image
            Dim borderColor As Color = Color.White
            Dim mypen As New Pen(borderColor, borderWidth * 2)
            Dim totalCanvasSize As New System.Drawing.Size(512, 512)
            Dim newImageRectWithoutBorder As New System.Drawing.Rectangle(borderWidth, borderWidth, totalCanvasSize.Width - (borderWidth * 2), totalCanvasSize.Height - (borderWidth * 6))
            Dim img As New System.Drawing.Bitmap(totalCanvasSize.Width, totalCanvasSize.Height)
            Dim g As Graphics = Graphics.FromImage(img)
            g.DrawImage(original, newImageRectWithoutBorder)
            g.DrawRectangle(mypen, 0, 0, totalCanvasSize.Width, totalCanvasSize.Height)
            Return img
        End Function
        <form id="form1" runat="server">
        <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
        <script type="text/javascript">
                selector: 'textarea',
                plugins: "emoticons",
                toolbar: "emoticons",
                width: 500
        <asp:TextBox ID = "txt_richTextBox" runat="server" TextMode="MultiLine" />
        <asp:Button ID="btn_submit" runat="server" Text="Submit" />

    Monday, April 15, 2019 3:45 AM

All replies

  • User288213138 posted

    Hi  Adagio_Botjek,
    According to your description, I  made a demo. The width and height of the image can be determined by the whiteborder, text location you can use the size of the X-axis Y-axis to set.
    The code:

    Class SurroundingClass
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            Dim image As Image = Image.FromFile("C:\Users\samwu\source\repos\Web Forms Case\Web Form\Web Form\Picture\p1.png")
            Dim map As Bitmap = WhiteUp(image, 50)
            Dim grp As Graphics = Graphics.FromImage(map)
            drawText(grp, "This is apicture", "Microsoft Accor black", 10, FontStyle.Bold, 250, 520)
        End Sub
        Public Function WhiteUp(ByVal Img As Image, ByVal Margin As Integer) As Bitmap
            Dim Width As Integer = Img.Width
            Dim Height As Integer = Img.Height
            Dim dpiX As Single = Img.HorizontalResolution
            Dim dpiY As Single = Img.VerticalResolution
            Dim BitmapResult As Bitmap = New Bitmap(Width + Margin, Height + Margin, PixelFormat.Format24bppRgb)
            BitmapResult.SetResolution(dpiX, dpiY)
            Dim Grp As Graphics = Graphics.FromImage(BitmapResult)
            Dim Rec As System.Drawing.Rectangle = New System.Drawing.Rectangle(0, 0, Width + Margin, Height + Margin)
            Dim mySolidBrush As SolidBrush = New SolidBrush(System.Drawing.Color.White)
            Grp.FillRectangle(mySolidBrush, Rec)
            Grp.DrawImage(Img, 25, 25, Rec, GraphicsUnit.Pixel)
            Return BitmapResult
        End Function
        Public Sub drawText(ByVal g As Graphics, ByVal txt As String, ByVal fontName As String, ByVal fontSize As Integer, ByVal fontStyle As FontStyle, ByVal x As Single, ByVal y As Single)
            Dim font As Font = New Font(fontName, fontSize, fontStyle, GraphicsUnit.Pixel)
            Dim brush As Brush = New SolidBrush(Color.Black)
            g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAliasGridFit
            g.DrawString(txt, font, brush, x, y, StringFormat.GenericDefault)
        End Sub
    End Class

    The Result:
    Best Regard,

    Tuesday, April 16, 2019 8:38 AM