I am creating a multi-layered image editor using AJAX to send calls to a PHP script, then using a GD library to process the changes, save the new image and send the new image path back to the browser for AJAX to replace old with new.
This example, when you move a layer it seamlessly moves the layer without a single flicker of the image. This example uses a dll file to serve the image, I want to be able to achieve the same thing in PHP / JS.
Idea 1
I thought about applying a z-index to the current image and load the new image below it, once it's loaded, hide the old image.
Idea 2
Set the image path to a php script which outputs the raw data of the compiled image direct to the browser.
if you want to replace the image "without a single flicker", just preload the image
(load the image to a hidden img element or a Image javascript object and then show it on an onload callback)
Related
so I started using tinymce for my blog posts and there is this problem with imagetools, they work while images are being edited, but after the article is posted, only this BIG url is showing. I think the problem is that, the blob image which is created while editing is not saved and I need to save it, right?
By the way I am using laravel.
When you edit images using the image tools they will always be turned into a Base64 or BLOB encoded image - the image tools function in the browser and know nothing (directly) of the application in use (e.g. Laravel). As such its up to the application to determine what to do with these images:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
I would assume Laravel has some APIs such as the Filesystem API that you could use to store the images appropriately.
Regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location.
The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
Is it possible to display some php content within an HTML image (say display on the screen of an iPhone where iPhone being an image)
Well, if you just want to overlay text on an image, why create an image at all.
you can use css background image(iphone in this case) for a div and the insert your phpp content as a child of that div. Using proper css styling and positioning, you will get your desired look. Its simple and less server consuming than going the image creation way.
You could generate your own image on the server using the GD library to overlay your content onto the image and then send that to the client.
You can use CSS to achieve the same effect, without requiring any server processing; however, it must be an image, you might want to check out the image processing library that allows you to manipulate images using PHP http://php.net/manual/en/book.image.php.
I'm working on something that requires the following:
There is an image with a particular header and footer, which is to serve as a kind of template/background
Users need to be able to upload an image, crop it, and drag it onto the template, and ideally position it too
New image gets saved
Do any of you happen to know a plugin or two that might achieve this functionality? I've got something working with jCrop, but I've done the image merging stuff myself, and it's not great. I'd prefer something more robust, so a standalone plugin would be best.
Thanks
You can achieve something similar using HTML5 Canvases, but its not elegant and obviously wont work in every browser.
The idea is to simply draw those images to a canvas and then set an img object to the source of the canvas
To save the canvas drawing as an image, we can set the source of an
image object to the image data URL. From there, a user can right click
on the image to save it to their local computer. Alternatively, you
could also open up a new browser window with the image data url
directly and the user could save it from there.
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById("canvasImg").src = dataURL;
View the full tutorial here
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
some of the script like t-shirt design script,mug designer available for customization. For an example. we add text, rotate text, change color of text add/upload image re-size image etc after customization they give image as we customize.
how to save this all customization as image ?
any this type of script in php available ?
I'm guessing what you want is to take modifications made by JavaScript to an image in a browser and "save them" to a new image using PHP?
I am not sure how you'd go about doing that without regenerating the whole thing in PHP.
If I had to do it, I'd save all the modifications in an array in Javascript and using jQuery/AJAX send a request to the PHP file along with those modifications and have the PHP script re-do the things, for example write text on the source image, re-size it, add shapes and what-not.
However, this might end up being quite a time consuming task.