如何使用Dropbox和Javascript将图片添加到Codepen，然后在屏幕上显示时说出的图片名称？包括的例子

如何解决如何使用Dropbox和Javascript将图片添加到Codepen，然后在屏幕上显示时说出的图片名称？包括的例子

我有一个问题，请帮助。我有一个我想创建的Codepen页面（已经部分创建，请参见下面的链接示例）已经创建，该页面选择4个随机形状并将其显示在屏幕上，一次一个，形状为Square，Triangle，Circle或Cross，以及再次单击该图片时，它将移至下一张图片，并且计算机会说出上一张图片的名称。

我想做的是从我的Dropbox帐户和一个我共享的文件夹中选择图片，然后显示在屏幕上。计算机说出图片中的单词，即Triangle图片，计算机说出Triangle。如果Dropbox不适合，请帮助我选择什么是替代品和免费软件。

我不知道我是否正确共享了Dropbox中的文件夹，我看不到在哪里找到每张图片的确切URL？或如何将图片链接到相关单词。

下面是一个示例，我得到了帮助，可以使用随机颜色进行此操作，现在想让图片做类似的事情。

我需要帮助的示例页面； https://codepen.io/3DAttic/pen/abNNxRP

创建了示例页面，其中该项目适用于随机颜色； https://codepen.io/3DAttic/pen/gOrrQzq

预先感谢尼克又名3Dattic。

   'HTML'
  <font size=4> <body onkeydown="speakPrevious()" onkeyup="getNewRandomPicture()">

 <p> <b>This webpage is going to show 4 random pictures of shapes,Square,Cross,Triangle and Circle.
     The algorithm will select at random and <U>You MAY see the same shape several times in a row.          This is expected behavior and NOT a fault.</U>
This will work,using a computer and keyboard or on mobile device using the browser. On the mobile device touch on the text. It may help by placing your finger near the top of the webpage in the phone </p>
<p>On a computer click inside the color and press any keyboard key to move to the next shape.</b></p> 
<p> <font size=4><b><U>If the speach stops,just refresh the page again</b> </p>


   'JS'
     const page = document.querySelector("body");
      page.addEventListener("click",function () {
    speakPrevious();
    getNewRandomPicture();
});

    speakPrevious();
    function speakPrevious() {
    var synth = window.speechSynthesis;
    var utterThis = new SpeechSynthesisUtterance(window.value);
    synth.speak(utterThis);
}

   getNewRandomPicture();
   function getNewRandomPicture() {
   var myArray = ['Triangle','Square','Circle','Cross' ];
   var rand = myArray[Math.floor(Math.random() * myArray.length)]; document.getElementsByTagName("body")[0].style.backgroundColor = rand;
   var oldRand = rand;
   window.value = oldRand;
 }

解决方法

Dropbox于2017年删除了“公用文件夹”，您现在可以选择共享文件并将复制的链接复制到脚本中。

我仍然需要知道如何将其添加到我的原始问题中

您可以做的是使用Dropbox api，您可以在其中通过http请求访问该数据。

有几种获取图像内容的方法。其中的一些端点是：

filesGetThumbnailBatch

获取某些图像的缩略图。我认为这是最好的选择，因为您可以选择图像的分辨率并使其更快。

filesGetTemporaryLink

获取文件的4小时链接

文件下载

下载文件数据

以下是API和所有端点的文档：

https://www.dropbox.com/developers/documentation/http/documentation

您可以做的是：

通过Dropbox创建链接共享图像
转到链接
右键单击图像
选择“在新标签页中打开图像”
复制新标签的网址
使用HTML的img标签的src值中的URL：>（请参见示例）

<img src="https://cdn.pixabay.com/photo/2020/05/16/16/43/book-5178205_960_720.jpg"></>

您可以将Dropbox用作文件托管。以下是使用它为您的应用托管图片的方法。

1-转到您的Dropbox公用文件夹。

2-将您的图像上传到此文件夹中。

3-单击图像，然后选择“复制公共链接”。

4-复制URL并将其用于图像src值。

希望它能对您有所帮助，干杯！

如何使用Dropbox和Javascript将图片添加到Codepen，然后在屏幕上显示时说出的图片名称？包括的例子

如何解决如何使用Dropbox和Javascript将图片添加到Codepen，然后在屏幕上显示时说出的图片名称？包括的例子

解决方法

相关推荐