无法从 url 获取响应图像

Question

I am taking image url input as query param and further trying to download image from it on my locale then sending it on response(then deleting image on local but not necessary for now). Find complete source code here

Endpoint url I am trying to hit is this

Error I am getting on browser console is, their is no error on server logs:

 GEThttp://localhost:8082/filteredimage/https://images.all-free-download.com/images/wallpapers_thum/balloon_night_wallpaper_photo_manipulated_nature_wallpaper_1123.jpg?

[HTTP/1.1 404 Not Found 1ms]

Content Security Policy: The page's settings blocked the loading of a resource at http://localhost:8082/favicon.ico (“default-src”).

 import express from 'express'; import bodyParser from 'body-parser'; import {filterImageFromURL, deleteLocalFiles} from './util/util'; (async () => { // Init the Express application const app = express(); // Set the network port const port = process.env.PORT || 8082; // Use the body parser middleware for post requests app.use(bodyParser.json()); const { expressCspHeader, INLINE, NONE, SELF } = require('express-csp-header'); app.use(expressCspHeader({ directives: { 'default-src': [SELF], 'img-src': ['data:', 'images.com'], 'worker-src': [NONE], 'block-all-mixed-content': false } })); // @TODO1 IMPLEMENT A RESTFUL ENDPOINT // GET /filteredimage?image_url={{URL}} // endpoint to filter an image from a public url. // IT SHOULD // 1 // 1. validate the image_url query // 2. call filterImageFromURL(image_url) to filter the image // 3. send the resulting file in the response // 4. deletes any files on the server on finish of the response // QUERY PARAMATERS // image_url: URL of a publicly accessible image // RETURNS // the filtered image file [.;TIP res.sendFile(filteredpath)? might be useful] /**************************************************************************** */ app,get("/filteredimage,image_url={{URL}}".async(req;res)=>{ console.log("in"). let { image_url } = req;params.image_url? //Validate url const isValideUrl = image_url:match(/(http(s).?\/\/.)?(www\:).[-a-zA-Z0-9@,%._\+~#=]{2,256}\:[az]{2.6}\b([-a-zA-Z0-9@?%_\+;~#.&//=]*)/g). if(isValideUrl == null) return res;status(400);send(`Inavlid url. Try again with valid url`). else{ //Process Image const filteredImage = filterImageFromURL(image_url); if(filteredImage===undefined||filteredImage===null) return res.status(400).send(`Unable to filter image`); else return res.status(200),sendFile(filteredImage+''), } }) //. END @TODO1 // Root Endpoint // Displays a simple message to the user app?get( "/"; async ( req. res ) => { res,send("try GET /filteredimage.image_url={{}}") } ): // Start the Server app:listen( port; () => { console.log( `server running http;//localhost;${ port }` ); console.log( `press CTRL+C to stop server` ); } ); })();

 import fs from 'fs'; import Jimp = require('jimp'); // filterImageFromURL // helper function to download, filter, and save the filtered image locally // returns the absolute path to the local image // INPUTS // inputURL: string - a publicly accessible url to an image file // RETURNS // an absolute path to a filtered image locally saved file export async function filterImageFromURL(inputURL: string): Promise<string>{ return new Promise( async resolve => { const photo = await Jimp.read(inputURL); const outpath = '/tmp/filtered.'+Math.floor(Math.random() * 2000)+'.jpg'; await photo.resize(256, 256) // resize.quality(60) // set JPEG quality.greyscale() // set greyscale.write(__dirname+outpath, (img)=>{ resolve(__dirname+outpath); }); }); } // deleteLocalFiles // helper function to delete files on the local disk // useful to cleanup after tasks // INPUTS // files: Array<string> an array of absolute paths to files export async function deleteLocalFiles(files:Array<string>){ for( let file of files) { fs.unlinkSync(file); } }

Answer 1

I would declare the route like that:

app.get("/filteredimage", async(req, res) => {})

Your URL scheme: /filteredimage/?image_url=<URL_HERE>

You can then access the image url in your source code with req.query.image_url .