关于前端截图爬过的坑！

在很多web项目中我们保存的图片都是后台的我们负责渲染到页面上，但是前端也是可以截图的，可是会有很多出人意料的bug，由于工作中遇到过所以就记录下来吧。

前提：后台传一张二维码的图片以及个人头像名称性别然后在页面展示，这很简单，但是我们需要将二维码个人头像名称性别合成一张图片保存下来。

工具插件：html2canvas.js和canvas2images.js,现将页面转化成画布，然后将画布转化成图片，在进行保存。下面看代码！

var test = document.getElementsByClassName("box")[0];//你需要截图的dom元素
var width = test.offsetWidth; //获取dom 宽度
var height = test.offsetHeight; //获取dom 高度

var canvas = document.createElement("canvas");//创建一个画布
var scale = 2;由于手机像素密度所以要对画布进行一个缩放,来提高截图的清晰度
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale);

html2canvas(test, {
    useCORS: true, 是否尝试使用CORS从服务器加载图像,允许跨域，不然后台数据截图不到
    logging: true, //日志开关，便于查看html2canvas的内部执行流程
    canvas: canvas,
    width: width, //可选
    height: height, //可选
    scale:scale, //可选

   //以上为基本配置;
    onrendered: function(canvas) {
        var context = canvas.getContext("2d");
        //消除锯齿,重要
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        var img = new Image();创建一个图片对象
        var url = canvas.toDataURL('image/jpeg');
        img.src = canvas.toDataURL('image/jpeg');toDataURL()该方法是将canvas转成base64编码的图片;
        document.body.appendChild(img);可选择是否将图片渲染到页面上
        //那该如何将截好的图片保存到手机上呢？这是调用了H5+的方法,自行参考
        var bitblmap = new plus.nativeObj.Bitmap('bitblmap');
        bitblmap.loadBase64Data(url,function(){
            bitblmap.save("路径",{配置参数},successcallback,errorcalllback)
        },function(){mui.toast("保存失败")}
    }

保存图片的清晰度问题（设置缩放），截图的图片有白边黑边的问题（消除锯齿），图片大小不正确的问题（所截取元素写好宽高，尽量不要使用定位）；

以上就是前端截图的使用，学会了赶紧试试吧。pc端截图是没有问题的，配置好，直接保存即可，无需缩放等。

关于前端截图爬过的坑！

猜你喜欢