小编Des*_*eus的帖子

请求 blob 图像并使用 fetch API 转换为 base64

我有一些图像将显示在 React 应用程序中。我向服务器执行 GET 请求,该请求以 BLOB 格式返回图像。然后我将这些图像转换为 base64。最后,我在图像标签的 src 属性中设置这些 base64 字符串。

最近我开始使用 Fetch API。我想知道是否有办法在“一次”中进行转换。

下面是一个示例来解释我目前的想法和/或 Fetch API 是否可以实现这一点。我还没有在网上找到任何东西。

  let reader = new window.FileReader();
  fetch('http://localhost:3000/whatever')
  .then(response => response.blob())
  .then(myBlob => reader.readAsDataURL(myBlob))
  .then(myBase64 => {
    imagesString = myBase64
  }).catch(error => {
    //Lalala
  })
Run Code Online (Sandbox Code Playgroud)

javascript base64 blob fetch fetch-api

14
推荐指数
2
解决办法
1万
查看次数

Angular 2 中的打字机效果

我一直在尝试在 Angular2 中创建打字机效果。

我的问题基本上是什么是最好的方法。我能够做到这一点的唯一方法是通过 CSS 动画。这还没有给我想要的结果。到目前为止,我已经尝试了三种方法。

CSS 方法

创建了一个带有单独样式表的组件。

@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro);

.typewriter h2 {
    margin: 0 auto;
    border-right: .15em solid white;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    animation: typewriter 2.5s steps(28) 1s 1 normal both,
             blinkTextCursor 500ms steps(28) infinite normal;
}

@keyframes typewriter{
  from { width: 0 }
  to { width: 100% }
}

@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

#typewriterbox {
  display: inline-block;
}
Run Code Online (Sandbox Code Playgroud)

接下来是将在其中添加组件的 HTML。

<div class="page-title">
    <animated-typing>CSS Typewriter effect</animated-typing>
</div>
Run Code Online (Sandbox Code Playgroud)

和组件文件:

import {Component} from …
Run Code Online (Sandbox Code Playgroud)

angular2-directives angular

4
推荐指数
1
解决办法
6209
查看次数