Canvas toDataURL返回空

Question

我正在尝试使用画布将SVG元素导出为图像blob。当我尝试调用canvas.toDataURL("image/png")时，它返回空字符串。我不明白为什么会发生这种情况。

const svg: Node = document.getElementById("flowchart-container").children[0];
var icanvas = document.getElementById("stage");
const ctx: CanvasRenderingContext2D = icanvas.getContext("2d");
var width = (svg as HTMLElement).clientWidth;
var height = (svg as HTMLElement).clientHeight;
const image: HTMLImageElement = document.createElement("img");
image.crossOrigin = "anonymous";
const imageBlob: Blob = new Blob(
  [new XMLSerializer().serializeToString(svg)],
  {
    type: "image/svg+xml",
  }
);
const blobUrl: string = URL.createObjectURL(imageBlob);
image.src = blobUrl ;
image.onload = (): void => {
  //ctx.clearRect(0, 0, width, height);
  ctx.drawImage(image, 0, 0, width, height);
  window.URL.revokeObjectURL(blobUrl);
  try {
    const imageData: string = icanvas.toDataURL("image/png");
    const imageFileToBeExported: Blob | File = this.dataURLtoFile(
      imageData,
      "flowchart.png"
    );
    promiseResolve(imageFileToBeExported);
  } catch (error) {
    console.log('Failed to Create Image');
    console.log(error);
    promiseReject(error);
  }
};

上面的代码放在createSVG方法中。Caller是显示方法。

    public createSVG(
        promiseResolve: (data: File | Blob) => void,
        promiseReject: (error: unknown) => void
        ): void {
        //Code for Creating File
    }

public async getImage() :Promise<any>{
    let imageBlob: File | Blob;
    try {
        imageBlob = await generateImageAsynchronously();
    } catch (error) {
      console.log('Failed to create Image');
    }
}

public generateImageAsynchronously(): Promise<File | Blob> {
    return new Promise(
      (
        resolver: (data: File | Blob) => void,
        reject: (error: unknown) => void
      ): void => {
        this.createSVG(resolver, reject);
      }
    );
}

最后，从下面的方法调用

public display(){
    this.getImage().then(response => {
      console.log('Resolving Promise');
      this.imageBlob = response;
    );
}

Answer 1

这是使用.onload时的常见问题，基本上是在处理数据之前返回promise。您可以尝试将其包装在一个异步函数中，如下所示

async function waitForloading(){
let waitForLoad = await processImage()
return waitForLoad
}

function processImage(){
return new Promise(function(promiseResolve,promiseReject){
const svg: Node = document.getElementById("flowchart-container").children[0];
var icanvas = document.getElementById("stage");
const ctx: CanvasRenderingContext2D = icanvas.getContext("2d");
var width = (svg as HTMLElement).clientWidth;
var height = (svg as HTMLElement).clientHeight;
const image: HTMLImageElement = document.createElement("img");
image.crossOrigin = "anonymous";
const imageBlob: Blob = new Blob(
  [new XMLSerializer().serializeToString(svg)],
  {
    type: "image/svg+xml",
  }
);
const blobUrl: string = URL.createObjectURL(imageBlob);
image.src = blobUrl ;
image.onload = (): void => {
  //ctx.clearRect(0, 0, width, height);
  ctx.drawImage(image, 0, 0, width, height);
  window.URL.revokeObjectURL(blobUrl);
  try {
    const imageData: string = icanvas.toDataURL("image/png");
    const imageFileToBeExported: Blob | File = this.dataURLtoFile(
      imageData,
      "flowchart.png"
    );
    promiseResolve(imageFileToBeExported);
  } catch (error) {
    console.log('Failed to Create Image');
    console.log(error);
    promiseReject(error);
  }
};
)}
}