How to generate random pictures with Free API?
Generating random pictures for…
Struggling to find some random pictures for your website or application? You will need a Random Image Generator to supply you with unlimited pictures that best suites you needs in software development. As a developer or creator, it’s common to utilise some random words, random sentences, or even random paragraphs as the elements on their works. While all of these options are string-based, random pictures is also a good option to bring you some innovative ideas on your projects. In this article, we will provide you an in-depth view on random pictures and a guide to create the custom Random Image Generator API with step-by-step details.
What do random pictures mean in general?
Random pictures are images with the nature that is unrelated to the subject’s knowledge about or consent to the fact that photographs are being taken, and are unrelated to the subject’s permission for further usage and distribution. Generally, they are randomly chosen and picked from some of the license-free or free-to-use image/photo websites.
Use cases of random pictures
There are some scenarios that we may need random pictures to help with:
1. Brainstorming creative ideas
Sometimes we are stuck with looking for some ideas to start off a project. Get yourself some random pictures may give you different perspectives to whatever you happen to be brainstorming about. This can unleash new thoughts and visualise the new ideas you are going to work with.
2. Image Placeholder
Generating random images may be useful for anyone who needs to obtain random photos to use as placeholders for the projects you’re creating. In fact, random pictures may make your picture placeholders to be a little fun and whimsy. These photographs may add interest to any project because they aren’t your normal landscape shots. Additionally, random pictures generated by the generator are all copyright-free and permissible for commercial usage.
3. Relaxation
Simply gazing at these random photos for relaxation is another fantastic application for them. Looking at images has a calming effect on the mind, and taking plenty of odd shots can help you let go of the tensions of everyday life. Depending on your mood and what’s going on in your life, it’s always fascinating to see where a random photo will lead you. However, it’s also a great method to put all the stressful things in your life on hold.
There are in fact uncountable possibilities on how you can utilise you generated random pictures. Keep reading and explore more!
What is an API?
We all know that there are somethings we just don’t want do it manually. That’s where APIs come in. An API, or application programming interface, is a set of rules and specifications that allow two software programs to communicate with each other. Developers can build applications that work seamlessly together and make it possible for end-users to complete complex tasks with just a few clicks. By using an API, you can save yourself time and effort of having to write your own code from scratch. Let’s take a closer look at what an API is and how you can use it in your own development projects. If you want to know more about what an API is, check this link out.
For example, imagine being able to book a flight, hotel, and rental car all in one place by using just a few taps on your smartphone. This would not be possible without APIs! As the world becomes increasingly interconnected, the importance of well-designed APIs will only continue to grow.
How do I generate random images with an API?
Generator random pictures is such an easy task if you have a Random Image Generator API with you. Random Image generator API is a utility that allows users to generate random images with a defined size.
Below are some general information about the API. Make sure you read it before creating the sample Random Image Generator API with us.
Prerequisites
1. OpenAPIHub Developer Account
You need to sign up for an OpenAPIHub developer account in order to subscribe and access this API. For more information, please refer to “Register as a Developer“.
2. Active API Subscription
You need to subscribe to this API before consuming it. Many APIs come with a free trial plan so that you can experience the API functions provided free of charge. For more information, please refer to “Subscribe to APIs“.
3. API Credential
An API Key is required to access the API. It can be obtained in the Developer Admin Portal once you have completed the signup to OpenAPIHub. For more information, please refer to “Create API Key“.
Features
- Customizable image complexity
- Selection of rendering cell shape
You may check out the full API documentation here in the OpenAPIHub.
Create a sample Random Image Generator API
Below is a preview of the user interface. If you want to make it yourself, you may now setup your IDE and follow the coming guide.
Construct an easy-to-use User Interface
Try the below HTML for creating an user interface for your generator.
<div id="app">
<div class="demo-description">
<h2>Random Image Generator</h2>
<span>To protect your credentials.</span>
<br>
<span>DO NOT save this API Key in the code sandbox!!</span>
</div>
<div class="test-area">
<div class="input-area">
<span>Image Name</span>
<input
type="text"
placeholder="Cat"
v-model="image_name"
>
<br>
<span>API Key</span>
<input
type="text"
placeholder="Input your key here"
v-model="apikey"
>
<br>
<button v-on:click="generate">Generate Image</button>
</div>
<div class="output-area">
<template v-if="error">
<span v-html="error" />
</template>
<template v-else-if="!result">
Enter an image name and API Key, then press "Generate Image".
</template>
<template v-else>
<div v-html="result" />
</template>
</div>
</div>
</div>Apply CSS on the User Interface
Then, add the below CSS to beautify your UI.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
body {
background: #20262E;
padding: 20px;
font-family: 'Open Sans', sans-serif;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
height: 800px;
}
.demo-description {
text-align: center;
margin-bottom: 20px;
}
.demo-description h2 {
font-weight: semibold;
margin-bottom: 5px;
}
.demo-description span {
color: #999999;
}
.test-area {
display: flex;
}
.input-area {
text-align: right;
}
.input-area span {
display: inline-block;
line-height: 48px;
margin-right: 8px;
text-align: right;
width: 150px;
}
.input-area input {
border: 1px solid #999999;
border-radius: 3px;
height: 30px;
width: 150px;
padding: 0 7px;
}
.input-area input::placeholder {
color: #d0d0d0;
}
.input-area button {
background-color: #57abf0;
border: 0;
border-radius: 4px;
color: #ffffff;
font-weight: 600;
margin-top: 15px;
width: 166px;
padding: 15px 10px;
}
.output-area {
color: #505050;
font-size: 14px;
margin: 20px;
margin-right: 0px;
width: calc(100% - 350px);
}
@media screen and (max-width: 616px) {
.input-area {
text-align: center;
}
.input-area span {
text-align: left;
}
.output-area {
width: calc(100% - 150px);
}
.input-area button {
width: 140px;
padding: 10px 7px;
}
}
.output-area svg {
transform: scale(0.7) translateX(-30px) translateY(-95px);
}Implement the API with Vue.js
Before writing the scripts, let’s take a quick look on the parameters available in the API:
Parameters
These are the optional parameters available in the API:
| name | type | description | default |
|---|---|---|---|
complexity | number | The complexity of the image. A larger value will produce more shapes in more colors. | 16 |
cellShape | string | The primary shape used to generate the image. | square |
complexity
This parameter determines the bits length of the x and y axes randomly generated numbers.
cellShape
This parameter determines the rendering method. As each enabled position within the SVG output can be rendered independently, the API allows you to select the way it will be draw. There are five defined methods for this property:
- square (default)
- circle
- triangle
- diamond
- heart
Now, you can add the following Vue.js script for your generator.
const endpoint = 'https://trial-api-random-image-2tm1.gw.openapihub.com/academicapi/randomimage?imageName=sample';
new Vue({
el: '#app',
data() {
return {
image_name: '',
apikey: '',
result: '',
error: ''
}
},
methods: {
generate: function() {
const param = `?qrcode_url=${this.qrcode_url}`
const axiosConfig = {
headers: {
'content-type': 'application/json',
'x-openapihub-key': this.apikey
}
}
axios.get(`${endpoint}${param}`, axiosConfig)
.then(res => {
this.error = ''
this.result = unescape(res.data)
}).catch(err => {
this.error = `Error occurred -<br>${err.response.data.message}`
console.log('Error', err.response.data.message)
})
}
}
})Generate your random pictures now
Now that we have all the materials prepared. Let’s take a try on creating some random pictures with our generator!
Simply enter an image name and API Key, then press “Generate Image”. Once you enter all the required data, it will instantly generate a random picture that’s ready for download.
The output is as follows:
Conclusion
We believe you now understand more on random pictures and how to make a custom Random Image Generator API by yourself. For those who come here but are still not so sure how this random image generator will help on your work, the best way is to simply begin trying on it. Take a bit of time to play with tool will allow you to see unexpected possible opportunities that fits with your websites, applications or projects. Inspire yourself today!
Next Steps?
Just to make it even easier for you, the sample Text-to-SVG API that you just use right away is powered by OpenAPIHub. So what are you waiting for? Try out our API Now in OpenAPIHub and see how easy it is to facilitate your business, projects or work now!
OpenAPIHub is an API Platform that help you define API subscription and enable API Monetization with ease. Check the following 2-min What is OpenAPIHub video for more and try OpenAPIHub for Free!
Ready to Start Your API Journey?
Join OpenAPIHub and connect to the fast growing API Hub Community to grow your API Business today!
