Angular中html2canvas如何设置allowTaint以渲染外部图片？

问题描述 #

我正尝试为我的Angular应用实现下载功能，目前功能已正常运行，但遇到了问题：外部来源的图片无法被渲染保存。了解到可通过设置布尔值allowTaint来解决该问题，但我是Angular和html2canvas的新手，不清楚在以下代码中何处配置该选项。我的代码如下：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ResultsService } from '../shared/results.service';
import { IResult } from '../shared/models/result.model';
import { IGroup } from '../shared/models/group.model';
import * as jsPDF from 'jspdf';
import * as html2canvas from "html2canvas";

@Component({
  templateUrl: './results.component.html',
  styleUrls: ['./results.component.scss']
})
export class ResultsComponent implements OnInit {
  id: number;
  result: IResult;
  groups: IGroup[];
  private sub: any;

  constructor(
    private _resultsService: ResultsService,
    private _route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.sub = this._route.params.subscribe(params => {
      this.id = +params['id'];
    });
    this._resultsService.get(this.id).subscribe(result => {
      this.result = result
      this.groups = JSON.parse(result.data);
    });
  }

  download() {
    html2canvas(document.body).then(function(canvas) {
      var img = canvas.toDataURL("image/png");
      var doc = new jsPDF();
      doc.addImage(img,'JPEG',0,0);
      doc.save('test.pdf');
    });
  }
}

回答 #

很简单啦！你只需要在调用html2canvas的时候，传入第二个参数作为配置选项对象，把allowTaint设置为true即可。这个选项会允许html2canvas渲染跨域来源的图片，刚好解决你遇到的问题。

修改后的download方法代码如下：

download() {
  // 传入配置对象，开启allowTaint
  html2canvas(document.body, { allowTaint: true }).then(function(canvas) {
    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    doc.addImage(img,'JPEG',0,0);
    doc.save('test.pdf');
  });
}

另外补充个小建议：如果你的外部图片所在服务器支持CORS（跨域资源共享），也可以考虑使用useCORS: true替代allowTaint。这样既可以渲染跨域图片，又不会让画布被标记为“受污染”，后续的导出操作会更安全哦～

内容的提问来源于stack exchange，提问作者r3plica