使用标签将HTML5画布另存为图像

时间:2019-06-04 23:57:13

标签: javascript html5-canvas

我正在尝试保存画布,但是此代码对我在哪里做错了没有帮助?

function save_Picture() {
            var canvas = document.querySelector("#canvas");``
            var img_name = prompt('Image Name');
            var canvasDataURL = canvas.toDataURL();
            var a = document.createElement('a');
            a.href = canvasDataURL;
            a.download = img_name || 'drawing';

        }

1 个答案:

答案 0 :(得分:0)

您可以根据需要使用html2canvas库。这是工作示例。

function exportimage(){
 html2canvas(document.getElementById('Image'),{
                            width: 160,
                            height: 300
                        }).then(function (canvas) {
                            var a = document.createElement('a');
                            a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
                            a.download = 'test.jpeg';
                            a.click();
                        });
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<div id="Image">
    <img src="data:image/jpeg;base64,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" />
</div>

<button onclick="exportimage()">Export</button>