Need some help with images.
As the topic says, I want to create an image with live updating text on it.
This is mainly used by game servers and players to show off their stats and info. Server-wise, to show if the server is online and how many players are online and such.
I haven no idea how to do it and figured this would be the best place to find out. Since I don't have any idea what this is even called, i did not know what to search for.
Thanx in advance.
This is an html+css+ajax solution. Make the image an html element's background image. Let's use a div. Then position the text in the div. Use ajax to update the text. The image will remain the same while the text can be updated.
Was possible with the use of API. Created an API of the database I want to use, connected to the database and everything worked!
After using $API_GET to get the data, I set it into an array-format.
Used PHP for everything.
From there on I used imagecreatefrompng, obviously to select an image.
Set a few colors using imagecolorallocate and from there on it was purely adding the text on the image as to where I want them using imagettftext.
Creating an image, with live updating stats on it.
But we still have to tell the browser to load it as an image and not a page with an image on it, so therefor...
header( "Content-type: image/png" );
And imagesetthickness to 5, followed by imagepng and imagedestroy.
Code Extracts:
$API_GET = file_get_contents("API URL");
$API_GET = json_decode($API_GET);
$API = array();
foreach ($API_GET as $key => $value) {
$API[$key] = $value;
}
if (file_exists($imagefile)) {
$bg_img = imagecreatefrompng ( "IMAGE URL");
$color_red = imagecolorallocate( $bg_img, 250, 0, 0 );
imagettftext($bg_img, 20, 0, 19, 36, $color_red, 'FONT URL.tff',"Text On Image");
imagesetthickness ( $my_img, 5 );
header( "Content-type: image/png" );
imagepng( $my_img );
imagedestroy( $my_img );
} else {
echo 'Image does not exist.';
}
That is the basic structure of the code.
Thank You for your reply to the question.
Related
I have an OBJ file generated dynamically by a server on a separate domain. It has some materials and texture JPG files.
I load this OBJ file with a simple php proxy (fileProxy.php):
<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Headers: Content-Type');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT'); // http://stackoverflow.com/a/7605119/578667
header('Access-Control-Max-Age: 86400');
//Check if this is an image. if So print coorect header.
if (strpos($_REQUEST['fileToProxy'],'jpg') !== false) {
header('Content-Type: image/jpeg');
}
$proxyFile = (isset($_REQUEST['fileToProxy'])? $_REQUEST['fileToProxy'] : null);
if ( isset($proxyFile)){
// the files sent to us aren't properly url encoded
$proxyFile = str_replace(' ', '+', $proxyFile);
$content = file_get_contents($proxyFile);
print($content);
}
else {
echo "ERROR: no file to proxy";
}
?>
Loading the OBJ files works like a charm
BUT, i cant load the JPG textures embeded in the MTL file. Single colored shaders all work fine, but loading images i get errors.
I get the following error in chrome:
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': the cross-origin image at http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fil…est-2.compute.amazonaws.com/3DModels/435639/DonutFullBread.jpg&timtest=115 may not be loaded.
The address of the texture file is fed correctly into my proxy:
http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/3DModels/435639/DonutFullBread.jpg&timtest=115
Now after checking my Network monitor, i realise that the Jpg Image is successfully downloaded and the correct CORS headers are all in place. But webgl/three.js still spits out the errors and does not display my model.
SO this seems like a WEBGL bug. But i get security erros in all browsers.
I have tested this on my localhost and on my server. Same problem.
Any solutions?
UPDATE
Here's how i load the OBJ/MTL files with three.js:
(Only cross domain textures fail)
var loader = new THREE.OBJMTLLoader( manager);
///////////////////LOAD MDOEL////////////////////
loader.load( 'http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=' + obj.file, 'http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=' + obj.material, function ( object ) {
//if loaded, do some stuff here.
}
loadedmodel.add(object);
That's all I do really. The Materials and textures are phrased correctly by the loader.
I dont have to set any materials up.
I just want to put this here for other people.
I had a very similar problem when i was trying to load images from static google map images.
So here is what i did
THREE.ImageUtils.crossOrigin = "anonymous";
Just before the actual texure is being loaded.
Now this got it working and i could load the images without a problem.
I know this is old, but I just spent a few hours troubleshooting the same issue, so I thought I'd post an answer here for any future users that run into this. The solution is quite simple, but unfortunately it is not documented anywhere that I could see. I discovered it by pure dumb luck.
var loader = new THREE.OBJMTLLoader( manager);
loader.crossOrigin = ''; // <-- this is all you need to add!
///////////////////LOAD MDOEL////////////////////
loader.load( 'http://obj_url.com', 'http://mtl_url.com', function ( object ) {
//if loaded, do some stuff here.
}
loadedmodel.add(object);
If it's not clear in the code above, the only thing you need to do is to add the line loader.crossOrigin = ''; after declaring the OBJMTLLoader.
I hope this helps someone in the future!
You need to set the crossorigin property explicitly for the image. Copying from one of my own examples:
images[id].image = new Image();
images[id].image.crossOrigin = "anonymous";
images[id].image.onload = function() {/* WebGL texture load of file here */}
images[id].image.src = "http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/3DModels/435639/DonutFullBread.jpg&timtest=115"
I loaded the image that you have mentioned above, and it works correctly for me in the browser as a texture.
I often joke about my projects blowing up because I forgot a semicolon. Well, this time it is no joke. Someone actually forgot a semicolon in the latest revision of ThreeJS. I dug into MTLLoader.js (which is referenced by OBJMTLLoader.js) and found that this line (near the bottom of the MTLLoader prototype constructor) had a semicolon missing:
materialCreator.crossOrigin = this.crossOrigin
That'll kill any cross-site sharing for all materials. I added the semicolon back in...
materialCreator.crossOrigin = this.crossOrigin;
...and all was well with the world again.
I installed the plugin http://wordpress.org/plugins/automatic-featured-image-posts/ but I am having a problemm, because the plugin doesn't remove the original image from the post content after creating the featured image. (and therefore when I don't add the featured image there appear 2 images on the post)
I tried adding this to the auto-featured-image.php
add_action('publish_post', 'eliminaroriginal');
and then
function eliminaroriginal(){ //update the post without image
$post_parent_id = $post->post_parent === 0 ? $post->ID :
$post->post_parent; $contenido = preg_replace("/[caption
.+?[/caption]|\< [img][^>][.]*>/i", "", $post->post_content,
1); $mipost = array(); $mipost['ID'] = $post_parent_id;
$mipost['post_content'] = $contenido; wp_update_post( $mipost );
}
but it didn't have any result.
Please help me, I don't know what should I do.
Thank you before hand!
I'm trying to change the default behavior of Drupal when adding an image through image field on a content type.
When you choose an image to assign to a node, it's not directly uploaded. You also need to click "upload" to display the preview of your image, and this is not really user friendly.
How can I change this (programmatically) to make Drupal start uploading directly the image after choosing the file.
Thank you for help
You can do it this way:
(function ($) {
Drupal.behaviors.autoUpload = {
attach: function(context, settings) {
$('.form-item input.form-submit[value=Upload]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Upload]', $parent).mousedown();
}
}, 100);
});
$('.form-item input.form-submit[value=Transférer]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Transférer]', $parent).mousedown();
}
}, 100);
});
}
};
})(jQuery);
This solution works with either english and french browsers. Unlike AutoUpload module, which only works on browsers configured in english. Note the [value=Upload] / [value=Upload] attribute
I found a similar post:
https://drupal.stackexchange.com/questions/31121/how-can-i-automatically-upload-images-on-file-selection-rather-than-pressing-the
It's exactly what I need..
You should be able to use http://drupal.org/project/imce for your needs.
I am not sure about the Image field but when I encountered this issue I decided letting users add images in body since it is a much easier option for durpal - When inserting images in text They will show immediately .
IMCE + filefield seems like a viable option for your direct needs,They do mention AJAX support.
Not sure what would be causing this, but when I upload some images to my remote server via FileTransfer(), the images sometimes show up either sideways or upside down. However, when I view the images locally on the iPhone, they are positioned in the correct way.
For example, when I select an image like this to upload: http://sharefa.st/view/WBe2QNSK8r8z
It will turn out like this: http://sharefa.st/view/EWdW1Z4G8r8z
I am using the local path to transfer the file, so I don't understand why the image would rotate "randomly".
Here is my upload function:
function uploadPhoto() {
var options = new FileUploadOptions();
options.fileKey = 'file';
options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
options.mimeType = 'image/jpeg';
var params = new Object();
if(logged_in == true) {
params.unique_id = app_unique_id;
params.secret_key = user_secret_key;
}
options.params = params;
loadingStart();
var ft = new FileTransfer();
ft.upload(imgURI, 'http://' + remote_server + '/API/upload', uploadDetails, fail, options);
}
imgURI value looks like this:
file://localhost/var/mobile/Applications/<snip>/tmp/photo_015.jpg
Any insight is appreciated.
Thanks to Humanoidism pointing out that the issue was in fact with the iPhone, and the way it stored images, I was able to figure out a solutuion.
To upload photos in the correct orientation you must add the correctOrientation setting to the options array in getPicture(), and set it to true.
Here are two examples:
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 30, correctOrientation: true });
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 30,
destinationType: destinationType.FILE_URI,
sourceType: source,
correctOrientation: true });
}
The problem is not PhoneGap but iPhone. The iPhone was designed to be used as a wide lens camera. Turn the phone sideways when taking pictures or capturing video if you intend to view them on desktop. Your phone will display them correctly, because it "knows" how you took them, but the computer that you're viewing it on dosen't.
What you could do to prevent this is to rotate the picture before the upload. This is not a recommended fix but at least people on desktop computers will be able to see it. Though when viewing them on iPhone they'll be rotated - maybe a check for mobile devices wether or not to rotate the image could come in handy - but still again, not recommended.
I'm trying to do something like in this Tutorial, a very basic gallery.
In the example of the Tut they load images from uploads/media/ like so
page.10.marks.PROJECTTHUMBNAIL = IMG_RESOURCE
page.10.marks.PROJECTTHUMBNAIL {
stdWrap.wrap = <img src="|" />
file {
import = uploads/media/
import.data = levelmedia: -1,slide
import.listNum = 0
}
}
but now I want to load pictures that have been uploaded in an image-cObject.
This is an embarrassing question but I've been trying to figure this out for two days and I can't seem to get it right -.- I'm sure there are lots of answers out there... I just don't know the magic words to put into google to FIND them T-T
I tried very basic stuff like just doing the same as above but with a different path, I rummaged through the TSRef of IMAGE and IMG_RESOURCE, tried fiddling with CONTENT, and tried to adapt the tt_content.image.20 = USER (?? O.o) description in the typoscript object-browser... but all to no avail, as I know so little what I'm doing -.-
Any nudge in the right direction would be greatly appreciated!
You have to load the content elements using the CONTENT cObject and set how the content shall be rendered. This will load Image content elements on the given page regardless of what column they are in:
page.10.marks.PROJECTTHUMBNAIL = CONTENT
page.10.marks.PROJECTTHUMBNAIL {
table = tt_content
select {
where = CType = 'image' AND image != ''
orderBy = sorting ASC
}
renderObj = IMAGE
renderObj {
file {
import = uploads/pics/
import.field = image
import.listNum = 0
}
}
}
NOTE: The renderObj is just my example and it renders only the first image of the Image element. You can set the rendering as you please, e.g. set the file to be GIFBUILDER which would allow you to resize the image. You can also tweak the select to load content elements with more refined conditions.