Put Text on Image from database while editing image in Canvas - image

I have a question and i am confused what strategy i should choose to solve this.
Here is the description.
I have a gallery which is managed on user authentication.
Next I have basically a simple form which saves quotes into database.
Selecting an image from gallery it is opened in a canvas. I am using Adobe Creative SDK.
Here is the demonstration image.
Next i have to select(copy) text from database to add(paste) in text field but i have no idea how to do it.
This is the task i have to do for a client. I have never seen a similar example. This is seems unique. Please provide some suggestion on doing it.

Adobe Creative SDK's editor will not allow you to pre-populate text on an image so it's out of the question for this task. You could probably find a way to overlay text on top of the Adobe editor, but then the issue with saving the image rears its head.
If you don't need any of the other editing tools, you could simply create a canvas with the image, overlay the text and allow the user to choose the font, position the text, apply stamps, etc...
Once they're done, wire up a save button to post the field with the contents of canvas.toDataURL('image/png') and have something server-side to save it.
It will be more work than using someone else's widget, but the client will be in control of their own destiny (and have a working product which they wouldn't have before).
Keep it simple and build from there.

Related

How to add container or panel in flash and resize them using actionscript 3.0

I want to show some image in a flash. When I click an image, the image is up as like as image shown below.
when i click the image:
but the problem is when i click the image in that group, there is a gap between images. I want to attach them. I can not solve the problem. please anybody help me to solve the problem.
If you're using Flex, this is fairly trivial. You set the cards in an HGroup (calculating the gap will be difficult, but not impossible) and simply remove selected cards from that group and place them in another. After the card is removed, your other cards will be realigned by the layout automatically.
If you're not using Flex, I suggest extracting the code you used to layout the cards in the first place into a separate function. When a card is selected, you move the card out of the DisplayObjectContainer it is currently in and place it in another and then simply call the layout function again. This is the same method as I would use with Flex, although a little less automated due to the lack of Flex's layout engine.

Add text layer to PDF of scanned handwritten notes in OSX

While in class I like to take handwritten notes, afterwards I scan them and then type them up (helps me remember them and also makes them easily searchable). The main issue is I have is I use A LOT of drawings and complex math and converting the math formulas into latex (or word) is very time consuming and the drawings require that I keep the PDF and the text document. What I would like to do is take the basic text that I have typed myself (no OCR) and add a text layer to the PDF's that way the PDF's will be searchable and I can save a lot of time by not converting the math or drawings.
I've looked into Preview, PDFpenPro, acrobat, a couple of linux programs but so far I haven't really found anything that will do this.
Any idea of how I could do this or a program to use?
I also scan my notes. Sometimes I go back and add some text to them using this technique:
Open up the scanned pdf in Preview, then click on the "Edit" button in the top right corner, then the "Text tools" button on the left side (its a little box with Aa in it). From there you can drag open a text box and type into it.
Now the secret trick is that if you save it here as it is and try to open it in your ipad using PDFExpert or some other program then the text might not be there. So here's how to go through that slight hiccup: After you've annotated your notes how you want instead of just saving it as a pdf, use the Print option: File->Print or Command+P. Now click the PDF button on the left to "Save it as a pdf". Now that its printed you can open it and search it in any program that reads pdfs. Attached is an example.
One other thing, it seems like maybe you want to write over your existing handwritten text with typed text? I'm not sure if this is the best way. But if that's what I was trying to do I would:
Scan my notes
Read through them, typing them up as you said
Open the scanned notes in Photoshop or some other program
Draw a giant White Fill White Stroke rectangle over the handwritten text
Save it as a pdf
Do the technique above and copy and paste the typed text from step 2.
I hope this helps. And I wish you luck, I'm still working out the kinks myself for scanned notes but the possibilities have me pretty excited!
EDIT: I just checked out PDFpenPro, which I highly recommend because you don't have to go through that printing trick, you can just save the pdf document after annotating and other programs will recognize the annotations.

Flash / Actionscript: How to insert images in dynamic text (In line image)?

I want to insert images in dynamic-text-box(s) which should be inline.
Detail:
I am preparing an application using flash CS4; The application is just like a chat room which will show conversation the only difference in this; it will show stored messages (stored in XML file). I want to insert smiling faces (emotions) in text body (using html tags) but the problem is that image is not inline (like in chat room [yahoo, hotmail, etc.]).
I have no idea what to do......
Please paste your code where you set the dynamic-text-box.text
Make sure that you wrap the whole text in html braces, not only images.
You can embed images in any HTMLText field using the tag.
The image, however, must be loaded externally. You can't get images stored in your library.
Its good to get the solution of my problem but sad I got solution by myself :-P
The simplest solution I got is, to update my Flash CS4 to Flash CS6; in Flash CS6 text (TextField) have extra feature like TLF (Text Layout Framework). By use TLF I can insert graphics in text area and inserted graphics are inline as well.
Problem Solved :-)

Fancy Apps image gallery with comments

I currently have a basic Fancy Box gallery (link calls larger image and title that is then displayed in the Fancy box).
How/ What would be the best way to integrate a comments system into this? Each photo has member comments but I need a way to show these next to the photo in Fancybox.
You may consider my fancybox "a la" Facebook ;)
http://www.picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html
You could insert any html in the right area.
Simple, Just like you display each picture with their independent comments, you will just display them into a larger box on click on a picture. just like facebook. Use whatever ajax u are currently using in the page into the box.

Disable to download image from canvas

I added image to canvas element, but visitor than can save that image to local comp.
Is there any way to disable that option? I don't know, putting some transparent image over?
Thx
So i thought this can help you just disable rightclicks:
$('#canvas').bind("contextmenu",function(e){
return false;
});
None of this (not even image slicing) stops a user from simply copying the screen on to the clipboard and pasting it into MSpaint or any other image utility, and saving the result. Its trivial to do; And a transparency image is no impediment to this.
The only effective options that I know of are (as was said), watermarking or low quality.
*Avoid 1 pixel wide lines or dot watermarks that can be removed easily with a Photoshop filter.
~If its commercial... You could have a pay-wall, and steganographically embed the purchaser's name and or information into the image (or preview), such that if it does get used without permission, at least you know who did it.
Basicly: if your image is loaded by the Browser you can never protect the user to download it, because if the browser knows where to find the image, the user can find this out as well. So all this download protection only works for users not familiar with computers and the internet and nowadays i think most people are able to download such an image if they really want to.
If you want to prevent users to use your images for their work, you can use images with watermarks or in a lower resolution otherwise can you tell what reason do you have to prevent users from downloading?
I found this question in review of an HTML5 captcha alternative I'm developing. My goal is not to "prevent" users from downloading the image as much as blocking OCR on the image capture. To prevent it, I added a onclick event to the canvas object that resets the canvas element on click. The user can "download" it, but it no longer is the original code presented.

Resources