Question

我想转换图片中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>

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

示例：'image.png'

Answer 1

您可以向锚元素添加download属性。

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

使用HTML5制作块的屏幕截图

1 个答案: