Hey guys, today I am showing you how to convert a single page pdf to png image with background transparent. It will give you the privilege to change the color of the entire text of that image. Believe me, it is not very difficult. With some simple steps, we can achieve this. Okay, let’s get started.
The first step is, we have to create a simple Html page and add pdf.js CDN script to the header. I have taken from “https://cdn.jsdelivr.net”. You can take from other sources, doesn’t matter.
Any name you can give to that Html file.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<script src=”https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/build/pdf.min.js”></script>
<title>pdf to png transparent</title>
</head>
<body style=”background-color: rgb(172, 218, 236);”>
<div>
<input type=”file” name=”p” id=”p”>
<input type=”button” value=”Blue” onclick=”pdfToPng(‘blue’)” style=”background-color: blue;”>
<input type=”button” value=”Pink” onclick=”pdfToPng(‘pink’)” style=”background-color: pink;”>
<input type=”button” value=”Red” onclick=”pdfToPng(‘red’)” style=”background-color: red;”>
</div>
<canvas id=”canvas”></canvas>
</body>
</html>
Here, in the body tag, I have taken one file input field(for pdf), three buttons for changing colors (after selecting the pdf file) and one canvas with id ‘canvas’. I choose the body background color RGB(172, 218, 236). You can choose a different color as per your needs.
Now, our next task is to add pdfToPng() function in our script tag.
function pdfToPng(text_color) {
var pdf = document.getElementById('p');
if (file = document.getElementById('p').files[0]) {
fileReader = new FileReader();
fileReader.onload = function(ev) { pdfjsLib.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var task = page.render({
canvasContext: context,
viewport: viewport
})
task.promise.then(function() {
let iimg = canvas.toDataURL('image/png');
changeColor(iimg, text_color)
});
});
}, function(error) {
console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
The purpose of this function is to convert the pdf file into a png image file. The main thing is we just have to pass the file into the pdfjsLib.getDocument() function. After that when we call the pdf.getPage() function with parameter 1(page number), it gives us the privilege to set the page into to canvas element. After rendering the canvas we have converted the canvas element into the png image with base64 format using toDataURL() function and passed that image into changeColor() function.
function changeColor(image_data, text_color) {
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let image = new Image()
image.onload = function() {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
let pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height)
for (let i = 0; i < pixelData.data.length; i += 4) {
let setPixel = {
r: pixelData.data[i],
g: pixelData.data[i + 1],
b: pixelData.data[i + 2],
a: pixelData.data[i + 3]
}
//making all white background transparent(rgba(0,0,0,0))
if ((setPixel.r == 255) && (setPixel.g == 255) && (setPixel.b == 255)) {
pixelData.data[i] = 0
pixelData.data[i + 1] = 0
pixelData.data[i + 2] = 0
pixelData.data[i + 3] = 0
} else {
//for red
if (text_color == 'red') {
pixelData.data[i] = 255
pixelData.data[i + 1] = 0
pixelData.data[i + 2] = 0
}
//for blue
else if (text_color == 'blue') {
pixelData.data[i] = 0
pixelData.data[i + 1] = 0
pixelData.data[i + 2] = 255
}
//for pink
else if (text_color == 'pink') {
pixelData.data[i] = 255
pixelData.data[i + 1] = 20
pixelData.data[i + 2] = 147
}
}
}
ctx.putImageData(pixelData, 0, 0)
}
image.src = image_data
}
The sole purpose of this function is to change the text color of that image and make the background transparent. Here we draw that image into the canvas element using drawImage() function and took every image pixel and functionally changed the pixel color with RGB value using getImageData() function. After manipulating colors we put that image with the help of putImageData() function.
Now, we have to generate the png base64 with the help of getPng() function.
function getPng() {
let canvas = document.getElementById(‘cancas’);
return canvas.toDataUrl();
}
You can call this getPng() function as per your requirement. It will return the base64 image.
That’s it, we have all done. Now run the Html page into your browser, choose a single page pdf and change the three-color clicking that three buttons named red, pink and blue. You can set any color with the hex code or RGB value in this changeColor() function.
Hope It will help you a little.. thanks.
Web Developer at Openweb Solutions
