1.截出来的图会有白边
看了很多代码,感觉有点麻烦,后来灵机一动,直接把画布缩小了一点,白边就直接不显示了,不过这个方法比较投机
$("#save").click(function() { var width = $('.box').width() - 1; //截出来图片有白边,把画布减少一点, var height = $('.box').height() - 1; html2canvas($('.box')[0], { width: width, height: height, useCORS: true, //跨域图片 }).then(function(canvas) { var img = new Image() img.src = canvas.toDataURL('image/jpeg') img.style.cssText = 'position:absolute;width:70%;left:15%;top:4%;z-index:9999;' $('.mask2').append(img) console.log("生成图片了") })
2.微信头像截图时好时坏,截出的文字有些会有偏移
一开始以为是跨域图片的问题,搞了挺久,后来网上看到说这个插件
对flex的布局兼容比较差,并且最好不要用rem来设置字体,后来试了一下,果然是flex布局的问题
但是rem的使用好像是没用什么问题
反正不要使用flex布局就对了
有其他问题可以看看官方文档http://html2canvas.hertzen.com/