I have been studying how this link creates a custom products. The part that confuses me is that whenever you add a necklace with different length, the pendant will still be centered at the end of that necklace. The following image shows where they always place the pendant.
here is a my fiddle. I realized that pendant's styles top and left changes whenever the necklace changes, so somehow they detect the endpoint of the necklace and calculate the top and left of the pendant and place the pendant there.
Therefore, is it possible to detect the pointed area progromatically using either PHP or jQuery image processing? if not, what is the technique used to place the pendant on the right place.
I have updated your fiddle
here is the link Fiddle
Related
I want to know if there is a way in PHP which I could place transparent images on top of each other. The concept goes like this:
The user gets presented images, which are:
Background Image, To be placed on the bottom
Main Character, To Be Placed Directly Behind The Text Stripe
Frame to be placed around the logo
Text to be placed on a black stripe, on top of everything.
The user can select the images he wants to use, just like the preview below.
I don't have a single idea on how to do this since I am still new to PHP.
I have a little preview of what I want: https://sanderc.net/avatar/create.php
edit: Changed the preview link.
If you want to do something like in the demo. then you need css as well.
some links given below. hope it will be of some help to you.
https://www.google.com/search?ei=zSv-XICHJ_WZmgfl_5CQCQ&q=image+on+top+of+another+image+css&oq=image+on+top+of+another+&gs_l=psy-ab.3.1.0l2j0i22i30l8.227906.227906..230842...0.0..0.170.170.0j1......0....1..gws-wiz.......0i71.X4ZIg9BRrzg#kpvalbx=1
http://www.corelangs.com/css/box/ontop.html
http://jsfiddle.net/danield770/nFvUu/3/
http://www.corelangs.com/css/box/ontop.html
I am creating a user viewer for my friend's Minecraft Classic Server (in-dev version here) and below the skin is a slider. It is intended to be a zoom slider, and I need it to change the scale of the skin. The skin viewer and slider work perfectly fine; however, my trouble is in the element. It appears that I can only draw to my <img> once (code attached), and I'm not sure how to resolve that. My current plan is to delete the element and create it again, but I'm not sure how to even do that. Does anyone have any resources, tips, or information regarding this?
Page source: http://pastebin.com/R4qqTVz8
Modified mcSkinRenderer.js (courtesy of Joran de Raaff): http://ns2.nuclearstorm.net/nucsto/mcSkinRenderer.js
So here is what's happening with your code.
When you run renderMCSkins the first time, it looks through the page and finds all images with the class of 'skin'. It then REPLACES those images with canvas elements and renders the image into the new canvas. When you use the slider it runs that renderMCskins function again, only this time there are no longer images on the page with that class name because they have already been converted to canvas elements.
You have two options.
First, do as you initially thought and DELETE all instances of that canvas element, then replace it with the initial image, and run renderMCSkins with the new zoom value.
Second, you can update the mcSkinRenderer.js to include some kind of an update function to make changes to the canvas elements that have already been rendered.
I Googled a lot but no sufficient ans was found.
I need to place an image (900 X 5200 px) in one of my pages. As the image is sensitive, I need to prevent users from copying the image. I have an idea that can do this:
I will divide the image into pieces. Then the image grid will be loaded into some divs. So user won't be able to save the image. Or he/she will save only 1 square cm part of the whole image.
But this plan will not work if some small parts of the grid fails to load. So, I want to do another thing. I want to load the full image then cut the image into parts. Then show the parts altogether in divs.
This requires javascript. But I am confused how to start and need your help.
Now you know the matter, if you have better idea please share.
Thanks in advance.
The trick is simple. Create a div with the background being the image you want to display. Layer a div with a transparent image over it. When user goes to save the image, they get a blank. Program your server to not return "direct" requests for the image (so some clever chap can't just look at the css and retrieve the URL to the image).
Granted the image will still be in their cache but so would the sliced image so it won't make it impossible just more difficult for a determined person to retrieve the picture.
TL;DR Don't over engineer a solution, print screen will get around anything you do.
You are not going to be able to prevent people from copying this image. Plain and simple. Regardless of your best efforts, a simple PRT SCRN and paste into Paint will be enough.
Your best bet will be to not over engineer this and simply place a watermark and copyright notice on the page. Other options can include placing a transparent <div> over the top of the image so it cannot be right-click'ed and saved, but it still will not prevent the image from being stored in the user's cache. Or stop them from using developer tools or Firebug to find the source image.
You can do this with:
http://www.pixastic.com/lib/docs/actions/crop/
Yet you need to develop your logic around that library.
I have made example, you can see it on this link:
http://simplestudio.rs/yard/crop_img/
Basically you can get URL to your image via php and using my code or code similar to it crop your image into pieces and display them on canvas.
This way image is not accessible via browser or inspect element or what so ever. User can save the pieces individually but you can configure my code for piece to be 5px, I set it to 20x20px.
* test saving image piece by doing right click anywhere on image and do a "Save image as.." option.
Also you need to think of way how to hide src to image provided by php, if you need help on that I can help you.
I know that the question I have is quite complex, and I really hope someone can help me. I have created an image gallery qih jquery and php. Firstly I am grabbing all the image names from a MySql database, then taking them from the server folder and resizing them with php. It creates the thumbnails, then I created a pop up window with jquery which shows the image in large. After that I place a previous and next button and told jquery to grab the array of image results from php and echo them into the jquery using json. Then it goes through the array to create the next and previous effect. I then centered each individual image when the next and previous button were clicked. When you load the first and second picture it is not centered and it goes to the right. I CAN NOT figure out why this is happening. I really need some help here. There is too much code to post here so I am giving you the website and you can see pretty much everything in the source code. Remember that I am using php so if you are wondering how it is iterating through the pictures that why. Thanks if anyone can help me at all.
http://www.oceanphotostudio.com/test/collection/before-and-after.php
The reason it's getting offset is that the margins that center the popup div are being calculated before the image is loaded. Notice that on the first click, it will have margins of -37px and -30px. After one image is loaded, calling another one will use the width and height of the last image that was loaded in, which is why you can get unpredictable results.
Take a look at JQuery's load event handler for information on how to create a callback to resize after the image has been set to load, rather than before.
Your description totally overcomplicates the issue. Browser could care less how you generate the array or html on server, or what language it is
Your position problem is a simple css issue. You've set the top and left of your popup to 50%. This means top left corner of popup will start at dead center of page, and go right and down from there.
Use a browser console to inspect the html elements and the css rules that apply to them and adjust accordingly. WIthin the console you can make live edits to see impact of the adjustments in real time
This question is a bit open at the moment as I'm not sure the idea is even possible.
So far I've loaded an image from a url, and then used jQuery UI draggable feature to allow the user to drag html text (which has been replaced using cufon font replacement) over the top of the image.
The major step (which is what my question relates to) is being able to take the image and text layered over the top of the image, and save the result, either to the server, or potentially offer the option to save the altered image to the user's HD, or what would also be useful is to upload to facebook using the facebook API, but this is something I know is possible.
It all hangs on whether it's even possible to achieve the first step, which is to save the image and layered text as a combined image?
I wonder if there is a PHP/jQuery solution that would allow me to do this?
My suggestion would be to have an internal URL that outputs the final image using jQuery and PHP, then take a screenshot using webkit2png of that page. You should know the dimensions etc., so you'll be able to crop down the resulting screenshot to just the region you're looking for.