Text from image

It took for one project to make text with flowers of letters from the desired image. It would be wrong to do everything from pictures, and let the text be better processed by search engines. The necessary plug-in was not found and it was interesting to write your own.

In short


Demo 1 | Demo 2 .

How to use
')

<script type= "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<script type= "text/javascript" src= "jquery.pictotxt.js" ></script>


Launch the plugin, with the required parameter: image_src - link to the image *.

$( function (){
$( ".text_image" ).pictotxt({image_src: 'text_bg.jpg' });
});


We receive the text from our picture. When resizing a block with text, call pictotxt again.

Options

Option	Description
imagesrc	link to the picture, from your domain, * otherwise: Security error "code:" 1000, SECURITY_ERR: DOM Exception 18, etc.
filltype	Fill text with picture: repeat - tile text area no-repeat - do not repeat the background stretch - scroll across the width \ height of the text area
invert	invert the color of letters relative to the image, accept true / false
show_img	show picture background under text, takes true / false

Requirements
It works in all browsers with support for canvas, with a large number of letters can be thoughtful.

Download pictotxt plugin ↓

UPD: Updated plugin (v1.1), increased text rendering speed.