FREE Script Code to Convert Images
FREE Script Code to Convert Images-If you’re looking for a straightforward way to convert images without spending a dime on expensive software, you’re in the right place! In this post, I’ll share a FREE script code that allows you to convert images effortlessly. Whether you want to change image formats, optimize file sizes, or automate conversions, this script has you covered!
How It Works
The beauty of this image converter is its simplicity. You just need to copy and paste the provided code into your website. It’s designed to be user-friendly and efficient, making it suitable for developers, designers, and casual users alike.
Let’s dive into how the script operates:
- Choose the file you want to convert.
- Select the desired output format from a variety of options.
- Click the convert button, and voilà! Your file is ready for download.
Supported Formats
This script supports a wide range of formats, including:
- JPG
- PNG
- WEBP
- GIF
- SVG
- RAW
- And more!
You can easily convert from one format to another, ensuring flexibility in your image processing needs.
Step-by-Step Guide to Implementing the Script
Now that you understand how the converter works, let’s go through the process of implementing the script on your site.
1. Copy the Code
First, you’ll need to grab the code snippet. You can find it on my website by following the link in the description. Just copy the entire code provided.
2. Setting It Up on Your Website
Next, head over to your WordPress dashboard:
- Go to Pages and click on Add New.
- Paste the code into the custom HTML section.
- Publish the page!
Main Page Code
<!--[ All in One Image Converter ]-->
<a class="flex op" href="https://contentvibee.com/all-in-one-image-converter/" rel="nofollow noopener" target="_blank">
<svg class='line' viewBox='0 0 24 24'>
<path d='M12 2V9L14 7'></path>
<path d='M12 9L10 7'></path>
<path d='M1.97998 13H6.38998C6.76998 13 7.10998 13.21 7.27998 13.55L8.44998 15.89C8.78998 16.57 9.47998 17 10.24 17H13.77C14.53 17 15.22 16.57 15.56 15.89L16.73 13.55C16.9 13.21 17.25 13 17.62 13H21.98'></path>
<path d='M7 4.12988C3.46 4.64988 2 6.72988 2 10.9999V14.9999C2 19.9999 4 21.9999 9 21.9999H15C20 21.9999 22 19.9999 22 14.9999V10.9999C22 6.72988 20.54 4.64988 17 4.12988'></path>
</svg>
<span class="t flex column" data-text="v7.2">All in One Image Converter</span>
<span class="d" data-text="You can convert any image you want with few seconds.">
<span class="i i16">
<svg class="line" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="16" y2="12"></line>
<line x1="12" x2="12.01" y1="8" y2="8"></line>
</svg>
</span>
</span>
</a>Tool Code
</h1>
<div class='pInr'>
<div class='pEnt' id='postID-7406762118639496714'>
<div class='pS post-body postBody' id='postBody'>
<div class="main section" id="main" name="Main Recent Posts">
<div class="widget Blog" data-version="2" id="Blog1">
<div class="blog-posts hfeed container item-post-wrap">
<div class="post-body entry-content" id="postBody">
<!--DOCTYPE html-->
<meta charset="UTF-8">
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<input type="file" id="imageInput">
<br>
<br>
<canvas id="imageCanvas"></canvas>
<section>
<label>
<h4>Choose Format</h4>
</label>
<div class="radio-container">
<div class="radio-line">
<input type="radio" name="format" value="avif" id="avif" checked="">
<label for="avif">AVIF</label>
<input type="radio" name="format" value="azw3" id="azw3">
<label for="azw3">AZW3</label>
<input type="radio" name="format" value="bmp" id="bmp">
<label for="bmp">BMP</label>
<input type="radio" name="format" value="cr2" id="cr2">
<label for="cr2">CR2</label>
<input type="radio" name="format" value="cr3" id="cr3">
<label for="cr3">CR3</label>
<input type="radio" name="format" value="crw" id="crw">
<label for="crw">CRW</label>
<input type="radio" name="format" value="dcr" id="dcr">
<label for="dcr">DCR</label>
<input type="radio" name="format" value="eps" id="eps">
<label for="eps">EPS</label>
<input type="radio" name="format" value="epub" id="epub">
<label for="epub">EPUB</label>
<input type="radio" name="format" value="gif" id="gif">
<label for="gif">GIF</label>
<input type="radio" name="format" value="heic" id="heic">
<label for="heic">HEIC</label>
<input type="radio" name="format" value="heif" id="heif">
<label for="heif">HEIF</label>
<input type="radio" name="format" value="ico" id="ico">
<label for="ico">ICO</label>
<input type="radio" name="format" value="jpe" id="jpe">
<label for="jpe">JPE</label>
<input type="radio" name="format" value="jpeg" id="jpeg">
<label for="jpeg">JPEG</label>
<input type="radio" name="format" value="jpg" id="jpg">
<label for="jpg">JPG</label>
<input type="radio" name="format" value="mef" id="mef">
<label for="mef">MEF</label>
<input type="radio" name="format" value="mobi" id="mobi">
<label for="mobi">MOBI</label>
<input type="radio" name="format" value="nef" id="nef">
<label for="nef">NEF</label>
<input type="radio" name="format" value="nrw" id="nrw">
<label for="nrw">NRW</label>
<input type="radio" name="format" value="orf" id="orf">
<label for="orf">ORF</label>
<input type="radio" name="format" value="pdb" id="pdb">
<label for="pdb">PDB</label>
<input type="radio" name="format" value="pix" id="pix">
<label for="pix">PIX</label>
<input type="radio" name="format" value="pict" id="pict">
<label for="pict">PICT</label>
<input type="radio" name="format" value="png" id="png">
<label for="png">PNG</label>
<input type="radio" name="format" value="ppm" id="ppm">
<label for="ppm">PPM</label>
<input type="radio" name="format" value="ps" id="ps">
<label for="ps">PS</label>
<input type="radio" name="format" value="psd" id="psd">
<label for="psd">PSD</label>
<input type="radio" name="format" value="raw" id="raw">
<label for="raw">RAW</label>
<input type="radio" name="format" value="sfw" id="sfw">
<label for="sfw">SFW</label>
<input type="radio" name="format" value="sr2" id="sr2">
<label for="sr2">SR2</label>
<input type="radio" name="format" value="svg" id="svg">
<label for="svg">SVG</label>
<input type="radio" name="format" value="tcr" id="tcr">
<label for="tcr">TCR</label>
<input type="radio" name="format" value="tga" id="tga">
<label for="tga">TGA</label>
<input type="radio" name="format" value="tiff" id="tiff">
<label for="tiff">TIFF</label>
<input type="radio" name="format" value="tif" id="tif">
<label for="tif">TIF</label>
<input type="radio" name="format" value="txt" id="txt">
<label for="txt">TXT</label>
<input type="radio" name="format" value="wbmp" id="wbmp">
<label for="wbmp">WBMP</label>
<input type="radio" name="format" value="webp" id="webp">
<label for="webp">WEBP</label>
<input type="radio" name="format" value="xcf" id="xcf">
<label for="xcf">XCF</label>
<input type="radio" name="format" value="xps" id="xps">
<label for="xps">XPS</label>
</div>
</div>
</section>
<button id="convertButton">Convert &Download</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<script>
// Get DOM elements
const imageInput = document.getElementById('imageInput');
const imageCanvas = document.getElementById('imageCanvas');
const convertButton = document.getElementById('convertButton');
const formatRadios = document.getElementsByName('format');
// Add event listener to file input
imageInput.addEventListener('change', (event)=>{
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (loadEvent)=>{
const img = new Image();
img.src = loadEvent.target.result;
img.onload = ()=>{
// Draw image on canvas
const ctx = imageCanvas.getContext('2d');
imageCanvas.width = img.width;
imageCanvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
;
}
;
reader.readAsDataURL(file);
}
);
// Add event listener to convert button
convertButton.addEventListener('click', ()=>{
const format = document.querySelector('input[name="format"]:checked').value;
const downloadLink = document.createElement('a');
downloadLink.href = imageCanvas.toDataURL(`image/${format}`);
downloadLink.download = `image.${format}`;
downloadLink.click();
}
);
// Add event listeners to radio buttons
formatRadios.forEach((radio)=>{
radio.addEventListener('change', ()=>{
// Update canvas image if format is changed
const ctx = imageCanvas.getContext('2d');
const img = new Image();
img.src = imageCanvas.toDataURL();
img.onload = ()=>{
ctx.drawImage(img, 0, 0);
}
;
}
);
}
);
</script>
<style>
input[type=file]::file-selector-button {
display: inline-block;
padding: 0.7rem 0.7rem;
font-size: 0.9rem;
font-weight: bold;
color: #fff;
text-align: center;
text-transform: normal;
background-color: #0088FF;
border-radius: 0px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
border: 0px solid #fff;
width: 100%;
}
input[type=file]::file-selector-button:hover {
background-color: #5b52d6;
}
input[type=file]::file-selector-button:active {
background-color: #4a41ad;
}
input[type=file]::file-selector-button:focus {
outline: none;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6c63ff;
}
input[type=file]::file-selector-button::before {
content: "Select File";
}
input[type=file]::file-selector-button::before, input[type=file]::file-selector-button::before {
content: "\2193 Browse Files";
}
input[type="file"] {
display: yes;
}
canvas, #image-container, .img, #img, image, .image, #image, #convertedImage, #preview-image {
border: 3px solid;
border-image: linear-gradient(to bottom, #007bff, #FF7F50, #8B008B);
border-image-slice: 1;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
margin-top: 10px;
margin-bottom: 10px;
width: 50%;
margin: 0 auto;
padding: 15px;
}
body {
text-align: center
}
/* Button Styles */
button, .button, #button, btn, .btn, #btn, downloadlink, #download-button, #button-copy, button-copy, copy-button, #copy-button, #copy, copy, #download-html-button, download-link,[type="submit"], [type="reset"], [type=button], #downloadLink {
display: inline-block;
cursor: pointer;
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
text-align: center;
border-radius: 0px;
background: #0088FF;
border: 0px solid #fff;
transition: all 0.3s ease;
margin: 0 auto;
margin-top: 11px;
margin-bottom: 11px;
}
/* Button Hover State */
button:hover {
background-image: linear-gradient(to right, #FF1493, #FF1493);
border: 0px solid #ffffff;
}
/* CSS for radio buttons */
.radio-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
margin-top: 20px;
margin-left: 8px;
}
.radio-line {
display: flex;
flex-wrap: wrap;
margin-right: 30px;
margin-bottom: 5px;
}
.radio-line:last-child {
margin-right: 0;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
display: inline-block;
padding: 7px 10px;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 0px;
cursor: pointer;
background-color: #55555e;
color: #fff;
transition: background-color 0.2s;
}
input[type="radio"]:checked + label {
background-color: #007bff;
color: #fff;
}
section {
margin-top: 20px;
max-width: 100%;
background-color: #fff;
border: 1px solid #ddd;
padding: 5px;
}
</style>
</div>3. Customizing the Code
If you want to personalize the converter’s appearance, you can easily modify the CSS styles within the code. This allows you to match the tool with your website’s design.
4. Testing the Converter
Once everything is set up, test the converter by uploading an image and selecting a format to convert to. It’s as simple as that!
Why Use This FREE Script Code?
This script is not only free, but it’s also lightweight and fast. Here are some key benefits:
- No need for external APIs or software installations.
- Works on any device with a web browser.
- Lightweight processing ensures quick conversions.
- Optimizes image quality and size effortlessly.
Additional Tips for Image Optimization
To make the most out of your image conversions, consider these tips:
- Use the appropriate format for your needs; JPG for photos, PNG for graphics with transparency.
- Always check the quality of the converted image to ensure it meets your standards.
- Regularly update your script code to include the latest formats and optimizations.
Conclusion
With this FREE Script Code to Convert Images, you can easily manage your image formats without spending a cent. Just copy, paste, and you’re ready to go!
Feel free to drop a comment if you have any questions or need further assistance. Don’t forget to check out ContentVibee for more amazing free tools, blogs, and tips to enhance your content creation journey!
Happy converting!
FAQs
What formats can I convert using this script?
This script supports a wide range of formats including:
- JPG
- PNG
- WEBP
- GIF
- SVG
- RAW
- And more!
How do I set up the script on my website?
To set up the script, follow these steps:
- Copy the code snippet from the provided link.
- Go to your WordPress dashboard, navigate to Pages, and click Add New.
- Paste the code into the custom HTML section and publish the page.
Can I customize the appearance of the converter?
Yes, you can customize the appearance by modifying the CSS styles within the code to match your website’s design.
Is there a cost associated with using this script?
No, this script is completely free to use, allowing you to convert images without any cost.
How can I ensure the quality of the converted images?
Always check the quality of the converted image to ensure it meets your standards and consider using the appropriate format for your needs.
For best Youtube service to grow faster vidiq:- Click Me
for best cheap but feature rich hosting hostingial:- Click Me
The best earn money ai tool gravity write:- Click Me
Use this tool to boost your website seo for free :- Click Me
Get Free Tools to Boost Productivity!
Explore our collection of free tools to help you work smarter and achieve more.
Access Free Tools