0

I have this script working http://makeaplate.justapplications.co.uk/ and I want to save the plate (image) 2 * current size. Now the car plate have 715x160px, and i need to save it at 715*2 px 160*2 px (1430x360) and keep the quality of images.

I'm using html2canvas to save current images, but is it possible to resize all elements at once?

this is the html code for 1 plate:

<div class="plate front car with-left-badge clearfix" id="front-plate">
<div class="bg diamond"></div>
<div class="border burgundy three" style="width: 627px; height: 142px; left: auto; right: 5px; display: block;"></div>
<div class="badge left" style="display: block;"><span><div class="fimg"><img alt="" src="images/badge/uk-ireland/euro-gb.png"></div></span></div>
<p class="text hiline" style="font-weight: normal; font-size: 140px;"><span class="orange"><em class="char1">Y</em><em class="char2">O</em><em class="char3">U</em><em class="char4">R</em><em class="char5 space"> </em><em class="char6">R</em><em class="char7">E</em><em class="char8">G</em></span></p>
<div class="slogan" style="display: block;"><p style="left: 32.5px; right: auto;" class="CourierNew"><span class="red">www.makeaplateuk.com</span></p></div>
<div id="imageHolder_front_id" class="imageHolder_front"></div>
<p class="clone hiline" style="font-size: 140px;"><span class="orange"><em class="char1">Y</em><em class="char2">O</em><em class="char3">U</em><em class="char4">R</em><em class="char5 space"> </em><em class="char6">R</em><em class="char7">E</em><em class="char8">G</em></span></p></div>

and this is the result http://makeaplate.justapplications.co.uk/cart/zzzzz-car-front-05-15-2014.png

Any ideas?

Bleeding Fingers
  • 6,993
  • 7
  • 46
  • 74
Adrian Axinte
  • 179
  • 1
  • 2
  • 16

1 Answers1

0

You can save it as an image first using the suggestion in this Thread. Then, using PHP GD, manipulate image size to the desired resolution.

This link might help you with PHP GD.

Community
  • 1
  • 1
Mong
  • 146
  • 4
  • I can save the images, but as you can see the image now have 715x160px and I need it at 1430x320px. If I use php to resize it will pixelate the image – Adrian Axinte May 15 '14 at 12:27
  • ok. then I suggest make an alternate classes for every div you got there. one is for 715x160px, the second is for the larger one. say, for the small one you give a div additional class of "outer-small" with this style: width: 627px; height: 142px; if you want to make it larger execute a .removeClass("outer-small") and then .addClass("outer-big") where outer-big's style is width: 800px; so summing it up, every div should have their equivalent class if they become bigger. you should provide styles for the bigger ones that will resemble the smaller one. – Mong May 15 '14 at 18:36
  • remake your canvas in x2 of it's size. then use those classes and toggle it with classes for the smaller one. – Mong May 15 '14 at 18:38