canvg処理svg回転png

9607 ワード

ソース:https://github.com/canvg/canvg
Include the follwing files in your page:
<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js">script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js">script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js">script> 
Put a canvas on your page
<canvas id="canvas" width="1000px" height="600px">canvas> 
Example canvg cals:
<script type="text/javascript">
window.onload = function() {
  //load '../path/to/your.svg' in the canvas with id = 'canvas'
  canvg('canvas', '../path/to/your.svg')

  //load a svg snippet in the canvas with id = 'drawingArea'
  canvg(document.getElementById('drawingArea'), '...')

  //ignore mouse events and animation
  canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true }) 
}
</script>
The third parameter is options:
  • logs:true=>consosone.logn information
  • ignoreMouse:true=>ignore mouse events
  • ignoreAnimation:true=>ignore animation
  • ignoreDimenions:true=>does not try to resize canvas
  • ignoreClear:true=>does not clear canvas
  • offsetX:int=>draws at x offset
  • offset Y:int=>draws a a y offset
  • scaleWidth:int=>scales horizontally to width
  • scaleHeight:int=>scales vertically to height
  • rendeCallback:function=>will cal the function after the first render is complected
  • forceRedraw:function=>will cal the function on everry frame,if it returns true,will redraw
  • useCORS:true=>will atempt to use CORS on margs to not taint canvas
  • You can canvg without parameters to replace all svg mages on a page.See the example.
    The e e is also a built in extension method to the canvas context to draw svgs simiar to the way drawImage works:
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');
    ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);
       canvans svg       :
    //  svgBase64 Png	
    /* function getBase64PNG(svgStr,themeSize) {
    	  var image = new Image();
    	  image.src = svgStr;
    	  
          var canvas = document.createElement("canvas");
          canvas.width = 300;
          canvas.height = 300;
          var ctx = canvas.getContext("2d");
          if(themeSize==3){
          	  ctx.drawImage(image, 0, 0);
          }else if(themeSize==2){
    	      ctx.drawImage(image, 50, 50);
          }else if(themeSize==1){
          	  ctx.drawImage(image, 100, 100);
          }
          var dataURL = canvas.toDataURL("image/png");
          return dataURL
    } */
    /**
    *  svg Png pngBase64
    */
    function getBase64PNG(svgStr,themeSize) {
          var canvas = document.createElement("canvas");
          canvas.width = 300;
          canvas.height = 300;
          var ctx = canvas.getContext("2d");
          if(themeSize==3){
          	  ctx.drawSvg(svgStr, 0, 0, 300, 300);
          }else if(themeSize==2){
    	      ctx.drawSvg(svgStr, 50, 50, 200, 200);
          }else if(themeSize==1){
          	  ctx.drawSvg(svgStr, 100, 100, 100, 100);
          }
          var dataURL = canvas.toDataURL("image/png");
          return dataURL
    }
    
    
    <span>	</span>var url="https://www.czxiu.com/assets/z/2017jiehunzheng/15/2f43b42fd833d1e77420a8dae7419000.gif";
    <span>	</span>$(document).ready(function() {
           initCavans(url);
        });
    <span>	</span>//   canvans
    <span>	</span>var cavans;
    <span>	</span>function initCavans(pngPath){
    <span>		</span>var image = new Image();
    <span>	</span>  <span>		</span>image.src = pngPath;
    <span>		</span>image.οnlοad=function(){
    <span>			</span>cavans = new fabric.Canvas('cer');
    <span>			</span>cavans.width=image.width;
    <span>			</span>cavans.height=image.height;
    <span>				</span>alert(image.width);
    <span>				</span>alert(image.height);
    <span>		</span>}
    <span>		</span>
    <span>	</span>}