<pre class="javascript" style="font-family:monospace;"><span style="color: #339933;"><!</span>DOCTYPE html<span style="color: #339933;">></span>
<span style="color: #339933;"><</span>html<span style="color: #339933;">></span>
<span style="color: #339933;"><</span>head<span style="color: #339933;">></span>
<span style="color: #339933;"><</span>style type<span style="color: #339933;">=</span><span style="color: #3366CC;">"text/css"</span><span style="color: #339933;">></span>
#body<span style="color: #009900;">{</span>transform<span style="color: #339933;">:</span>scale<span style="color: #009900;">(</span><span style="color: #CC0000;">0.1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><span style="color: #009900;">}</span>
<span style="color: #339933;"></</span>style<span style="color: #339933;">></span>
<span style="color: #339933;"></</span>head<span style="color: #339933;">></span>
<span style="color: #339933;"><</span>body<span style="color: #339933;">></span>
<span style="color: #339933;"><</span>canvas id<span style="color: #339933;">=</span><span style="color: #3366CC;">"c"</span><span style="color: #339933;">></</span>canvas<span style="color: #339933;">></span>
<span style="color: #339933;"><</span>img id<span style="color: #339933;">=</span><span style="color: #3366CC;">"i"</span> src<span style="color: #339933;">=</span><span style="color: #3366CC;">"image.jpg"</span><span style="color: #339933;">></span>
<span style="color: #339933;"><</span>img id<span style="color: #339933;">=</span><span style="color: #3366CC;">"test"</span><span style="color: #339933;">></span>
<span style="color: #339933;"><</span>script defer<span style="color: #339933;">=</span><span style="color: #3366CC;">"defer"</span><span style="color: #339933;">></span>
<span style="color: #000066; font-weight: bold;">var</span> c<span style="color: #339933;">=</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"c"</span><span style="color: #009900;">)</span>
<span style="color: #000066; font-weight: bold;">var</span> ctx<span style="color: #339933;">=</span>c.<span style="color: #660066;">getContext</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"2d"</span><span style="color: #009900;">)</span>
<span style="color: #000066; font-weight: bold;">var</span> i<span style="color: #339933;">=</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"i"</span><span style="color: #009900;">)</span>
i.<span style="color: #660066;">onload</span><span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span>
c.<span style="color: #660066;">width</span><span style="color: #339933;">=</span>i.<span style="color: #660066;">width</span><span style="color: #339933;">/</span><span style="color: #CC0000;">10</span>
c.<span style="color: #660066;">height</span><span style="color: #339933;">=</span>i.<span style="color: #660066;">height</span><span style="color: #339933;">/</span><span style="color: #CC0000;">10</span>
ctx.<span style="color: #660066;">drawImage</span><span style="color: #009900;">(</span>i<span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>c.<span style="color: #660066;">width</span><span style="color: #339933;">,</span>c.<span style="color: #660066;">height</span><span style="color: #009900;">)</span>
<span style="color: #000066; font-weight: bold;">var</span> test<span style="color: #339933;">=</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"test"</span><span style="color: #009900;">)</span>
test.<span style="color: #660066;">src</span><span style="color: #339933;">=</span>c.<span style="color: #660066;">toDataURL</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"image/jpeg"</span><span style="color: #009900;">)</span>
alert<span style="color: #009900;">(</span>test.<span style="color: #660066;">src</span><span style="color: #009900;">)</span>
<span style="color: #009900;">}</span>
<span style="color: #339933;"></</span>script<span style="color: #339933;">></span>
<span style="color: #339933;"></</span>body<span style="color: #339933;">></span>
<span style="color: #339933;"></</span>html<span style="color: #339933;">></span></pre>