Cut text out of image RRS feed

  • Question

  • User-866747463 posted

    OK, this might be kinda hard to explain, so bear with me.  I have a client that wants to sell customizeable products on their site.  The customer will be able to select a background, foreground, and personal message for each product.  The background and foreground are png images of different materials the product can be made out of.  When the customer makes a selection, the image changes to show the current selected options.

    When the customer enters a personal message we draw a string and output a png image of the text and place it over the other layers.   All of this is working so far, heres my question.

    I need to take the png created of the text string, and "subtract" it from the other layers of the image.  Basically cut out the text from the foreground layer to show through to the background.

    Here is a basic example of what I need to do.


    Cutout text

    Sample 1

    Sample 2

    I can get everything up until I need to cut the text out of the other image.  Basically just delete the part of the image where the two PNG's intersect.

    Any help would be very much appreciated.


    Monday, September 28, 2009 2:42 PM

All replies

  • User511232196 posted


        Tyr using Graphics in the code to display through the background.

    Eg: imagegraphics as graphics=me.creategraphics()

    Wednesday, September 30, 2009 7:16 AM
  • User-866747463 posted

    im not sure i know what you mean.  I can get the images "built" and placed in the right spots, and can create a png of the text, but am unable to actaully remove or "cut out" the text from the rest of the image.

    Is there such a thing as image intersection, where the two non-transparent parts of the images overlap?

    Wednesday, October 7, 2009 9:13 AM
  • User511232196 posted


        I suggest you to use the "format" key word for Inserting and deleting the text when ever you want.


    dim format as stringformat= new stringformat()

    format.linealignment=alignment.near or alignment.center or alignment.far

    format.alignment=alignment.near or alignment.center or alignment.far


    imagegraphics.drawstring("your text", font, brushes.black, rectanglef.op_implicit(rect), format)

    Use the above code for inserting and deleting text. If any further issues please revert back.

    Thursday, October 8, 2009 1:41 AM