Is there an API that lets you add text to an image and fetch it to your app?
For example:
User uploads an image to my website.
User has the ability to add text (prices, locations, info) to the image through a third-party service and once ready I can make an API call to the service and fetch the new image to my server so the user can use the image for products or save it.
If there are no services like that how would I go about creating an image editor in JavaScript/jQuery so that user could add boxes/text to the image? I know that I would need to use ImageMagick to convert the data and render an image after the user has finished but image editing in the browser is an unexplored area for me.
Sure, you can render and manipulate images in HTML/javascript:
http://code.tutsplus.com/tutorials/canvas-from-scratch-pixel-manipulation--net-20573
Related
I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.
I also want to make available an option for users to be able to share their picture online.
At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...
I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.
The thing is... I want the process to happen in this way:
User selects the picture - WORKING
The picture appears on display as a preview - WORKING
User presses the upload button (if he wishes to) - WORKING
The image gets uploaded to the defined folder and the name and path to the DB - WORKING
Website stays on the same page with the image preview still there... - TO BE DONE
A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE
----------------//-------------------
I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...
Could you guys clarify if that's true?
---------------//---------------
UPDATE
The solution #Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!
I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin
Go through this one.from this you can uplaod your image without reloading page.
Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.
If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.
But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.
I have made a social networking site. One of the feature I would like to add is to allow users to change the background image of their profile.I have written javascript for it, but once I change background image of one user, all users background change to that image. What should I do to avoid this.
Javascript Code for switching background
Change background option in Settings page
You should load the background image dynamically for each user.
This is just a streamline of what I think you should do:
Create a field in the DB for every user to hold the path for the bg image
Once logged in check if they have that setted on their profile
Change it dynamically using js
Step 1: you have to create a field in database to hold the url or location of background which user sets.
Step 2: make sure that location of that background having one to one relation with userid or with user . So this mean you have to add column in user table or make a new table with relation to userid
And each time when user profile loaded first check or make a JavaScript or php or server side code to set background dynamically. You can also use ajax.
Above steps are simple workflow path.
I'm trying to store an image in the browser storage when the user selects an image from his/her computer.
<div className="add_grp_image_div margin_bottom">
<img src={img_upload} className="add_grp_image"/>
<input type="file" className="filetype"/>
<span className="small_font to_middle">Add group image</span>
</div>
As shown in the above code i'm opening the file upload window when someone clicks on this div. I want to show the selected image inside the div i have given above. How can i do it?
My html part looks like this.
You don't need to store the image for showing it to the user or manipulating it.
To show the image, make use of FileReader api. This answer should show you how to display the selected image
To manipulate the image, you need to draw it on a canvas and then perform the selected actions. To draw on the canvas you can follow as described here
But if you wanna to crop it, i suggest you to search for a good javascript image manipulation library. There are n libraries that already does this. It saves time and you can learn much faster without re-inventing the wheel.
I've got functionality on my website to share to twitter. It's just a simple Twitter Intent with some custom text. I'd now like to share an image with this text, not a link to the image, but the image itself like how they're shown in Twitter Cards. I'm at a loss of how to achieve this though.
I've got a web app that changes the data shown based on filters that the user engages. When they click the "share" button, I use PHP GD to generate an image using the current data shown. This image is saved on the server and the url is passed back to the javascript via ajax. Now I would like to open a "twitter share" dialog with my pre-filled text and this image. I have discovered that this is not possible with twitter intents because they don't allow images, only image urls (because actual images shown in tweets are pic.twitter.com images).
So I'm looking at Cards but it seems as though Cards are static. I was wondering if it's possible to make the card metadata dynamic by having a php file which has a hash (e.g. www.example.com/tweet.php?esd87fsduh) that is used to dynamically populate the twitter card meta tags? Or would this not work because it takes a long time for twitters bots to crawl the website again?
I basically want the simple functionality that the user clicks "tweet" and they are presented with the Twitter dialog showing dynamic text and the image based on the data filters they'd applied. Is this possible?
Thank you for your time.
I am creating a user flow that allows users to edit an svg and save continuously via javascript. However, I don't like saving the image file over and over again. Is there a way to do a partial upload? I know you can do a GET with the image, color, and coordinates. Is there a way to similarly do POST? I.e. only send the server the change that occurred to update the image file with?