Canvas 이미지 저장(다운로드하는법)

canvas 다운로드 방법

var data = canvas.toDataURL();

아래의 a 테그의 href 를 data 로 바꿔주면된다. 크롬만 가능(크롬프레임도 됨)

<a href="#" class="downlink" download="gray.png"><input type='button' value='wwwww'></a>

---

참고 

http://html5-demos.appspot.com/static/filesystem/generatingResourceURIs.html

---

<article>
    <button type="button">create url, put it in below link, and click it</button><br/>
    <a download="test.txt">Download as text.txt</a>
</article>
<footer>
<ul>
    <li><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/window.URL.createObjectURL">window.URL.createObjectURL</a></li>
    <li><a href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download">a[download]</a></li>
    <br/>
    <br/>
    <br/>
    <br/>
    <li><a href="it works!" download="nate.txt">download me</a></li>
</ul>
</footer>​

---

var URL = window.webkitURL || window.URL;
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder || window.BlobBuilder;

var url;

$("button").click(function() {
    if (url) URL.revokeObjectURL(url);
    var bb = new BlobBuilder();
    bb.append("it workwfwefwefwefwefwefwefwefwefs!");
    var file = bb.getBlob("text/plain");
    url = URL.createObjectURL(file);
    $("a[download]").attr("href", url);
    
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    $("a[download]")[0].dispatchEvent(evt);
});​