Javascript算法实现PDF批量加盖不同宽度骑缝章，vue加持。

需求：
电子交易合同、电子文件需要加盖骑缝章，骑缝章的宽度并且是随机的。可盖1-2个骑缝章。
思路：
获取文件的页数pageNum，章宽width，按照页数使用裁剪组件把章裁剪成pageNum份，每一份骑缝章Math.random()宽度不同，但加起来的宽度等于width。最后再重新渲染到每一张纸上
技术：
vue、cropper.js、递归

1、获取电子纸张数量pageNum、获取完整章的宽度w，随机设置章宽，但是不要差w/pageNum太多，否则章可能宽度差异太大
2、使用裁剪工具cropper.js裁剪一枚完整章为pageNum个章。即pageNum张图片/骑缝章
3、页面上放好dom，vue自动渲染章

   <script>
      var vm = new Vue({
        el: "#app",
        data: {
        },
        methods: {
          getList: function () {
            // 完整章宽，x是自己得到的章宽度
            let imgWidth = x;
            let imgHeight=h //完整章高
            // y：章的个数
            // 完整章分割后生成的随机骑缝章图片宽度数组
            let stampFreeWithArr = [];
            for (let i = 0; i < y; i++) {
              if (i == y - 1) {
                //  最后一枚章宽
                stampFreeWithArr.push(imgWidth);
              } else {
                // oneFreeWidth是一个骑缝章的随机宽度，但会控制不与平均宽度不相差太大
                let oneFreeWidth = Math.floor(
                  Math.random() * ((imgWidth / y) * 2 - imgWidth / y + 1) +
                    imgWidth / y
                );
                // 骑缝章数组
                stampFreeWithArr.push(oneFreeWidth);
                // 每次减去，是为了最后一枚章宽
                imgWidth -= oneFreeWidth;
              }
            }

            let distanceToLeft = 0;
            this.circle(
              stampFreeWithArr, //完整章分割后生成的随机骑缝章图片宽度数组
              0,    //索引，从0开始
              distanceToLeft,   //切的图距离左边的距离
              stampEveryArr,    //由骑缝章的src、with、height构成的一维数组
              imgWidth, //完整章宽
              imgHeight //完整章高
            );
          },
          //递归得到骑缝章
          circle: function (
            arr,    //完整章分割后生成的随机骑缝章图片宽度数组
            index,
            distanceToLeft, //切的图距离左边的距离
            stampEveryArr,//由骑缝章的src、with、height构成的一维数组
            imgWidth,
            imgHeight
          ) {
            let that = this;
            // 递归停止触发条件 
            if (index == arr.length) {
              return false;
            }
            let everyW = arr[index]; //每一枚骑缝章的宽度
            // cropper.js用法看官网
            new Cropper(currentImgDom, {
              ready() {
                // cropper用法
                var cropper = this.cropper;
                cropper.setCanvasData({
                  left: 0,
                  top: 0,
                  width: imgWidth,
                  height: imgHeight,
                });
                cropper.setCropBoxData({
                  left: distanceToLeft,
                  top: 0,
                  width: everyW,
                  height: imgHeight,
                });
                cropper.crop();

                let newImg = cropper.getCroppedCanvas().toDataURL("image/png");
                // 最后一次的stampEveryArr就是骑缝章的数组！！！
                stampEveryArr.unshift({
                  src: newImg,
                  w: everyW,
                  h: imgHeight,
                });

                // 移动裁剪位置
                distanceToLeft += Number(everyW);
                // 索引++
                index++;
                // 每次需要毁坏cropper
                cropper.destroy();
                // 递归
                that.circle(
                  arr,
                  index,
                  distanceToLeft,
                  stampEveryArr,
                  imgWidth,
                  imgHeight,
                  currentImgDom
                );
              },
              crop(event) {},
            });
          },
        },
        mounted: function () {
          this.getList();
        },
      });
    </script>