<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <canvas id="drawing" width="200" height="200">A drawing of something</canvas>
    <script>
        var drawing = document.getElementById('drawing')
        if (drawing.getContext) { // 确定浏览器支持<canvas>元素
            // 使用 toDataURL()方法,可以导出在<canvas>元素上绘制的图像。
            // 这个方法接受一个参数,即图 像的 MIME 类型格式,而且适合用于创建图像的任何上下文
            // image/png, image/jpeg
            var imgURI = drawing.toDataURL('image/png')

            var image = document.createElement('img')
            image.src = imgURI
            document.body.appendChild(image)
        }
    </script>
</body>
</html>