I have used http://raphaeljs.com/image-rotation.html raphel's script but. How how can v save this rotated image.
It's an SVG, not really an image per-se.
You'll have to save the generated SVG via AJAX onto your server and render it with an external SVG-rendering library.
You could try librsvg2-bin, as I've heard that it works.
As mentioned it's an SVG element and it uses a source image to change it's angle upon clicking the rotate buttons. By inspecting the rotated image you'll see the SVG element like:
<image x="160" y="120" width="320" height="240" preserveAspectRatio="none" href="http://raphaeljs.com/bd.jpg" transform="rotate(-90, 320, 240)"/>
You'll notice that there's a tranform attribute that contains the rotate(angle, x, y) function. If you can find a way to get that angle value you can use it to manipulate the image source to generate a new image using PHP by using the imagerotate function.
By doing this I got the transform attribute value:
document.getElementById('holder').getElementsByTagName('image')[0].getAttribute('transform')
This returns "rotate(-90, 320, 240)"
Of course this is a hack ;p
Related
I've got an app that takes an SVG as input and converts to a PNG as output. I've run into a problem where if the SVG has grouped items using the tag, that content gets rendered way off to the right and down on the SVG.
This only happens using IMagick. If I open the SVG in Illustrator or Inkscape for PC, it looks fine. Here's what the SVG code looks like:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2400px" height="3200px" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="SvgjsG1048" transform="rotate(0 1200 1600) translate(30.927835051559143 41.23711340207863) scale(0.9742268041237008 0.9742268041237009) " x="30.927835051559143" y="41.23711340207863">
<image id="SvgjsImage1049" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="aerosmith.png" width="2400" height="3200"></image>
</g>
</svg>
and here's the code I'm using to pull in and render:
// setup the SVG
$svg_front = new Imagick();
$svg_front->setBackgroundColor(new ImagickPixel('transparent'));
$svg_front->readImage($json->imageFront); // pull in the SVG image
// convert the SVG to PNG # 200 dpi - yes, it works!
$svg_front->setImageUnits(imagick::RESOLUTION_PIXELSPERINCH);
$svg_front->setImageResolution(200,200);
// set image format
$svg_front->setImageFormat('png');
// render the SVG
echo $svg_front;
Nothing out of the ordinary here. Removing the code to set the resolution doesn't make any difference, and I've tried resetPage to no effect as well.
Now, if I remove the tag and leave the image in there, then the SVG renders with no issue. However, I can't control whether the app sends grouped items or not, and IMagick needs to render it no matter what.
Here's the image when it gets rendered to PNG with a tag in the SVG: http://brainboxinteractive.com/bad-svg.png
And here's what is should look like: http://brainboxinteractive.com/what-it-should-look-like.png
Inkscape is installed on the server, so IMagick/ImageMagick is using it so I'm not sure where to start debugging and fixing this issue. Any help would be appreciated!
I use Imagick to open an image, resize it, set an image format (if it's needed) and write in another folder the result. It works with ICO and PNG, but can't write SVG files, saying that
ImagickException: Unable to write the file: C:\Sites\devdesktop\test\sites\default\files\tempimages\abstract-spiral-striped-background-100.svg in Imagick->writeimage() (line 44 of C:\Sites\devdesktop\test\sites\all\modules\testmodule\testmodule.module).
It was an error message from Drupal 7.
Here is my code:
$file = file_load($form_state['values']['fid']);
$image = new Imagick(drupal_realpath($file->uri));
$image->setImageFormat($type[$type_num]);
$image->resizeImage($size[$size_num], $size[$size_num], Imagick::FILTER_UNDEFINED, 1);
$destination = 'public://tempimages/'.substr($file->filename, 0, -4).'-'.$size[$size_num].'.'.$type[$type_num];
$image->writeImage(drupal_realpath($destination)); //<---problem
drupal_goto(base_path().'/sites/default/files/tempimages/'.substr($file->filename, 0, -4).'-'.$size[$size_num].'.'.$type[$type_num]);
This code snippet works perfectly with ICO and PNG, but don't write a file in SVG format except a little peace of code
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200">
<g style="</svg>
Why so?
SVG isn't an image in the same way that JPG or PNG are.
It's just an xml with plotted points in most cases, and is typically void of dimension and resolution.
The width and height of 200 are just the size in px at which it was saved. So you should never need to 'resize' an svg, as it will scale infinitely.
If you put an SVG in an img tag and define the dimensions, like:
<img src="myawesome.svg" width="500" height="500" />
Even though it's defined in the SVG as having a dimensions of 200, it should scale larger or smaller with no change in the quality of appearance.
Because of this complete difference in structure, it will not follow the same rules in some cases as jpg or png will as they are rendered images.
If this is being done in Drupal; make an exception for SVG that just stores the file without resizing, and add the dimensions where ever it is printed for all images. It won't hurt the rendered images, and it should show the SVG as the same size as them.
TL;DR SVG is an xml file, not really an image, resizing it is pointless since it carries no real resolution or size and can scale infinitely. They only appear to be similar since they are both visual elements. Make an exception for SVG so it just stores the file, and when either the rendered images or the SVG is printed, add the resized dimensions to the img output.
I have a question: I need to show JPG pictures, if screen width is smaller than 1024px and GIF video, if screen size is bigger.
Trick #1: There should be downloaded only one of them.
Trick #2: Can't be css background property, cos image sorce is random content of directory on server.
Trick #3: Server language is php.
If you can use JQuery to determine which image to load you can try this.
In your PHP set up the image like so:
<img data-jpg="img-url-1.jpg" data-gif="img-url-2.gif" />
The path of each image is defined in the tag as a data-attribute
Then allow your JQuery to run after the DOM loads and determine the screen size. Based on that value, set the src attribute of the <img /> to the appropriate URL.
$(function(){
if($('body').width() > 1024) { $('img').attr("src", $('img').attr("data-jpg")); }
else { $('img').attr("src", $('img').attr("data-gif")); }
});
Working Example: JSFiddle
The picture element will let you do just that (WHATWG spec).
<picture>
<source srcset="examples/images/large.gif" media="(min-width: 1024px)">
<source srcset="examples/images/default-small.jpg">
<img src="examples/images/default-small.jpg">
</picture>
As of July 2014 it's only in beta builds of browsers yet. But you can use a polyfill (i.e. some JavaScript to emulate the element in unsupported browsers): see Picturefill
Note that the img is not only a fall-back but is always needed: The source elements just provide alternative sources for the img element. For more info, see for example this guide.
Is it possible to print html div tag with style on image in PHP?. if not, then what is the alternative way?
Some hosts have ImageMagick for PHP. To add text to your image, take a look at the syntax of the commands here. The example given on that page should help some - it's pretty easy to get text on an image.
The benefits of using ImageMagick over a fixed image is that you can vary the content of the text, which is what you might want (you didn't mention needing a static text; for this, I'd use an image with a transparent background). For more comprehensive font commands, take a look here.
To put a transparent image on top of your base image, take a look at this very nicely designed site.
I'll also give the code presented on that site here:
$photo = imagecreatefromjpeg("original.jpg");
$watermark = imagecreatefrompng("watermark.png");
// This is the key. Without ImageAlphaBlending on, the PNG won't render correctly.
imagealphablending($photo, true);
// Copy the watermark onto the master, $offset px from the bottom right corner.
$offset = 10;
imagecopy($photo, $watermark, imagesx($photo) - imagesx($watermark) - $offset, imagesy($photo) - imagesy($watermark) - $offset, 0, 0, imagesx($watermark), imagesy($watermark));
// Output to the browser
header("Content-Type: image/jpeg");
imagejpeg($photo);
To output the image to a file, please Google that and replace the last two lines of the example given above.
For ImageMagick stuff, take a look here
I hope this helps :-)
James
You can set the image as the background graphic of any div using CSS. Then the text within that div will appear on top of the image.
(CSS)
.mydiv {
background:url(/path/to/image.gif);
width:100px; /* set to width of the image */
height:100px; /* set to height of the image */
}
(HTML)
<div class='mydiv'>Some text here</div>
There is no easy way to print text on images using html/css on server side, because php can't parse html, so you'd better find another solution like php GD.
I have a gif file with many icons and buttons on it..
What I want to do is include that gif file using php gd somefunction("file.gif")
then, resize the new image to 30px by 30px.. and then be able to position (using x and y coordinates) the actual gif file, so that only a certain area of the image shows on the new file..
just like the css background-position property but, with gd.
Thanx
imagecopyresized() resizes the image, so it doesn't quite work for what I was exactly looking for.
For anyone else that might need this, the best function is actually imagecopy().
http://www.php.net/manual/en/function.imagecopy.php
It will do the trick..
Thanx Trufa for the quick answer though.
imagecopyresized()
http://www.php.net/manual/en/function.imagecopyresized.php
Should do the trick for adjusting the size.