Compare Revisions

<a>

Change Revisions

Revision 524349:

Revision 524349 by Sheppy on

Revision 565217:

Revision 565217 by codepo8 on

Title:
<a>
<a>
Slug:
Web/HTML/Element/a
Web/HTML/Element/a
Tags:
"HTML:Phrasing content", "Élément", "HTML text-level semantics", "Element", "Reference", "NeedsCompatTable", "Référence", "Web", "HTML", "Elément", "HTML:Flow content"
"HTML:Phrasing content", "Élément", "HTML text-level semantics", "Element", "Reference", "NeedsCompatTable", "Référence", "Web", "HTML", "Elément", "HTML:Flow content"
Content:

Revision 524349
Revision 565217
tt343    <h2>
344      Example: Using the download attribute to save a canvas as a
 > PNG
345    </h2>
346    <p>
347      If you want to allow a user to download an HTML Canvas as a
 >n image you can create a link with a download attribute and the c
 >anvas data as a file URL:
348    </p>
349    <pre class="brush: js">
350<span style="color: #000066; font-weight: bold;">var</span> link 
 ><span style="color: #339933;">=</span> document.<span style="colo
 >r: #660066;">createElement</span><span style="color: #009900;">(<
 >/span><span style="color: #3366CC;">'a'</span><span style="color:
 > #009900;">)</span><span style="color: #339933;">;</span>
351link.<span style="color: #660066;">innerHTML</span> <span style="
 >color: #339933;">=</span> <span style="color: #3366CC;">'download
 > image'</span><span style="color: #339933;">;</span>
352link.<span style="color: #660066;">addEventListener</span><span s
 >tyle="color: #009900;">(</span><span style="color: #3366CC;">'cli
 >ck'</span><span style="color: #339933;">,</span> <span style="col
 >or: #000066; font-weight: bold;">function</span><span style="colo
 >r: #009900;">(</span>ev<span style="color: #009900;">)</span> <sp
 >an style="color: #009900;">{</span>
353    link.<span style="color: #660066;">href</span> <span style="c
 >olor: #339933;">=</span> canvas.<span style="color: #660066;">toD
 >ataURL</span><span style="color: #009900;">(</span><span style="c
 >olor: #009900;">)</span><span style="color: #339933;">;</span>
354    link.<span style="color: #660066;">download</span> <span styl
 >e="color: #339933;">=</span> <span style="color: #3366CC;">"mypai
 >nting.png"</span><span style="color: #339933;">;</span>
355<span style="color: #009900;">}</span><span style="color: #339933
 >;">,</span> <span style="color: #003366; font-weight: bold;">fals
 >e</span><span style="color: #009900;">)</span><span style="color:
 > #339933;">;</span>
356document.<span style="color: #660066;">body</span>.<span style="c
 >olor: #660066;">appendChild</span><span style="color: #009900;">(
 ></span>link<span style="color: #009900;">)</span><span style="col
 >or: #339933;">;</span>
357</pre>
358    <p>
359      You can see this in action <a href="http://jsfiddle.net/cod
 >epo8/V6ufG/2/">http://jsfiddle.net/codepo8/V6ufG/2/</a>
360    </p>

Back to History