jtopo的项目实战（六）

话接上回，继续实现jtopo本身不具有的一些功能，有讲的不对的地方，欢迎大家在评论区留言提出，博主基本每天在线，看到都会及时回复的，我们一起进步，奥利给，还有，码字不易，如果觉得博主写的不错的欢迎打赏哈！

7.没有生成缩略图的接口

目前很多拓扑图类的项目中，都要求能生成缩略图，既能看出整个拓扑图的整体轮廓，也不能太大，方便快速加载，jtopo自带有类似的接口，但不能直接用，好吧，那我们就继续发扬自力更生的传统美德，在原有的接口基础上，整出一套适合我们自己的接口方法出来，废话不多说，先看效果图，再聊代码。

 

原图（Jason加载拓扑后的效果）

 

在看看生成的缩略图（350x220）,当然最后的接口是可以指定缩略图大小的。

 

 

好了，看完效果图了，我们言归正传说说代码，看到底是怎么实现的。

 

首先，我们在jtopo-editor中定义一个方法，用来获取当前拓扑图的base64串，因为有了串我们才好下手自定义我们想要的东西，你们心心念的代码来啦！

getBase64Str: function(){

       return  editor.stage.eagleEye.getImage();

}

对了，注意这段代码一定要放在editor.utils中，不要放错地方了。

 

拿到了base64，就可以通过字符串转换成图片，但是，我们想要的不是原尺寸的拓扑图，因为它太大了，所以这个串不是我们最终想要的字符串，好了，第二步才是关键，我们要做的是用拿到的字符串实例化一个Image对象，当然了，这个Image对象一定是我们想要的尺寸，再将这个Image绘制到canvas对象上，最后的最后就是重新导出base64，重新生成的字符串就是我们想要的，即指定大小的缩略图，原理说完了，该上代码了。

/*获取指定大小的base64图片*/
function comPrevw(base64IMG,callback) {

    var quality = 0.7;	//定义默认图片压缩后的质量（0~1）
    img = new Image();
    img.src = base64IMG;

    var oWidth = 350;
    var oHeight = 220;
    var Size = {width: oWidth, height: oHeight};
    //开始进行转换到canvas再压缩操作
    var canvas = document.createElement("canvas");
    canvas.width = Size.width;	//设置画布的宽度
    canvas.height = Size.height;//设置画布的高度
    var ctx = canvas.getContext("2d");

    img.onload = function () {
        ctx.drawImage(img,0,0,Size.width,Size.height);
          var smBase64 = canvas.toDataURL('image/png', quality)
          if (callback) {
              callback(smBase64);
          }   
    } 
}

大家可以根据自己的需要灵活调整大小，其中oWidth 就是缩略图的宽度，oHeight 就是缩略图的高度，最终生成的缩略图base64通过回调函数传回，可以在回调中处理后面的逻辑。比如我是这么用的，在回调中保存现有的拓扑图，这样一来保存拓扑图的时候，缩略图也一并保存了，其中editor.utils.getBase64Str()就是我们一开始定义的方法，用来拿到原始拓扑图的Base64字符串。

 

好了，jtopo缩略图算是实现啦。有问题的小伙伴欢迎在下面评论留言哦~！我们评论区见。

 

最后，博主有一个小小的心愿，就是希望大家点一下下方的点赞、分享和收藏，博主希望大家都支持下，后期有好的东西我会继续分享给大家。