关于前端截图爬过的坑！

在不少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端截图是没有问题的，配置好，直接保存便可，无需缩放等。