1
2
3
4
5
6
7
8
9
10
<div id="a0">
    <div id="strategyContentView" style="background-color: black;width: 211px; height: 112px; letter-spacing: 0px; text-align: center; font-family: 黑体; text-align-last: center; font-weight: bold; color: red;margin-top:0px;">
        <p id="pMain">
            <span style="display: block;">前方道路</span>
            <span style="display: block;">发生交通事故</span>
            <span style="display: block;">请注意避让</span>
        </p>
    </div>
</div>
<p>以下为输出图片</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    

        

            前方道路
            发生交通事故
            请注意避让
        
    

以下为输出图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//1.将div转成svg
var divContent = document.getElementById("a0").innerHTML;
var data = "data:image/svg+xml," +
    "<svg xmlns='http://www.w3.org/2000/svg' width='211' height='112' style='display:block;'>" +
    "<foreignObject width='100%' height='100%'>" +
    "<div xmlns='http://www.w3.org/1999/xhtml'>" +
    divContent +
    "</div>" +
    "</foreignObject>" +
    "</svg>";
var img = new Image();
img.src = data;
document.getElementsByTagName('body')[0].appendChild(img);
//2.svg转成canvas
var canvas = document.createElement('canvas'); //准备空画布
canvas.width = img.width;
canvas.height = img.height;
document.body.appendChild(canvas);
var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
context.drawImage(img, 0, 0);
//var a = document.createElement('a');
//a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
//a.download = "MapByMathArtSys";  //设定下载名称
//a.click(); //点击触发下载
//3. 图片导出为 png 格式
var type = 'png';
var imgData = canvas.toDataURL(type);
console.log(imgData);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX