B&W Background

Highlight the Moments, Fade the Rest

Comment

Inspiration

The inspiration for B&W Background came from the need to create designs where the foreground object stands out more distinctly from the background. By converting the background to black and white, users can achieve a high contrast that emphasizes their main subject, making it ideal for various design projects.

What it does

B&W Background is a Canva app that allows users to transform the background of their images into black and white. This app provides a simple and intuitive interface to upload images, adjust the intensity of the black and white effect, and then apply the changes. It’s designed to enhance your design work by making the foreground elements more prominent.

How I built it

I built B&W Background using the Canva Apps SDK and React with TypeScript. The application integrates a black and white effect feature that utilizes a TensorFlow.js model for image processing. The frontend allows users to upload images, adjust effect parameters, and apply changes directly within the Canva environment.

Key technologies used:

  • React: For building the user interface.
  • TypeScript: To ensure type safety and enhance code quality.
  • Canva Apps SDK: To integrate seamlessly with Canva's design environment.
  • TensorFlow.js: For handling image processing and applying the black and white effect.

Challenges we ran into

Image Processing Integration: Integrating TensorFlow.js for real-time image processing required optimizing performance to ensure smooth user experience.

Accomplishments that we're proud of

  • Successfully integrating TensorFlow.js to apply the black and white effect in real-time.
  • Creating an intuitive and user-friendly interface that allows users to easily adjust effect intensity.
  • Seamlessly integrating with Canva’s design environment, allowing users to directly add their processed images to their designs.

What we learned

  • Performance Optimization: We gained valuable insights into optimizing image processing tasks in a web environment for better performance and user experience.
  • User Experience Design: Designing an effective and intuitive user interface is crucial for ensuring that users can easily navigate and utilize the app’s features.
  • Integration with Third-Party APIs: We learned how to effectively integrate and work with third-party APIs and SDKs to enhance functionality and user experience.

What's next for B&W Background

In the future, we plan to:

  • Enhance Features: Add additional image effects and filters to provide users with more creative options.
  • User Feedback Integration: Incorporate user feedback to refine the app’s features and interface based on real-world usage and preferences.
  • Expand Platform Support: Explore possibilities for extending the app’s functionality to other design platforms and tools.

Built With

Share this project:

Updates