微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何从 Node.js 服务器向客户端发送结合随机数的图像

如何解决如何从 Node.js 服务器向客户端发送结合随机数的图像

所以,我是 Web 开发的新手,我只是想了解基础知识。任何关于我在哪里可以找到解决此问题的提示的想法都会有很大帮助。

当我的客户输入 url http://localhost:5000/creatAccountPage 服务器向他发送一个基本的 html 页面。然后html页面直接调用javascript方法getCaptachaimage():

async function getCapatchaimage()
{
        const transmittingData =
        {
          clientIdi: "152412",};
        const options = 
         {
            method:'POST',headers: {'Content-Type':'application/json'},body:JSON.stringify(transmittingData)
         };
        
        const response = await fetch('/getCaptchaimage',options);
        const jsonResponse = await response.json();
        document.getElementById("memory").innerHTML = jsonresponse.randomKey+"";
        document.getElementById("captcha_pic").src = jsonresponse.image; //image is not the right type for this to work. I think i need  to transform my json data to the right format.
}

getCapatchaimage() 方法假设从服务器获取图像和变量 randomKey。 下面是我用于发布请求的服务器代码 /getCaptachaimage 我正在使用 Node.js、express 和 Node-Fetch。

//these are not all the requires but I'm just putting the essentials for this issue.
const fetch = require('node-fetch');
const express = require('express');
const app = express(); 

app.post("/getCaptchaimage",function(req,res)
{
var randomNumber = Math.random()* 100000;
var fullKey = randomNumber +process.env.CAPTCHA_SECRET+"";
const verifyUrl = `http://image.captchas.net?client=demo&random=`+fullKey; //I'm getting my image from an external server I can't get it directly from the client code else the client would kNow the fullkey which he is not suppose to kNow.
fetch(verifyUrl)
.then((body) => {
  return res.json({image: body.body,randomKey: randomNumber}); //I suppose I should probably be transforming my image in to a specific format here too. 
});
});

我的一般想法是将我的图像与我的随机密钥一起传输,只是将图像数据与变量 randomkey 一起放入 json 对象的字符串变量 image > 然后找到一个方法将字符串图像数据转换为我需要的格式:document.getElementById("captcha_pic").src = ????

知道如何转换我的图像数据以使其正常工作吗?

由于 javascript 中没有明确的变量类型,我什至无法理解服务器代码的 fetch 函数中数据的格式是“body”。 Node-fetch api 中的所有解释要么我不明白,要么没有告诉我我需要知道什么。 https://www.npmjs.com/package//node-fetch#buffer

在此先感谢您的帮助。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。