I want to give my clients the possibility to preview their personalized product.
In a nutshell, personalization means the user specifies some text and positions the text somewhere on an image of the product.
A great example of what I'd like to achieve is this. Select a frame size and then hit Personalize, after you select the occasion and add the text you can chose to preview the product.
The hardest thing to do here, as I see it, is to generate the image. The positioning of text will probably be made in javascript.
Do you have any recommendations?
Just as a note, using scene7 is not a possibility.
Your page does not work for FireFox Mac OS-X:
Error: s_dc is not defined
File: http://imagestr.thingsremembered.com/wcsstore/CustomB2CStorefrontAssetStoreTR/javascript/lightbox.js
Line: 427
If you really want to do this only by JavaScript you could use Canvas or SVG.
But I guess it would be way easier using PHP Perl or Flash.
This would also increase your cross browser compability.
Related
Basically how do sites like picfont work? Or those cake design sites where you have a template and you insert your picture into the frame and add & stylise text to the textbox?
I have an invite ad for a programme, where people put their picture and name and send out a personal invite. So the graphics guy has done the template. Rather than having 1000 people send him their photos and names, I know it's possible to put the template on a web page and have people upload their pictures, do some custom edit and stylise their names.
HOW do I do this, please? I would like some pointers or code I can implement, please. Thank you.
As mentioned, you will need the <Canvas> element for this, but this needs some custom development as well.
I took the liberty of creating a good starting point: https://jsfiddle.net/Zomry/f8to2fyq/11/
This demo loads a background image, can insert a custom image (assumed to be square here) and allows the location of custom text.
You can change this example to whatever you like. You will need to change the background, the positions of the text and the background and whatever you like to change with it.
Good luck with your project.
I want to completely protect an image, not just right click protection which can be easily thwarted.
I tried editing the graphics folder permissions in cPanel but that made the image disappear.
Is there any other way to protect an image from being stolen that is completely foolproof.
EDIT
I cannot watermark this image so I need another way.
EDIT 2
I just combined the base64 dataURL and right click protection. So I'm pretty much covered except for screenshots which I'm not that worried about. If only it was possible to keep people from taking a screenshot like using some freaky DRM tricks or something.
It can't be done. You can use a few tricks to make it more difficult, but the truth is once you sent that image over the wire, the user will be able to save it, share it, etc.
Watermark your valuable images or publish low res versions of them.
I have an app on the iphone which will display on the screen an html file containing text and an image. I manipulate this html file with javascript and when I'm done I would like the user to be able to take a screen shot but would like it to be done automatically, without pressing the home and power buttons. Is the some javascript or jQuery that, once the final screen is displayed on the phone, automatically takes a screen shot and places it into the photo library on the phone? Thanks.
Short answer: No. Longer answer: Kinda, but not really.
As far as I know, you cannot make iOS take a screenshot nor even download an image through Javascript or similar. However, I guess you could try to draw the DOM in a canvas and then use canvas.toDataURL() (link) to convert it into an image. You could then instruct the user to hold down their finger on the image to bring up the save dialogue and save it to their device.
As I said, not really a pretty solution, but perhaps something you could experiment with if you really need this feature.
Edit: I did a fast Google search and found this javascript library that should make it a bit easier to do what I described above.
I have a form with a upload photo input on it. I wanted to have it so that people clicked an image and the browse folder dialog box would come up. So off I went this morning looking for how to do this.
So now I know that for security reasons this isn't as easy as I might have hoped. However, apparently you can make an image which is about the same size and the input field would be, set it at the same position as the input and set the inputs opacity to zero.
That's all very nice but there's an issue in IE7 where you can type directly into the text field of a file input. Also you're limited to having an image which is the same size as those inputs.
I was excited to find another solution which using the same idea you can have an image of any size and then with JavaScript make it so that the browse button appears (invisibly) behind the mouse pointer whenever the user mouses over the image.
However, I've just found out this solution doesn't work for Opera. And I've no idea why.
I've been at this all day and can't think of any other words to Google about this. Can anyone tell me how to fix this for opera or even if there's a similar solution (where you can have an image 95x95px) around?
I would look in to uploadify. It's probably a little over-the-top for such a "simple" task, but it gives you all those freedoms and more (like multiple file upload ability if that matters).
The hard part is that the only real standard every browser agreed on, with regards to file uploads, is they need to click something, select a file, and have it upload on submit. Beyond that (size, color, method, etc.) is really on the browser developers.
The other thing you may be able to do is make the code browser-based. If it works (via the second method) on everything but opera, may want to stick with it then have JS intervene and default to the 0% opacity method when it is opera).
Unfortunately, I don't know what other options you have though.
I need to create a slide show of some images that can go full screen so it can be displayed via S-Video out.
The software is delivered via the web so a web-based option is needed.
The list of images is dynamic, and I would like to show them in order. The list of photos can change while the slideshow is running, and I would like to add the new photos to the slideshow.
I see two options:
Build it using JavaScript and then use a browser plugin to go full screen. I have a prototype of this, however it displays photos in random order.
Build it using Flash. I know nothing about Flash so I am looking for slideshows that can go full screen.
What would be best? Are there any good, customizable Flash slideshows?
For those interested, I ended up making an Adobe AIR application using HTML and JavaScript. Adobe AIR can go full screen and I was able to leverage the knowledge of HTML and JavaScript I already have. It has worked out pretty well, though there was a rather steep learning curve for the native AIR classes and how to use them.
If you're using Flash, SlideShowPro is a good option that you may recognize from sites like ESPN.
when you say "fullscreen", do you mean taking up ENTIRE screen? if so, javascript is not a tool to use, it must live inside the browser, so you will always have some chrome visible from the browser.
flash can do full screen, on the other hand.
Most browsers allow you to go full screen (even hiding the chrome) with the F11 key (requires user input). Then it's just a matter of scaling the image in javascript to the size of the viewport. If it doesn't exists, it could be written easily enough probably from a preexisting gallery script.
Also, this answer may be helpful
Hope that helps.