Случай использования

Я работаю над модулем генерации изображений для клиента. Когда клиент подпишется на наш сервис, мы предоставим ему сертификат с его именем и другими данными. У меня есть пустой сертификат, и во время выполнения, когда пользователь войдет в свою учетную запись, пользователь получит сертификат, когда войдет в раздел сертификатов.

Я не понимаю, как я могу редактировать или вносить изменения в изображение, так как я работаю над обработкой изображения в первый раз. Я проверил этот урок, но у меня не получилось.

Следующий код, который я использовал:

Основной код ASP.NET

public ActionResult FetchCertificate() { string filePath = Directory.GetCurrentDirectory()   "\ClientApp\src\assets\img\Certificate_BLANK.png"; var filename = System.IO.Path.GetFileName(filePath); try { if (filename == null) { return null; } using (var stream = new FileStream(filePath, FileMode.Open)) { using (Bitmap bitmap = new Bitmap(stream)) { using (Graphics graphics = Graphics.FromImage(bitmap)) { Brush brush = new SolidBrush(Color.Red); Font font = new Font("Arial", 90, FontStyle.Italic, GraphicsUnit.Pixel); SizeF textSize = new SizeF(); textSize = graphics.MeasureString("Name of User", font); Point position = new Point(bitmap.Width - ((int)textSize.Width   10), bitmap.Height - ((int)textSize.Height   10)); graphics.DrawString("Name of User", font, brush, position); using (MemoryStream memory = new MemoryStream()) { bitmap.Save(memory, ImageFormat.Png); memory.Position = 0; return File(memory.ToArray(), "image/png", filename); } } } } } catch (Exception ex) { new Logger().write(ex); } return null; } 

Код ReactJS:

  async componentDidMount() { await this.setState({ imageInBlob: this.fetchCertificate() }) } fetchCertificate = async () ={amp}gt; { let memId = { MemberID: this.state.memberId } const response = await axios({ method: 'POST', url: '/api/ImageFetch/FetchCertificate', headers: { 'Content-Type': 'application/json' }, data: {} }); const url = window.URL.createObjectURL(new Blob([response.data])); return url; } render() { return ( {amp}lt;div{amp}gt; {amp}lt;Paper{amp}gt; {amp}lt;Typography className='px-2 py-2' variant='h4'{amp}gt;Certificate{amp}lt;/Typography{amp}gt; {amp}lt;img src={this.state.imageInBlob} /{amp}gt; {amp}lt;/Paper{amp}gt; {amp}lt;/div{amp}gt; ); } 

Я использовал ядро ​​ASP.NET в качестве бэкэнда иactjs для внешнего интерфейса. Когда я запускаю код выше, я не получаю никакой ошибки, но изображение также не отображается на странице.

Кто-нибудь может подсказать мне, как я могу добавить текст к изображению во время выполнения и как я могу позволить пользователю загружать одно и то же отредактированное изображение в ядро ​​ASP.NET?