I want to generate some pdf page previews from a pdf in a html page. Those previews are generated correctly but not in the same order as pdf`s pages.
My code is :
var PDF_FILES_DIRECTORY = "",
PDF_FILES = ['pdf2.pdf'];
var CURRENT_FILE = {};
$.each(PDF_FILES, function (index, pdf_file) {
PDFJS.getDocument(PDF_FILES_DIRECTORY + pdf_file).then(function (pdf) {
for(idxPage = 1 ; idxPage < pdf.numPages ; idxPage++) {
pdf.getPage(idxPage).then(function (page) {
var viewport = page.getViewport(1);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext).then(function () {
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var img_src = canvas.toDataURL();
var $img = $("<img>").attr("src", img_src);
var $thumb = $("<div>")
.attr("class", "thumb")
.append($img);
$thumb.appendTo("#thumbnail");
canvas.remove();
});
}); // end of getPage
}
}); // end of getDocument
}); // end of each
Thanks.
Related
I try to render diagram from xml to svg,then svg to draw in canvas and save at the computer.
Canvas.toDataUrl() SecurityError in ie 11,but for google chrome is fine.
How did resolve this problem
It the same with this ,but it not help me
this my file for rendering diagram
Please,help me.
I have this function
$('#exportBtn').click(function () {
var object = new Object();
object.xml=xml;
render(object)
var svg = document.querySelector("svg");
var img = document.createElement("img");
var canvas = document.createElement("canvas");
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width * 3;
canvas.height = svgSize.height * 3;
canvas.style.width = svgSize.width;
canvas.style.height = svgSize.height;
var svgData = new XMLSerializer().serializeToString(svg);
var svg64 = btoa(svgData);
var b64Start = 'data:image/svg+xml;base64,';
var image64 = b64Start + svg64;
img.onload = function () {
var ctx = canvas.getContext("2d");
ctx.scale(3, 3);
var x0 = Math.floor(0);
var y0 = Math.floor(0);
ctx.translate(-x0, -y0);
var bg = graph.background;
if (bg == null || bg == '' || bg == mxConstants.NONE) {
bg = '#ffffff';
}
ctx.save();
ctx.fillStyle = bg;
ctx.fillRect(x0, y0, Math.ceil(svgSize.width * 3), Math.ceil(svgSize.height * 3));
ctx.restore();
ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
var canvasdata = canvas.toDataURL("image/png", 1);
var a = document.createElement("a");
a.download = "download_img" + ".png";
a.href = canvasdata;
document.body.appendChild(a);
a.click();
};
img.src = image64;
}
);
this my error
How to render HTML element and SVG with html2canvas? It's not working.
My code:
$(function() {
window.takeScreenShot = function() {
html2canvas($('#centerpanel'), {
onrendered: function(canvas) {
var svg = document.getElementById("centerpanel");
var serializer = new XMLSerializer();
var ser = serializer.serializeToString(svg);
var context = canvas.getContext('2d');
context.fillStyle = '#8cb4cd';
context.font = '200px sans-serif';
context.globalCompositeOperation = 'lighter';
x = 150;
y = 100;
context.translate(x, y);
context.rotate(-Math.PI / 4.5);
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('123456', 300, 480);
context.restore();
var base64image = canvas.toDataURL("image/png");
console.log(base64image);
var image = new Image();
image.src = base64image;
var w = window.open("");
w.document.write(image.outerHTML + ser);
},
});
}
});
The above code shows both HTML and SVG, but the result is not valid as shown in Figure 1. But I want the results shown in Figure 2.
How do I edit the code to display the desired effect?
Figure 1
Figure 2
I want to get image data using toDataURL().but my Imagedraw() method is not working.
var video = document.getElementById('media-video');
var videoCurrentTime = document.getElementById('media-video').currentTime;
var canvasWidth = $('video').width();
var canvasHeight = $('video').height();
var c = $('body').append($('<canvas>',{id: 'myCanvas', width:canvasWidth, height:canvasHeight}));
var ctx;
$(document).ready(function() {
c = document.getElementById('myCanvas');
ctx = c.getContext("2d");
});
c.onload=function(){
ctx.drawImage(video, 0, 0,canvasWidth , canvasHeight);
}
imageData = c.toDataURL("image/jpeg",1.0);
window.open(imageData, "toDataURL() image", "width=600, height=200");
}
I could see a blank canvas returned in imageData.
Becouse c.onload= is acyns. You most get toDataURL after onload.
c.onload=function(){
ctx.drawImage(video, 0, 0,canvasWidth , canvasHeight);
imageData = this.toDataURL("image/jpeg",1.0);
window.open(imageData, "toDataURL() image", "width=600, height=200");
}
I tried with phantomjs 2.1.1 this code :
var webPage = require('webpage');
var page = webPage.create();
page.open("http://google.com", function (status){
var out = page.evaluate(function(){
var image = new Image();
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwLDiAQSszC7gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACAElEQVRYw+2WMYvbQBBGv5ndFegsdC6cTkWKFIEcpDkCqfLz3aQx5KqQ5lAXHRhHurW12pkUJsThDhLJyAlhXyWJWfHYmdkdIJFIJBKJRCIxJ3T+L8qT591f1yqBElgCqzxfGAOgi7HxfgvszvabqFUBlXNv8rxiXhmTEwHwqk2Mtcid93UI9RladprT26K4tfa1c5W1C2YHAAhAJ1IPQ8X8cRjQtvXFtI5OH7LsJssqYwoiR8QAAAGWRNfM18Ys+h5FMdnMjq2nyrlba2+y7KW1BWDpZxkYwBBZwFoLoBN5cG4XwoQ6M6OiXwDvi+Jdlr1yriQ6OtEJAJjIAhmRAi1RfThM0OJR0UugYq6sLU6cfukgIgCWqCCqrK2Yl5OSyKMyuMrzlTELZvec06mZI1owr4xZ5Xk5924tjMmJ3B8sY8ABOdHxSJtX62KM0+pi9KoBkN9FChAAr9rFOK/WDmi8b2LsRIIqAFV9Gnb8GFQ7kSbGxvvZO3EL1CL1MLSqw3Nmx9dBtVWth6EW2U5K4vh6FFkaUxpzxWwBftKMg2oL3Me46fv142Mtcphb6wBARKy9AjKijIiPx+mPeupVd6r3MX7q+3UIn/f7r5fZrR3g+35vjIooQEQB6FW96jfVB5EvIWz6fh3C5oyr+h8dbP6vMXDuoTmRSCQSiURiPN8BXZXzZJhVHqQAAAAASUVORK5CYII=";
var x = 0, y = 0;
image.width = 50;
image.height = 50;
var canvas = document.createElement('canvas');
canvas.id = "mycanvas";
canvas.width = 50;
canvas.height = 50;
var context = canvas.getContext("2d");
document.body.appendChild(canvas);
context.drawImage(
image,
x,
y,
canvas.width,
canvas.height,
0,
0,
image.width,
image.height
);
var imageData = context.getImageData(x, y, canvas.width, canvas.height);
var data = imageData.data;
var pix = 0;
var text = "";
// iterate over all rgba values of each pixels
for (var i = 0; i < data.length; i += 4) {
pix++;
red = data[i];
green = data[i+1];
blue = data[i+2];
alpha = data[i+3];
text += "pix " + pix + " red="+red+" green="+green+" blue="+blue+" alpha="+alpha+"\n";
}
return text;
});
console.log("out"+out);
phantom.exit();
});
The script should print the rgba values of this image, but all are rgba(0,0,0,0).
If you copy paste the evaluate part in chrome dev tools Version 55.0.2883.75 64-bit or firefox 50.0.2 (by example), you will see and values != rgba(0,0,0,0) from within the console.
So in casperjs, I can't get rgba values too. Anyone knows another way to get this rgba values and modify those from a base64 image ? If possible in vanilla javascript
Bug report : https://github.com/ariya/phantomjs/issues/14692
Found a workaround : need to create the image element before in another evaluate() :
var casper = require("casper").create();
casper.start();
casper.on('remote.message', function(message) {
console.log(message);
});
// first evaluate() to create the image
casper.thenEvaluate(function() {
// create original image to be copied
// in the canvas (mandatory to do this first step)
var originalImg = document.createElement('img');
originalImg.id = 'myoriginalimg';
originalImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwLDiAQSszC7gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACAElEQVRYw+2WMYvbQBBGv5ndFegsdC6cTkWKFIEcpDkCqfLz3aQx5KqQ5lAXHRhHurW12pkUJsThDhLJyAlhXyWJWfHYmdkdIJFIJBKJRCIxJ3T+L8qT591f1yqBElgCqzxfGAOgi7HxfgvszvabqFUBlXNv8rxiXhmTEwHwqk2Mtcid93UI9RladprT26K4tfa1c5W1C2YHAAhAJ1IPQ8X8cRjQtvXFtI5OH7LsJssqYwoiR8QAAAGWRNfM18Ys+h5FMdnMjq2nyrlba2+y7KW1BWDpZxkYwBBZwFoLoBN5cG4XwoQ6M6OiXwDvi+Jdlr1yriQ6OtEJAJjIAhmRAi1RfThM0OJR0UugYq6sLU6cfukgIgCWqCCqrK2Yl5OSyKMyuMrzlTELZvec06mZI1owr4xZ5Xk5924tjMmJ3B8sY8ABOdHxSJtX62KM0+pi9KoBkN9FChAAr9rFOK/WDmi8b2LsRIIqAFV9Gnb8GFQ7kSbGxvvZO3EL1CL1MLSqw3Nmx9dBtVWth6EW2U5K4vh6FFkaUxpzxWwBftKMg2oL3Me46fv142Mtcphb6wBARKy9AjKijIiPx+mPeupVd6r3MX7q+3UIn/f7r5fZrR3g+35vjIooQEQB6FW96jfVB5EvIWz6fh3C5oyr+h8dbP6vMXDuoTmRSCQSiURiPN8BXZXzZJhVHqQAAAAASUVORK5CYII=";
document.body.appendChild(originalImg);
})
casper.then(function(){
casper.wait(1000);
})
// second evaluate() to create the canvas from the image
casper.thenEvaluate(function() {
// copy the original image in a canvas
var imgInInput = document.querySelector('#myoriginalimg');
var imageObj = new Image();
imageObj.src = imgInInput.getAttribute('src');
var canvas = document.createElement('canvas');
canvas.width = 50;
canvas.height = 50;
var context = canvas.getContext('2d');
context.drawImage(
imageObj,
0,
0,
canvas.width,
canvas.height,
0,
0,
canvas.width,
canvas.height
);
var imageData = context.getImageData(0, 0, 50, 50);
var data = imageData.data; // data of the current image
var pix = 0;
for(var i = 0; i < data.length; i += 4) {
pix++;
var red = data[i];
var green = data[i+1];
var blue = data[i+2];
var alpha = data[i+3];
data[i+3] = 255; // set transparency to null
data[i+1] = 255; // set green at maximum just for the test
console.log(
pix + "nth pixel" +
" red=" + red +
" green=" + green +
" blue=" + blue +
" alpha=" + alpha
);
}
// overwrite original image
context.putImageData(imageData, 0, 0);
// Create a <div> to put the canva in
var childDiv = document.createElement("div");
childDiv.appendChild(canvas);
// Create the parent <div>
var parentDiv = document.createElement("div");
parentDiv.setAttribute('id', 'outputimage');
parentDiv.setAttribute('style', 'position: absolute;z-index:9999');
document.body.insertBefore(parentDiv, document.body.firstChild);
childDiv.setAttribute('id', 'mydivid');
parentDiv.appendChild(childDiv);
});
casper.then(function() {
casper.capture("out.png");
casper.echo(casper.getHTML());
})
casper.run(function() {
this.exit();
});
I have a SPA build with AngularJS.
ater Login i save the Streaming Object in a global variable for Future use (so i have to set the permission just once)
I use this StreamingObject at two userstories (for now)
Story one:
change profile image
Story two make a selfie and post it.
Everything works fine until i switch from Story one to Story Two.
This breaks the Stream.
I wrote this directive.
angular.module('myApp')
.controller('webcamCtrl', function ($scope, globVal) {
var width = 373;
var height = 0;
var streaming = false;
var video = null;
var canvas = null;
$scope.showPicture = false;
$scope.startup = function() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
$scope.$watch(function () {
return globVal.webcam;
}, function() {
if(globVal.webcam !== null){
video.src = globVal.webcam;
video.play();
}
});
video.addEventListener('canplay', function () {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
$scope.clearphoto();
};
$scope.clearphoto = function() {
var context = canvas.getContext('2d');
context.fillStyle = '#AAA';
context.fillRect(0, 0, canvas.width, canvas.height);
$scope.showPicture = false;
globVal.image = null;
};
$scope.takepicture = function() {
var context = canvas.getContext('2d');
if(!$scope.showPicture){
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
$scope.showPicture = true;
$scope.acceptpicture();
} else {
$scope.clearphoto();
}
}else {
$scope.clearphoto();
}
};
$scope.acceptpicture = function() {
if($scope.showPicture){
var data = canvas.toDataURL('image/png');
globVal.image = data;
}else{
globVal.image = null;
}
};
$scope.startup();
});
any hints?
Solved. i add a ng-if to my directive so the $scope of teh webcam can destroyed safely
<web-cam ng-if="showCam"></web-cam