angular 8+ canvas拼接图片(纵向)

angular 图片竖向拼接代码

理论上angualr6789都能使用,编译环境是ng8

底部有demo

<div>
    <div>
        <input type="file" id="upFile" (change)="upFile($event)" accept="image/*" multiple="multiple"
            style="display:none" />
        <label for="upFile">
            <span class="choosefile-btn">选择文件</span>
        </label>
    </div>
    <div *ngIf="isPreview">
        <img [src]="imgurl" style="width:100%" />
    </div>
</div>

  private returnType: string = "base64";
  public returnData: any = null;
  public imgurl: string = null;
  public isPreview: boolean = true;
  private isAutoDownload: boolean = true;
  private widths: number = 1366;
  private quality: number = 0.618


  base64ToBlob(code) {
    let parts = code.split(";base64,");
    let contentType = parts[0].split(":")[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], { type: contentType });
  }
  downloadFile(fileName, content) {
    let aLink = document.createElement("a");
    let blob = this.base64ToBlob(content); // new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(
      new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window
      })
    ); // 兼容火狐
  }

  upFile(event: any) {
    if (this.returnType !== "file") {
      const files = Array.from(event.target.files);
      this.filesToInstances(files);
    } else {
      this.returnData = event.target.files;
    }
  }
  filesToInstances(files) {
    const length = files.length;
    let instances = [];
    let finished = 0;

    files.forEach((file, index) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        const image: any = new Image();
        image.src = e.target.result;
        image.onload = () => {
          // 图片实例化成功后存起来
          instances[index] = image;
          finished++;
          if (finished === length) {
            this.drawImages(instances);
          }
        };
      };
    });
  }
  drawImages(images) {
    const width = this.widths;
    const heights = images.map((item) => (width / item.width) * item.height);
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = heights.reduce((total, current) => total + current);
    const context = canvas.getContext("2d");
    let y = 0;
    images.forEach((item, index) => {
      const height = heights[index];
      context.drawImage(item, 0, y, width, height);
      y += height;
    });
    const base64Url = canvas.toDataURL("image/jpeg", this.quality);

    this.dealImages(base64Url);
    if (this.returnType == "base64" && this.isAutoDownload) {
      this.downloadFile(this.createFileName(), base64Url);
    }
  }
  dealImages(url) {
    this.imgurl = url;
    this.returnData = url;
    // 输出结果
    console.log(url);
    
  }
  createFileName() {
    return "图片拼接" + new Date().getTime();
  }

.choosefile-btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 40px;
    background: rgb(83, 170, 148);
    border-radius: 8px;
    color: #efeefe;
  }

react拼接图片代码:react拼接图片代码

vue拼接图片代码:react拼接图片代码

demo地址(vue):demo