在没有服务器的情况下将图像转换为base64

Question

我正在使用 Pinterest Javascript SDK 来尝试创建一个图钉。设置图像的参数是其中之一；

image - 使用多部分表单数据上传您想要固定的图片

image_url - link 到您要固定的图像，或

image_base64 - Base64 编码图像link

我正在尝试从客户端创建 Pin 图，而不是通过服务器。我的表格很简单：

<div class="file-upload">
  <input type="file" name="fileToUpload" id="fileToUpload">
</div>

我使用

读取了它的值

const imageUrl = document.getElementById('fileToUpload').value;

我已经尝试了 image 和 image_url 参数来发送那个值 (imageUrl)，但是因为这个值解析到我硬盘上的一个地方，所以它没有' 不工作（可能是期待）。

所以现在我必须尝试弄清楚如何使用 image_base64 选项，这意味着我需要在用户机器上将图像转换为 base64。

我该怎么做呢？或者更好的是，如果有人知道我如何使用 image 参数，我认为那会更好

Answer 1

您可以使用附加到 <input type="file"> 元素的 change 事件，FileReader 将 File 对象转换为 <input type="file"> 元素 .files 属性到 change 事件处理程序

中 data URI 的 data URI 或 base64 部分

<div class="file-upload">
  <input type="file" name="fileToUpload" id="fileToUpload">
</div>
<script>
  const input = document.getElementById("fileToUpload");
  const reader = new FileReader;
  reader.onload = () => {
    const dataURL = reader.result;
    const base64 = reader.result.split(",").pop();
    console.log(dataURL, base64);
  }
  input.onchange = () => {
    reader.abort();
    reader.readAsDataURL(input.files[0]);
  }
</script>

在没有服务器的情况下将图像转换为base64

Convert image to base64 without server

javascript

base64

pinterest