如何将图像从 url typescript 转换为 base64 并将其存储在字符串中

Question

我正在使用 pdfmake，我想在 de pdf 中添加我的公司徽标。

 getDocumentDefinition() {
    sessionStorage.setItem('resume', 'name');
    return {
      content: [
        {
          text: 'RESUME',
          bold: true,
          fontSize: 20,
          alignment: 'center',
          margin: [0, 0, 0, 20]
        },
        {
            image: getBase64FromUrl('https://localhost:44344/assets/images/logo.png'),
            width: 100,
            height: 100,
            alignment: 'left'
        },
      }
    };

这是我想在打字稿中使用的功能我尝试了很多不同的方法来从 url 创建 base64 stream/string 但不是对我有用的解决方案。我尝试过的解决方案页面是空白的。如何让它适用于 pdfmake。谢谢你的帮助。

function getBase64FromUrl(url) : string {

//Do some magic
//Return result

}

Answer 1

我在网上找到了这个解决方案，它对我有用。

getBase64FromUrl(url) {
  return new Promise((resolve, reject) => {
    var img = new Image();
    img.setAttribute("crossOrigin", "anonymous");

    img.onload = () => {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;

      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);

      var dataURL = canvas.toDataURL("image/png");

      resolve(dataURL);
    };

    img.onerror = error => {
      reject(error);
    };

    img.src = url;
  });
}

如何将图像从 url typescript 转换为 base64 并将其存储在字符串中

How to convert a image to base64 from a url typescript and store it in a string

typescript

pdfmake