imagetracer.js是一款将位图转换成svg矢量图的插件

imagetracer.js是一款将位图转换成svg矢量图的插件

imagetracer.js是一款将位图转换成svg矢量图的插件。

使用方式:

cdn

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/imagetracer_v1.2.6.js"></script>
<script>
    ImageTracer.imageToSVG(
    
    '/asset/logo.png', // input选择的文件 或者本域名的url图片地址
    
    function(svgstr){ ImageTracer.appendSVGString( svgstr, 'svgcontainer' ); }, //回调函数
    
    'posterized2' //预设,包含'default' 'posterized1' 'posterized2' 'posterized3' 'curvy' 'sharp' 'detailed' 'smoothed' 'grayscale' 'fixedpalette' 'randomsampling1' 'randomsampling2' 'artistic1' 'artistic2' 'artistic3' 'artistic4'
    
    );
</script>

npm

在github下载项目,https://github.com/jankovicsandras/imagetracerjs

执行命令:

imagetracerjs/nodecli>node nodecli ../panda.png outfilename panda.svg scale 10
执行后输出

imagetracerjs/nodecli/panda.svg was saved!

还可以自己写个nodejs的程序调用它进行处理,示例如下:

"use strict";
 
var fs = require('fs');
 
var ImageTracer = require( __dirname + '/../imagetracer_v1.2.6' );
 
// This example uses https://github.com/arian/pngjs 
// , but other libraries can be used to load an image file to an ImageData object.
var PNGReader = require( __dirname + '/PNGReader' );
 
// Input and output filepaths / URLs
var infilepath = __dirname + '/' + 'panda.png';
var outfilepath = __dirname + '/' + 'panda.svg';
 
 
fs.readFile(
        
    infilepath,
    
    function( err, bytes ){ // fs.readFile callback
        if(err){ console.log(err); throw err; }
    
        var reader = new PNGReader(bytes);
    
        reader.parse( function( err, png ){ // PNGReader callback
            if(err){ console.log(err); throw err; }
            
            // creating an ImageData object
            var myImageData = { width:png.width, height:png.height, data:png.pixels };
            
            // tracing to SVG string
            var options = { scale: 5 }; // options object; option preset string can be used also
            
            var svgstring = ImageTracer.imagedataToSVG( myImageData, options );
            
            // writing to file
            fs.writeFile(
                outfilepath,
                svgstring,
                function(err){ if(err){ console.log(err); throw err; } console.log( outfilepath + ' was saved!' ); }
            );
            
        });// End of reader.parse()
        
    }// End of readFile callback()
    
);// End of fs.readFile()

github地址;https://github.com/jankovicsandras/imagetracerjs

立即下载imagetracer.js查看所有js插件

网友评论0

程序员在线工具箱