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.
Related
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
Image this scenario:
There is a picture locally in my server, where a sketch is displayed, and there is a "blank hole" area on it.
Then, a user can upload another picture to my server.
What i'm trying to achieve is this:
After image upload is finished, the first image (the one with the "hole") is displayed, and behind it is displayed the user's photo, so that you can see it through the "blank hole" area of the first photo.
Then the user can move his picture (drag & drop style) so he can choose which area of it is visible through the "blank hole".
Then i would like to save the result - by merging the 2 photos or keeping the position of the user's picture in a db so i can display it again later.
(Something like this more or less)
What kind of technollogy should i look for? I'd guess javascript(for the drag & drop) or html5 or php(for merging the photo)?
Are there any libraries that i can use?
I hope my explanation isn't too messy, i didn't even know how to google for it.
I don't know if there are better solutions (and I suspect there are), but I suspect all of this can be done with not too much trouble. Here's a rundown of one way to approach the problem:
Use a JavaScript-powered "upload widget" such as uploadify to enable your user to upload "his" image to the server. The server will do some processing on the image (e.g. resize and crop to suitable dimensions) and save it using e.g. PHP's gd library. It will return a URL to the "prepared" image back to the browser -- all of this through AJAX.
The browser then has a URL to the user's image, so using more Javascript you can dynamically add an element that displays it inside the page and allow the user to move it around with e.g. jQuery draggable. Compositing the draggable image behind your static content (the image with the "hole") is a detail you will have to take care of using a combination of HTML, CSS and again Javascript.
When the user is done, use an AJAX call (e.g. again jQuery) to inform the server of the image's positioning (this will be available through the facilities of the Javascipt framework you have selected). The server can then "compose" the two images together (gd or something equivalent once more) and return to the browser a URL through which the final product can be accessed.
Of course there are lots of details to take care of here, but knowing exactly what the plan is should help you get started.
Have a look at the PHP GD extension. If it's installed, it's pretty easy to have an image (with a transparent center) to be merged on top of a second image that a user would upload.
Have a look at http://php.net/manual/en/function.imagecopymerge.php
Ok to get you started, yes use a JavaScript drag and drop module for the placing of the image. You can record the x /y cordinates relative to the container. Do the image merging with a PHP image library / Class. Something like this : http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html
In my page I give a certain size to a DIV with jQuery, based on the size of the last tweet that I retrieve through PHP.
Problem : I need to use jQuery(window).bind("load", function() in order for jQuery to "see" the size of the tweet, but then, I can see the resizing (perfomed my jQuery) in front of my eyes and I dislike it. I want the page to appear in its final state.
Is that possible ?
You have two options. 1) Start off with your tweet element hidden, then show/fade it in when everything is loaded.
2) My preferred solution is to call the $.blockUI() plugin as soon possible, and then $.unblockUI when everything has loaded. The blockUI plugin also has a facility for blocking only certain elements rather than the whole page, there is a demo here
You can always let it render at a top margin of -1000px and then pop it back down, or perhaps z-index it underneath something else.
Some browsers have problems "seeing" hidden divs while some can do it, but it's unrelible so best bet is to render it outside the canvas.
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.
I am working with php. I have images kept in order. When i do query the images comes in order but when they load they does not load in order. The small images load first and then big images. For example I have 5 images. These images should be loaded in order(1,2,3,4,5). But here its not happening. Image 4 loads first, then 2, 1 and so on. So what can i do for this problem? Hope to get solution.
Thanks in advance.
If you are speaking about the order images are displayed by a web browser, you do not have much control over that, as long as you have several <img> tag on your page :
the browser will request the images from the server in the order it wants (most probably, the first <img> tag encountered will be the first image requested)
each image takes some time to download ; and each image is displayed when it's downloaded ; considering small images should be downloaded faster, small images should be displayed first... depending on the order they were requested -- see previous point.
In the end, if you want absolute control on the order the images are displayed, your initial HTML should probably not contain all the <img> tags: a solution would be to add those, in the right order, when the previous image is downloaded.
This can probably be done with some JavaScript code, to detect when an image is loaded (event "load") ; and when an image is loaded, just add a new <img> tag to the page, for the next one; and so on.
But I wouldn't go with such an idea: it won't work if JS is disabled, your images will not be seen by search engines.
You can control everything on your web server, but nothing on network or browser sides.
A possible solution is to build a single image containing your five images and display each relevant portion to its dedicated position.
Have you tried preloading them with a JavaScript library?
Not sure how you would implement this in PHP, but in the past I have usually had the a 'order' field for each image, then the images were added dynamically according to the 'order' field.
As you should have guessed, image is loaded according to their sizes. Ofcourse, the smaller ones will load before the bigger ones. And yeah, as eyze said, wat about you preload them with a javascript preloader and display them in the right order?