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;'>TRYspan>p><p><b>By Dionb>p>  
div>

JS:
1,div에서svg로 전환

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

       var svg = "+
           "" +
           "
" +
           divContent +
           "
" +
           "" +
           "";

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

2,svg 이미지 생성

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

       var data = "data:image/svg+xml," +
       "+
       "" +
       "
" +
       divContent +
       "
" +
       "" +
       "";
       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," +  
   "+  
   "" +  
   "
" +  
   divContent +  
   "
" +  
   "" +  
   "";  
   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," +  
   "+  
   "" +  
   "
" +  
   divContent +  
   "
" +  
   "" +  
   "";  
   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 - 이벤트 마우스 클릭 수를 지정합니다.screenXArg - 이벤트 지정 화면 x 좌표 screenYArg - 이벤트 지정 화면 y 좌표clientXArg - 이벤트 지정 클라이언트 x 좌표clientYArg - 이벤트 지정 클라이언트 y 좌표ctrlKeyArg - 이벤트 동안 control 키를 눌렀는지 여부를 지정합니다.altKeyArg - 이벤트 동안 alt 키를 눌렀는지 여부를 지정합니다.shiftKeyArg - 이벤트 동안 shift 키를 눌렀는지 여부를 지정합니다.metaKeyArg - 이벤트가 진행되는 동안 meta 키를 누를 것인지 여부를 지정합니다.buttonArg - 이벤트의 마우스 버튼을 지정합니다.relatedTargetArg - 이벤트와 관련된 이벤트Target를 지정합니다.
감사합니다 구독~