WordPack

Filling the shape with words.It should be a project write for my girl.

What does this project want to do

Just fill a shape with the special words. It looks cool,does it? Think about that,You Upload a picture with your girl friend's outline in it.Then,type in your girls's name and yours,just wait a minute,it comes up.the two names consist of the shape.

How it works.

It uses many canvas API.

---

• context.getImageData(). used for getting every pixel's rgba data.It is called in function eachImgData,and setMosaic.

• fillText().||

• toDataURL. get the transformed image data for downloading.

draw a lego.

Thanks for theJian & zzm 's suggestion.

Tracks

• version 0.1:setMosaic & fillPixel function finished.Based on getImgData.
• version 0.2:basic dark & light css added.some bug fixed.
• version 0.3:open local picture and run page with it.Based on Filereader&dataURL.
• version

#THINGS need to be finished.

• word-cloud api:
• split the mosaic.js as an independent part.
• mobile-service adjust.
• media query .

Reference

• image_fill_word
• Words_Filling
• legofy
• 微博关键字
• Image Resize
• RGB
• Py数字图像处理
• wordcloud2.js
• wordcloud html5

Other Reference

• CSS bulb
• 濒临灭绝的动物
• Sound Manager
• Modal Window Effects