div转svg svg转canvas svg生成图片及图片下载

svg相关操作

div转svg  svg转canvas svg/canvas生成图片及图片下载

HTML：

<div id="div">  
    <p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>TRY</span></p><p><b>By Dion</b></p>  
</div>

JS：

1、div转成svg

function div2svg() {
       var divContent = document.getElementById("div").innerHTML;

       var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
           "<foreignObject width='100%' height='100%'>" +
           "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
           divContent +
           "</div>" +
           "</foreignObject>" +
           "</svg>";

       document.body.innerHTML = svg;
}
div2svg();

2、svg生成图片

function svg2img() {
       var divContent = document.getElementById("div").innerHTML;

       var data = "data:image/svg+xml," +
       "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
       "<foreignObject width='100%' height='100%'>" +
       "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
       divContent +
       "</div>" +
       "</foreignObject>" +
       "</svg>";
       var img = new Image();
       img.src = data;
       document.body.appendChild(img);
}
svg2img();

3、svg转成canvas

function svg2canvas() {
   // 图片
   var divContent = document.getElementById("div").innerHTML;  
   var data = "data:image/svg+xml," +  
   "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +  
   "<foreignObject width='100%' height='100%'>" +  
   "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +  
   divContent +  
   "</div>" +  
   "</foreignObject>" +  
   "</svg>";  
   var img = new Image();  
   img.src = data;  

   // canvas
   var canvas = document.createElement('canvas');  //准备空画布  

   canvas.width = img.width;  
   canvas.height = img.height;  
 
   var context = canvas.getContext('2d');  //取得画布的2d绘图上下文  
   context.drawImage(img, 0, 0);  
   
   document.body.appendChild(canvas);
}
svg2canvas();

接着上面的函数，实现下载

var a = document.createElement('a');  
a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据  
a.download = "img-demo";  //设定下载名称  
a.click(); //点击触发下载  

综合实例：

function svg2canvasAndLoad() {
   // 图片
   var divContent = document.getElementById("div").innerHTML;  
   var data = "data:image/svg+xml," +  
   "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +  
   "<foreignObject width='100%' height='100%'>" +  
   "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +  
   divContent +  
   "</div>" +  
   "</foreignObject>" +  
   "</svg>";  
   var img = new Image();  
   img.src = data;  

   // canvas
   var canvas = document.createElement('canvas');  //准备空画布  

   canvas.width = img.width;  
   canvas.height = img.height;  
 
   var context = canvas.getContext('2d');  //取得画布的2d绘图上下文  
   context.drawImage(img, 0, 0); 

   var type = 'png';  
   var imgData = canvas.toDataURL(type);  

   var _fixType = function (type) {  
       type = type.toLowerCase().replace(/jpg/i, 'jpeg');  // 转换jpg为jpeg
       var r = type.match(/png|jpeg|bmp|gif/)[0];  
       return 'image/' + r;  
   };  
 
   // 加工image data，替换mime type  
   imgData = imgData.replace(_fixType(type), 'image/octet-stream');  // 二进制流

   var img2 = new Image();  
   img2.src = imgData;  

   document.body.appendChild(img2);


   var saveFile = function (data, filename) {  
       var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');  
       save_link.href = data;  
       save_link.download = filename;  
 
       var event = document.createEvent('MouseEvents');  
       event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
        save_link.dispatchEvent(event);  
   };  
 
   // 下载后的图片名  
   var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;

   // download  
   saveFile(imgData, filename); 
}
  svg2canvasAndLoad();

附加：

1、initMouseEvent

initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值。此方法只能在通过 dispatchEvent 方法指派 MouseEvent 之前调用，尽管在该阶段可以多次调用它（如有必要）。如果被多次调用，则最后一次调用优先。
 
参数：
typeArg - 指定事件类型。
canBubbleArg - 指定该事件是否可以 bubble。
cancelableArg - 指定是否可以阻止事件的默认操作。
viewArg - 指定 Event 的 AbstractView。
detailArg - 指定 Event 的鼠标单击量。
screenXArg - 指定 Event 的屏幕 x 坐标
screenYArg - 指定 Event 的屏幕 y 坐标
clientXArg - 指定 Event 的客户机 x 坐标
clientYArg - 指定 Event 的客户机 y 坐标
ctrlKeyArg - 指定是否在 Event 期间按下 control 键。
altKeyArg - 指定是否在 Event 期间按下 alt 键。
shiftKeyArg - 指定是否在 Event 期间按下 shift 键。
metaKeyArg - 指定是否在 Event 期间按下 meta 键。
buttonArg - 指定 Event 的鼠标按键。
relatedTargetArg - 指定 Event 的相关 EventTarget。

谢谢关注~