I'm making a website for a local printing company. One of the important requirements of the website is a customize page associated with every product. This page will be having an image of the product and user can upload his logo. This logo will then be presented over the image of the product.
User can move or resize his logo and there is also a textbox in which user can input the text he wants to be printed on the product.
As the user enters text it appears on the product image alongside the logo image he has previously uploaded.
This text should also be movable and and its size can be altered by selecting a font size from a drop down box.
I am thinking of some JavaScript image processing library which provides a support of "Photoshop like layers" but couldn't find any.
I have no clue how to do this. Any help will be much appreciated. Thanks in advance.
Related
I am trying to create an image slider on my webpage that looks similar to the screen you get when you want to see all the apps open in the background of your phone, a la below:
What I want would look very similar to that. I just want the images to be tighter together and horizontal instead of vertical.
Here is a better example:
So, as you can see I have my webpage with the title at the very top and then below that I have all of my images. This is how I want it to look but I also want these images to enlarge if the user hovers over them. When enlarged the image will stay in place and text will appear on the image which the users can read.
Here is another example:
So in the image above, the user has hovered over the image and now it is displaying information and the other images are pushed to the side. The example text is the title text, background image is just the image the user hovered over and the information text is, as the name suggest, the text that gives info.
So my main question here is how I would achieve something like this?
I have an image, that show two or more products, where I would like to open a text popup(or a tooltip) with the product description. Different products can be placed in different position in image. There is a tool or a method that if I insert the coordinate(X:Y) of product can compose the image and with hover or click show the popup/tooltip?
An example can be find on ikea site.
Thanks.
You can use the map/area properties of HTML5 to achieve this.
Refer link
I am trying to load some images from the users camera roll using Ionic 1. I am using a component which allows me to pull the location of the images and compress them so they become thumbnails for displaying.
I have got the point where I can recover the image location however the issue I'm having is displaying it in an img view tag. The component outputs the file location in a format like:
'/var/mobile/Containers/Data/Application/BLAH-BLAH/tmp/B08CABBD-596C-4F1A-8905-C652C9DCBC4D^L0^001_mthumb.png'
I have tried many approaches like moving this image to anther location within the phone, renaming it to a shorter name appending the image with file:// or local:// tags and added the sanitation changes to the ionic.js. Using all of this the image back shrinks in size and doesn't show the image.
Any help would be greatly appreciated.
I am using Google Drive picker (API), the drive has too many image files in it, whenever anyone opens the picker, thumbs keep loading, even after the files are selected and the picker is hidden, that eats up bandwidth very badly, I need to stop this behavior so as to save bandwidth, so I can either hide thumbs from the beginning, or tell the picker callback to stop loading thumbs, but I could not find a way for implementing any of these two approaches.
It is also worth mentioning that the picker loads original size image thumbnails (the thumbnails are just down-scaled original images, and consequently, their size is so huge, so imagine the bandwidth it takes to load a large number of thumbnails).
I see that the picker stops retrieving the thumbnails once I close it. However to reduce the amount of thumbnails, you could set the view mode to list. In this way the UI will show the elements in drive as a list and it will show the extension icon instead of the content thumbnails (eg, Spreasheets, docs, pdf, etc). As far as I have tested, only images and videos will show a thumbnail with the content of the file.
As all the files with the same extension will share the same icon, i think this will reduce the bandwidth it will take to load the files.
You can set this view as follows:
.addView(new google.picker.DocsView().setIncludeFolders(true).setMode(google.picker.DocsViewMode.LIST))
Hope this helps.
I am trying to protect my website content by putting scripts to deny the right click and to see the source code in the browsers. But this is not sufficient. I want to know how to watermark only the original file and not the image that is seen on the webpage.
For example, an image that users can see on the web without watermark and when they click right and select "Open image in a new tab" they go to "website.com/image.png" and they see the watermarked image.
Is this possible?
P.S.: Sorry for my bad English, I'm not a good writer.
Thanks
Serving users a image which is not watermarked is not a good idea because they can download it easily so the best way will be watermark every images and render it users by slicing it. Slice the image and show only the image and hide the water mark and whey they will open it in new window full image will be loaded with the water mark
For creating Watermark on the fly with php
http://www.developphp.com/view.php?tid=1147
And for slicing image i don't know how to do that but i know it is possible but there are many ways to do it like you can zoom it to hide watermarks.
First of all, this will not stop them from downloading the image without watermark, because they can disable javascript, or simply right click on the image and save it right there, or the worst: simply do a print screen and save it to paint then crop it. Probably the best option is to have watermark on all of your images, on the website and on the direct access.