关于前端截图爬过的坑!

在很多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);可选择是否将图片渲染到页面上
        //那该如何将截好的图片保存到手机上呢?
        var bitblmap = new plus.nativeObj.Bitmap('bitblmap');
        bitblmap.loadBase64Data(url,function(){
            bitblmap.save("路径",{配置参数},successcallback,errorcalllback)
        },function(){mui.toast("保存失败")}
    }

 

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

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

你可能感兴趣的:(常见的问题及插件使用)