title: How to edit image in ASP.NET Core?
body: <p><strong>Use Case</strong></p>
  
  <p>I'm working on a module of <strong>Image Generation</strong> for client. When client will subscribe our service then we'll provide them a Certificate with their name and other details. I've a blank certificate and at runtime when user will log in to its account then user will get certificate when he'll go into certificate section. </p>
  
  <p>I'm not understanding how can I edit or make changes in image as I'm working on image processing for the first time. I have checked <a href="https://github.com/faisal5170/Watermark-In-Images-In-MVC-5/blob/master/AddWatermarkToImages/Controllers/HomeController.cs" rel="nofollow noreferrer">this</a> tutorial but didn't work for me.</p>
  
  <p>Following code that I have used:</p>
  
  <p><strong>ASP.NET Core Code</strong></p>
  
  <pre><code>    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;
  
      }
  </code></pre>
  
  <p><strong>ReactJS Code:</strong> </p>
  
  <pre><code>    async componentDidMount() {
                  await this.setState({
                      imageInBlob: this.fetchCertificate()
                  })
      }
  
  fetchCertificate = async () =&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 (
              &lt;div&gt;
                  &lt;Paper&gt;
                      &lt;Typography
                          className='px-2 py-2'
                          variant='h4'&gt;Certificate&lt;/Typography&gt;
  
                      &lt;img src={this.state.imageInBlob} /&gt;
                  &lt;/Paper&gt;
              &lt;/div&gt;
              );
      }
  </code></pre>
  
  <p>I have used ASP.NET core as backend and reactjs for front end. When I run above code I'll not get any error but image is also not displays on page.</p>
  
  <p>Can anyone guide me how can I add text to image at runtime and how can I allow user to download the same edited image in ASP.NET core?</p>