2013년 8월 25일 일요일

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/>
    <download="test.txt">Download as text.txt</a>
</article>
<footer>
<ul>
    <li><href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/window.URL.createObjectURL">window.URL.createObjectURL</a></li>
    <li><href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download">a[download]</a></li>
    <br/>
    <br/>
    <br/>
    <br/>
    <li><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 (urlURL.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'truetruewindow10000falsefalsefalsefalse0null);
    $("a[download]")[0].dispatchEvent(evt);
});

댓글 없음:

댓글 쓰기