Image processing and upload for front-end development

the front page of the project is similar to the following figure, Taobao merchandise interface. Below, you need to show a few small pictures of rotation, and then click on the specific small picture, which shows the larger image.

now I am responsible for the backend management page of the store. In consultation with the backend engineer, they suggest that the front end find a way to achieve this function: when a picture is selected to be uploaded, two pictures, a large image and a small image, are saved when uploaded to the background. In this way, the merchandise page in the store can get two pictures.
could you tell me how to implement this?

Mar.07,2021

is not sure what implementation you want to ask.
[{thumbnail:xxx,imgUrl:xxx}] is this data structure or layout, or when uploading, the front end makes an image file large and small to the back end through canvas, or something?


1. The small image shown below is relatively small in size. You only need to save the large image at the back end, and you can control the display of the small image. Saving the small image at the back end is not recommended because the large size display of the small image is afraid of blurring.
2. If you have to save a large picture and a small picture, get the picture stream when uploading the picture, draw a large image and a small image by canvas, and then send it to the backend

.
Menu