Javascript 使用HTML5制作块的屏幕截图_Javascript_Html_Canvas

Javascript 使用HTML5制作块的屏幕截图

javascript html canvas

Javascript 使用HTML5制作块的屏幕截图,javascript,html,canvas,Javascript,Html,Canvas,我想转换图像中div块的内容，并提供给用户下载 <!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> div { width:200px; background-color: green;

我想转换图像中

div

块的内容，并提供给用户下载

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
        div {
            width:200px;
            background-color: green;
        }
    </style>

    <script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div id="downimg">
        <div>some text</div>
    </div>

    <script language="javascript">
        function downimg(){
            html2canvas($('#downimg'), {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");

                    window.location.href = img;                     
                }
            });
        }
    </script>

    <a href="javascript:void(0)" onClick="downimg()" >SAVE</a>
</body>
</html>


div{
宽度：200px；
背景颜色：绿色；
}
一些文本
函数downimg（）{
html2canvas（$（'downimg'）{
onrendered：函数（画布）{
var img=canvas.toDataURL（'image/png'）。替换（“image/png”，“image/octet-stream”）；
window.location.href=img；
}
});
}

如何在不使用服务器技术的情况下为映像提供扩展名

示例：'image.png'

您可以向锚元素添加

下载

属性

<a download="image.png" href="javascript:void(0)" onClick="downimg()" >SAVE</a>

@adrianpruss我同意你的观点！