Re-size every Element in HTML with jQuery or Canvas

Question

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

Any ideas?

Answer 1

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.