canvg処理svg回転png
9607 ワード
ソース:https://github.com/canvg/canvg
Include the follwing files in your page: 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:
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: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>}