Develop Reference

Rendering with PDF.js - misprinting issue

I am working on PDF.js and trying to render a pdf on a webpage. I am facing misprinting issue when displaying pdf. You can see that some text is not printed properly
Bad display
However, when I see the pdf in Acrobat, it is displayed perfectly.
Good Display
Note* - The Pdf contains only text, no images.
I'm using very basic code to display the pdf file
var url = './highlighter_updated.pdf';
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.0;
var viewport = page.getViewport({scale});
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
Can anyone suggest what is wrong with this.
Thanks in advance.

how to take a screenshot of piece of a webpage with phantomjs?

I understand how to take screenshot of entire webpage but how about capturing the view of an specific element using phantomjs.
I'm trying as follow
var page = require('webpage').create();
page.content = page.open('https://www.google.co.in/');
page.evaluate(function() {
var canvas = document.getElementById('hplogo');
var ctx = canvas.getContext('2d');
var img = new Image();
var imgdata = document.querySelectorAll('img');
img.src = imgdata[0].src;
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 300, 300);
});
page.render('canvas.png');
phantom.exit();
Above code is not working, What 'm doing in above code is selecting the element of Google webpage img section though id then create an object of image and assign the src of query selected tag IMG and then fill the pattern, my hours of hard work did not yield any result.
WHAT I WANT: I want the screenshot of an img element rendered through 'page.open' which can be selected by query selector and output the png file. OTHER ALTERNATIVES OF PHANTOMJS ARE WELCOME.
Thanks in advance..

How to wait for the multiple images to load in the canvas and convert to base64?

I'm trying to get a base64 version of a canvas in HTML5.
Currently, the base64 image that I get from the canvas is blank.
I have found similar questions for example this one:
HTML Canvas image to Base64 problem
However, the issue that I have is that because I am adding 2 images in the canvas, I cannot use the example provided in those answers as most of them are using single image.
I understand that I have to wait until the canvas image is loaded properly before trying to get the base64 image. But I don't know how in my case.
This is my code:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.canvas.width = 1000;
context.canvas.height = 1000;
var imageObj1 = new Image();
imageObj1.src = "http://www.offthegridnews.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg";
imageObj1.onload = function() {
context.drawImage(imageObj1, 0, 180, canvas.width, canvas.height);
};
var imageObj2 = new Image();
imageObj2.src = "http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg"
imageObj2.onload = function() {
context.drawImage(imageObj2, 0, 0, canvas.width, 180);
};
// get png data url
//var pngUrl = canvas.toDataURL();
var pngUrl = canvas.toDataURL('image/png');
// get jpeg data url
var jpegUrl = canvas.toDataURL('image/jpeg');
$('#base').val(pngUrl);
<div class="contents" style="overflow-x:hidden; overflow-y:scroll;">
<div style="width:100%; height:90%;">
<canvas id="myCanvas" class="snap" style="width:100%; height:100%;" onclick="takephoto()"></canvas>
</div>
</div>
<p>
This is the base64 image
</p>
<textarea id="base">
</textarea>
and this is a working FIDDLE:
https://jsfiddle.net/3p3e6Ldu/1/
Can someone please advice on this issue?
Thanks in advance.
EDIT:
As suggested in the comments bellow, i tried to use a counter and when the counter reaches a specific number, I convert the canvas to base64.
Like so:https://jsfiddle.net/3p3e6Ldu/4/

In both your examples (the one from the question and the one from the comments), the order of commands does not really respect the async nature of the task at hand.
In your later example, you should put the if( count == 2 ) block inside the onload callbacks to make it work.
However, even then you will run into the next problem: You are loading the images from different domains. You can still draw them (either into the canvas or using an <img> tag), but you are not able to access their contents directly. Not even with the detour of using the <canvas> element.
I changed to code so it would work, if the images are hosted on the same domain. I also used a function to load the image and promises to handle the callbacks. The direct way of using callbacks and a counting variable, seem error-prone to me. If you check out the respective fiddle, you will notice the SecurityError shown. This is the result of the aforementioned problem with the Same-Origin-Policy I mentioned.
A previous question of mine in a similar direction was about how to detect, if I can still read the contents of a <canvas> after adding some images.
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.canvas.width = 1000;
context.canvas.height = 1000;
// function to retrieve an image
function loadImage(url) {
return new Promise((fulfill, reject) => {
let imageObj = new Image();
imageObj.onload = () => fulfill(imageObj);
imageObj.src = url;
});
}
// get images
Promise.all([
loadImage("http://www.offthegridnews.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg"),
loadImage("http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg"),
])
.then((images) => {
// draw images to canvas
context.drawImage(images[0], 0, 180, canvas.width, canvas.height);
context.drawImage(images[1], 0, 0, canvas.width, 180);
// export to png/jpg
const pngUrl = canvas.toDataURL('image/png');
const jpegUrl = canvas.toDataURL('image/jpeg');
// show in textarea
$('#base').val(pngUrl);
})
.catch( (e) => alert(e) );

PDF.js document is presented upside down randomly

I'm using PDF.js addon to show pdfs in my polymerjs app. From time to time pdf content is rendered upside down. Here is how I'm using PDF.js:
downloadPdf: function(item) {
var pdfJsInitParams = {
url: app.baseURL + item.report_pdf,
httpHeaders: app.user.token
};
PDFJS.getDocument(pdfJsInitParams).promise.then(function(pdf) {
function renderPage(pageNumber, eltId) {
if(pdf.numPages < pageNumber) {
return;
}
pdf.getPage(pageNumber).then(function(page) {
var scale = 1.3;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById(eltId);
if(canvas) {
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
}
}).catch(function(err) {
showToastWithText(err, 'error');
});
}
renderPage(1, 'report_1');
renderPage(2, 'report_2');
});
}
Any ideas what may causing this issue?

(Looks like downloadPdf is called multiple times in short period of time)
The render() operation is asynchronous and you need to wait for its completion before you start a new rendering on the same canvas, see https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html example. If you don't want to wait, create a new canvas.

How to access local resources using JavaScript?

I want to access the local resources/files which are stored in the web browser when are on a web site. I am trying to generate a dataURI for the images which are loaded whenever we visit a site using JS and print the same in the console log.
NOTE: The image is being downloaded from a remote server and is not stored locally.
Any suggestions/methods to accomplish this? Any method to directly gain access to the .jpeg, .png, etc from the browser resources?
Heres the code of sample website i am trying this on
<html>
<head>
<title>Image_split</title>
</head>
<body>
<h1>Splitting images within the browser</h1>
<br><hr><br>
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
<br><hr><br>
<p id="split_result"></p>
<br><hr><br>
<script src="image_split.js"></script>
</body>
Here is the JS
var image_elements = document.getElementsByTagName("img");
var i;
var count=0;
for(i=0;i<image_elements.length; i++){
count++;
}
var image = image_elements[0];
/*if(count>0){
document.getElementById("split_result").innerHTML = image_elements[0];
}*/
//The code below does not work :(
/*
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 100, 100);
document.getElementById("split_result").innerHTML = canvas.toDataURL("image/png");
*/
I want to access the image stored at image_elements[0] directly from local cache and modify the same with JS.
![link to image]https://drive.google.com/file/d/0B7UeFzC7IXYaODN0SWhGZlp2dnc/view?usp=sharing
Thanks :)

Heres the solution code to access images from web browser resources without getting 'HTMLCanvasElement': Tainted canvases may not be exported.'
var image_elements = document.getElementsByTagName("img");
var i;
var count=0;
for(i=0;i<image_elements.length; i++){
count++;
}
var image = image_elements[0];
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt){
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
//canvas.getContext("2d").drawImage(image, 0, 0);
var dataModel = canvas.getContext("2d").getImageData(0, 0, image.width, image.height);
document.getElementById("split_result").innerHTML = dataModel.data.byteLength;
}