为实现前端截图功能,我的dom-to-image踩坑之旅!

需求背景

最近产品要求做一个截图的功能,其背景是我们做的是一个教育类的网页,我们会统计学员的做题、听课、任务等数据,然后按照班级进行排名,然后班主任需要把这些数据发到班级群里,所以需要一个截图的功能。

为什么不让班主任自己搞一个截屏软件截图呢?

  1. 并不是所有班主任都有一个好的截屏软件,截出来效果不一定理想,
  2. 如果数据量比较大,出现了滚动条,这时候截屏操作起来比较麻烦,
  3. 自己实现的截屏功能可以实现截图的定制化,比如优化样式,往里面增加一些元素,比如二维码啥的等等。

我这里是采用了前端dom-to-image截图方案,至于为什么用这个方案,主要原因有两点:

  1. 在项目中其它场景中已经有过这个截图功能,用的就是dom-to-image,属于是直接吃现成的了,
  2. dom-to-image基本能满足我的截图要求,没必要再用其它方案,再引入一个其它的npm包进来了!

于是开始了我的dom-to-image踩坑记录!

问题1:图片生成比较模糊

我用了dom-to-imagetoPng去生成图片,虽然生成的图片比较小,只有100多kb,但是清晰度比较差,我尝试把quality参数调到最大值1,然而并没什么效果,还是模糊。最终在网上找到了一个方案,那就是修改源码,增加scale参数

我直接把dom-to-image的源码下载下来,找到newCanvas方法,然后添加了下面这些代码。

diff 复制代码
function newCanvas (domNode) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;
+    var scale = options.scale || 1; 
+    canvas.width = (options.width * scale) || util.width(domNode);
+    canvas.height = (options.height * scale) || util.height(domNode);
+    ctx.scale(scale, scale)
    if (options.bgcolor) {
        ctx.fillStyle = options.bgcolor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    return canvas;
}

加完后在使用的时候就可以传入scale参数了:

js 复制代码
const box = document.getElementById('box');
const node = document.getElementById('output');
domToImage.toPng(node, { bgcolor: '#fff', scale: 5, width: box.offsetWidth, height: box.scrollHeight });

这样虽然图片生成的大了点,但清晰度很高。

注意:如果遇到某些设备出现生成图片失败的问题,可能是这些设备性能比较低,这时候需要适当降低scale的值。

问题2:图片url无法访问时,导致截图失败

由于某些业务原因,后端返回的用户头像图片中,有一个url无法访问,导致截图失败了。于是我做了下兼容,在图片访问失败的时候,给一张默认图片,然后用一个变量统计图片正常加载的个数,等所有图片都正常加载完后再渲染图片。

html 复制代码
<template>
  <div v-for="item in list" :key="item.id">
    <img class="avatar" :src="item.mediumAvatar || defaultAvatar"  @error="onImageError" @load="onImageLoad"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultAvatar: 'https://xxx.jpg',
      list: [],
      imageCount: 0,
    }
  },
  methods: {
    onImageError(e) {
      e.target.src = this.defaultAvatar;
    }
    onImageLoad() {
      if (++this.imageCount === this.list.length) {
        this.transformImage();
      }
    },
    // 截图
    transformImage() {
      // ...
    }
  }
}
</script>

问题3:某些ios手机下会生成图片失败

经测试发现,某些ios手机下会生成图片失败,于是也在网上找了下方案,最后通过连续调用两次toPng方法解决了问题,代码如下:

js 复制代码
const ios = ios: /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1), //ios终端
const SCALE = 2;
const box = document.getElementById('box');
if (ios) {
  domToImage
    .toPng(node, { bgcolor: '#fff', scale: SCALE, width: box.offsetWidth, height: box.scrollHeight })
    .then((imgUrl) => {
      return domToImage.toPng(node, { bgcolor: '#fff', scale: SCALE, width: box.offsetWidth, height: box.scrollHeight  });
    })
    .then((imgUrl) => {
      console.log('imgUrl', imgUrl)
    })
    .catch((error) => {
      console.error('图片生成失败', error);
    })
}  

小结

上面主要记录了我为了实现前端截图功能,而被迫开始的dom-to-image踩坑之旅了,希望能对大家平常开发有帮助!

相关推荐
BillKu5 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
DevilSeagull5 小时前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
面向星辰5 小时前
html中css的四种定位方式
前端·css·html
Async Cipher6 小时前
CSS 权重(优先级规则)
前端·css
大怪v6 小时前
前端佬:机器学习?我也会啊!😎😎😎手“摸”手教你做个”自动驾驶“~
前端·javascript·机器学习
Liquad Li6 小时前
Angular 面试题及详细答案
前端·angular·angular.js
用户21411832636026 小时前
首发!即梦 4.0 接口开发全攻略:AI 辅助零代码实现,开源 + Docker 部署,小白也能上手
前端
gnip8 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart8 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.8 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频