I have a pdf with 4 pages, each of the page has a transparent background. I use pdf.js to display them, but I would like to display them with a transparent background on my html page but I can't figure out how I could do that, there is always a white background :
I think it is possible according to this issue, but when I change the line page.render(renderContext); to page.render({renderContext, viewport, backgroundColor: 'rgba(0,0,0,0)' }); (as it said in the issue) I have the following error :
Any idea on how I could manage that ?
I use pdf.js version v1.9.426 and Firefox 55.0.2 (64 bits).
EDIT :
With the following code I have no error in the console but the background of my pdf file is still white. (However, If open the pdf with for example photoshop there is no background)
Link to the PDF file I use : tempPDF.pdf
Here is my javascript file to display the four pages :
var pdfFile;
PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
pdfFile = pdf;
for(var i = 1; i <= 5; i++) {
var canvas = document.getElementById('canvas'+i);
var context = canvas.getContext('2d');
PDFJS.disableStream = true;
openPage(pdf, i, context, 50);
}
});
function openPage(pdfFile, pageNumber, context, ratio) {
var scale = 10;
pdfFile.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
// reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = ratio+"%";
canvas.style.height = ratio+"%";
var renderContext = {
canvasContext: context
, viewport: viewport
};
page.render({canvasContext: context, viewport: viewport, backgroundColor: 'rgba(0,0,0,0)' });
//page.render(renderContext);
});
}
And my html page in case that could be useful :
<!DOCTYPE html>
<html>
<body
style="background-color:powderblue;">
</body>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="PDF Viewer" />
<title>My page</title>
</head>
<body>
<form action="pdf_latex_test.php">
<input type="submit" value="execute" /> </form>
</body>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<canvas id="canvas3" width="300" height="300"></canvas>
<canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>
The change and API documentation shows that property name must be background:
var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
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,
// Use transparent background!
background: 'rgba(0,0,0,0)',
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
#the-canvas {
border:1px solid black;
background-image: url(http://image.blingee.com/images19/content/output/000/000/000/7c8/805674825_1628628.gif?6);
}
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<canvas id="the-canvas"></canvas>
Related
Dear StackOverflow community,
I'm currently working on a project. My goal is to color individual pixels in a zoomed in canvas.
However when I used:
canvas.body.style.width = '600px';
canvas.body.style.height= '300px';
my functions stopped working.
Here is my JavaScript code:
<!DOCTYPE html>
<html>
<meta charset='UTF-8'>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:3px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var mouseDown = 0;
function mouseDownFunction() {
++mouseDown;
}
function mouseUpFunction() {
--mouseDown;
}
function mouseMoveFunction(e) {
var posX = e.clientX;
var posY = e.clientY;
ctx.fillRect(posX - 10, posY - 10, 100, 100);
}
c.addEventListener("mousedown", function(e){
mouseDownFunction();
this.addEventListener("mousemove", mouseMoveFunction);
});
c.addEventListener("mouseup", function(e){
mouseUpFunction();
this.removeEventListener("mousemove", mouseMoveFunction);
});
c.addEventListener("click", mouseMoveFunction);
c.addEventListener("mouseout",function(e){
this.removeEventListener("mousemove", mouseMoveFunction);
});
c.addEventListener("mouseenter",function(e){
if (mouseDown == 1) {
this.addEventListener("mousemove", mouseMoveFunction);
}});
</script>
</body>
</html>
What's the best practice to zoom in and out of my canvas to allow easy access to individual pixels?
Thanks in advance for your time.
Sincerely,
JavaIsMyBae
I would like to display in a html page 4 canvas and each of them correspond to a page of a pdf file.
I succeed to display 1 page in 1 canvas, but when I want to display the 4 it doesn't work : none of the pages are displayed.
What I'm doing wrong ?
EDIT :
I tried to solve the problem of the promise (I edited my code) but now I got another error : Error: Invalid page request pdf.js:2687:31 and here is the corresponding code (2697 is the line of the return) :
getPage: function WorkerTransport_getPage(pageNumber, capability) {
if (pageNumber <= 0 || pageNumber > this.numPages ||
(pageNumber|0) !== pageNumber) {
return Promise.reject(new Error('Invalid page request'));
}
Here is my code :
html file :
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="PDF Viewer"/>
<title>My page</title>
</head>
<body>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<canvas id="canvas3" width="300" height="300"></canvas>
<canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>
Javascript file (pdf.latex.main.js) :
PDFJS.disableStream = true;
var pdfFile;
PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
pdfFile = pdf;
for(var i = 1; i < 4; i++) {
var canvas = document.getElementById('canvas'+i);
var context = canvas.getContext('2d');
PDFJS.disableStream = true;
openPage(pdf, i, context);
}
});
function openPage(pdfFile, pageNumber, context) {
var scale = 5;
pdfFile.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
// reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "100%";
canvas.style.height = "100%";
wrapper.style.width = Math.floor(viewport.width / scale) + 'pt';
wrapper.style.height = Math.floor(viewport.height / scale) + 'pt';
var renderContext = {
canvasContext: context
, viewport: viewport
};
page.render(renderContext);
});
}
You are using promises, so all your calls to the function in .then branch are done after your for loop is finished, i.e. with i equal to 3 (last iteration value). As a result, you're filling the same canvas 3 times. By the way, take a look at your for loop. It loops only 3 times. You may want to change loop condition to i<=4.
You should call PDFJS.getDocument before the loop, and call this loop from within promise.
I finally solved it, here is the solution :
pdf.latex.main.js
var pdfFile;
PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
pdfFile = pdf;
for(var i = 1; i <= 4; i++) {
var canvas = document.getElementById('canvas'+i);
var context = canvas.getContext('2d');
PDFJS.disableStream = true;
openPage(pdf, i, context);
}
});
function openPage(pdfFile, pageNumber, context) {
var scale = 5;
pdfFile.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
// reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "50%";
canvas.style.height = "50%";
var renderContext = {
canvasContext: context
, viewport: viewport
};
page.render(renderContext);
});
}
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="PDF Viewer" />
<title>My page</title>
</head>
<body>
<form action="pdf_latex_test.php">
<input type="submit" value="execute" /> </form>
</body>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<canvas id="canvas3" width="300" height="300"></canvas>
<canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>
hi i am trying to draw image with a button in canvas. But i can not draw in the clear canvas. so;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<input type="button" id="b1" value="ciz">
<canvas id="canvas" height="300" width="600" style="border: solid;background-color: brown; " >Eski Sürüm Tarayıcı . </canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var b1 =document.getElementById("b1");
var image = new Image(60, 45); // using optional size for image
var kontrol;
image.src = '/pika.png'; //it is in my pc
image.onload = function(){ // i don't want draw the image on load
kontrol=true;}
b1.onclick=function(){ // i want draw with button
if(kontrol=true){
ctx.drawImage(image, 0, 0);
}
}
</script>
</body>
</html>
when i try with image on load function it is working but i want draw with the button
No problem i get it. thanks...
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var b1 =document.getElementById("b1");
var image = new Image(60, 45);
b1.onclick=function(){
image.src = 'https://i.hizliresim.com/nWdGrR.png';
image.onload = function(){
ctx.drawImage(image, 0, 0);
}
}
If pika.png is located in same directory as your html file then just remove the forward slash before your image's name: image.src = 'pika.png';
I have recently written a script to upload images. Everything works well. But now I want to resize the image after uploading it. I have done some research on it and I want to try it with the <canvas> element. I have parts of the script, others are missing and I don't know how to connect everything.
These are the steps:
Upload the image into img/uploads - Done.
<form action="picupload.php" method="post" enctype="multipart/form-data">
<input name="uploadfile" type="file" accept="image/jpeg, image/png">
<input type="submit" name="btn[upload]">
</form>
picupload.php:
$tmp_name = $_FILES['uploadfile']['tmp_name'];
$uploaded = is_uploaded_file($tmp_name);
$upload_dir = "img/uploads";
$savename = "[several code]";
if($uploaded == 1)
{
move_uploaded_file (
$_FILES['uploadfile']['tmp_name'] ,
"$upload_dir/$savename");
}
Put the image into a canvas element - Missing
Resize it - Part of the code I want to use somehow:
var MAX_WIDTH = 400;
var MAX_HEIGHT = 300;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
Replace the existing image with the new resized one. - Missing
It would be very nice if someone would give me some tips to complete it - Thank you!
(#2-3) Resizing the source image onto a canvas
Calculate the scaling factor required to fit MAX dimensions without overflow
Create a new canvas with the scaled dimensions
Scale the original image and draw it onto the canvas
Important! Be sure the source image is coming from the same domain as your web page or else toDataURL will fail for security reasons.
(#4) You can convert the canvas from #3 to an image with resizedImg.src=context.toDataURL
Example annotated code and a Demo:
var MAX_WIDTH = 400;
var MAX_HEIGHT = 300;
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg";
function start(){
var canvas=fitImageOntoCanvas(img,MAX_WIDTH,MAX_HEIGHT);
// #4
// convert the canvas to an img
var imgResized=new Image();
imgResized.onload=function(){
// Use the new imgResized as you desire
// For this demo, just add resized img to page
document.body.appendChild(imgResized);
}
imgResized.src=canvas.toDataURL();
}
// #3
function fitImageOntoCanvas(img,MAX_WIDTH,MAX_HEIGHT){
// calculate the scaling factor to resize new image to
// fit MAX dimensions without overflow
var scalingFactor=Math.min((MAX_WIDTH/img.width),(MAX_HEIGHT/img.height))
// calc the resized img dimensions
var iw=img.width*scalingFactor;
var ih=img.height*scalingFactor;
// create a new canvas
var c=document.createElement('canvas');
var ctx=c.getContext('2d');
// resize the canvas to the new dimensions
c.width=iw;
c.height=ih;
// scale & draw the image onto the canvas
ctx.drawImage(img,0,0,iw,ih);
// return the new canvas with the resized image
return(c);
}
body{ background-color:white; }
img{border:1px solid red;}
I would recommend using ajax for upload, since when you upload you redirect to the php page.
But the example I didn't use it either
References:
http://stackoverflow.com/questions/12368910/html-display-image-after-selecting-filename
http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded
http://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas
http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element
http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing
Here is what I have for html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
</style>
<title>Something</title>
</head>
<body>
<form action="picupload.php" method="post" enctype="multipart/form-data">
<input name="uploadfile" type="file" accept="image/jpeg, image/png">
<input type="submit">
</form>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
</script>
</html>
For PHP I used a different way for file upload (for instance I store the picture in localhost/):
<?php
if(isset($_FILES['uploadfile']['name'])){
$nameFile=$_FILES['uploadfile']['name'];
$pathFile = "C:/inetpub/wwwroot/" . $_FILES['uploadfile']['name'];
$file_tmp2=$_FILES['uploadfile']['tmp_name'];
move_uploaded_file($file_tmp2, $pathFile);
}
echo ("
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
<meta charset='utf-8'>
<style>
</style>
<title>Something</title>
</head>
<body>
<canvas id='viewport' ></canvas>
<button onclick='change()'>change</button>
</body>
<script>
var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.src = '").$_FILES['uploadfile']['name'];
echo("';
base_image.onload = function(){
context.drawImage(base_image, 100, 100);
}
}
function change(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(base_image, 0, 0, 400 ,300);
}
</script>")
?>
I got a problem with converting PNG image to webp format. The background turns black instead of remaining transparent.
How can I fix this?
var img = document.querySelector('#sample');
var webp = document.querySelector('#webp');
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
webp.src = canvas.toDataURL('image/webp');
};
img.src = 'data:image/png;base64,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';
<img id="sample">
<img id="webp">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="data:image/png;base64,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";
setTimeout(function(){cxt.drawImage(img,0,0);},2000);
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
this is my test with your picture,so I think there is no problem in your code.