I'm searching for a way to cut out any shape from an image and save it somewhere on the server.
I'm looking for solutions in PHP and/or JavaScript but haven't found anything yet.
I'm not sure but as far as I know the gd-library in PHP is only capable of cutting out or copying rectangular shapes from source images.
In JavaScript this probably can be achieved somehow through the canvas-object but I haven't found any libraries that provide such a function (rafael.js or paper.js don't seem to do the job) ...
Example:
Let's say i got the following image:
Now I would like to mark a certain part of that image (by x/y-coordinates):
And finally i want to extract that part as a single image (with the rest of the background beeing filled black):
Thank you for any help
Using PHP only, imagecopy lets you easily copy a part of an image by coordinates and do with it as you wish.
Edit: Using Imagick it's possible to crop images to specific shapes among other functions.
Related
I would like to know the best web technology/js library to achieve this functionality. I need to change the colors of specific objects inside an image. I need to develop a tool where they can choose a color and the objects inside the image will turn into that color.
This is a very close example of what I need. I've been reading about canvas but I haven't been able to find anything close.
www.msistone.com/virtual-kitchen-designer
Thanks in advance!
There are no magic or elaborated algorithm on it. They simply are using some PNG images and then they put the style tiles images before, so it looks like a texture changed or like if they uses a filter. You can realize of how it works watching the source code
The simplest way to target specific objects ( wall tiles, tables, floors, etc. ) within an image is in post production with an image editing application such as Photoshop, Artweaver, Paint.net, Inkscape, etc. and switch out images upon user selection using CSS or JavaScript. You replace the entire image this way and the minor changes show through when the image is switched.
If you don't want to do this manually there is no easy programmatic approach. For more information on coding applications to recognize objects look into machine learning and shape recognition algorithms but I suspect that is beyond the scope of a simple web app.
I need a javascript library for manipulating/processing images. Not inside DOM, but similar like GDI+ where I can pick an image from file system and manipulate it programatically (get pixel color, change pixel color, add shapes and text , etc..).
I searched goolge but couldn't find such library. So far the best thing I could only find is a library called jimp, but it seems very basic and high level.
Does Javascript have such capability? reading an image and extracting information from it?
I made a cursor in Processing and I would like to use this on my website.
How can I convert it into a .java file to add it to my HTML file?
If you want to use Processing on a webpage, you either have to use Processing.js or P5.js.
But like Chris G said, it's not really clear what exactly you mean by "cursor" here. When most people say that, they mean an image file, in which case you can just use CSS to customize the cursor.
But if you mean you used Processing to create effects using the mouse pointer, then you're going to have to use Processing.js or P5.js, not Java mode. This also means that you won't be able to use any Java libraries in your sketch.
If you have any other questions, please include an MCVE that demonstrates exactly what you're trying to do.
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.