I am trying to download a dashboard created with plotly dashand having no built-in feature to do so, I have made a script that gets called on press of the download button.
This script is designed get all pages (from their class name), then it includes the textarea content and then, it takes a picture of each page, and aggregate them into a pdf.
function(n_clicks){
if(n_clicks > 0){
var pages = document.getElementsByClassName("page");
var pageArray = [];
for (var i = 0; i < pages.length; i++) {
var textareas = pages[i].getElementsByTagName("textarea");
for (var j = 0; j < textareas.length; j++) {
var div = document.createElement("div");
div.innerHTML = textareas[j].value.replace(/\\n/g, "<br />");
div.setAttribute("style", "font-size: 19px; margin-top: 15px;margin-right:50px;margin-left:50px");
textareas[j].parentNode.replaceChild(div, textareas[j]);
pageArray.push(pages[i]);
}
}
var pdf = new jsPDF('p', 'pt', 'letter');
var promises = [];
for (var i = 0; i < pageArray.length; i++) {
promises.push((function(index) {
return html2canvas(pageArray[index], {useCORS: true}).then(function (canvas) {
var imgData = canvas.toDataURL("image/png");
var scaledWidth = canvas.width * 0.75;
var scaledHeight = canvas.height * 0.65;
var x = (pdf.internal.pageSize.width - scaledWidth) / 2;
var y = (pdf.internal.pageSize.height - scaledHeight) / 2;
pdf.addImage(imgData, 'PNG', x, y, scaledWidth, scaledHeight);
if (index < pageArray.length - 1) {
pdf.addPage();
}
});
})(i));
}
Promise.all(promises).then(function() {
pdf.save("concatenated.pdf");
});
}
}
this works but the pages are getting shuffled up on download, it seems that it is randomly. I am not so good with js and I can't what is messing up. Hopefully someone can see where I am messing up
Related
I'm creating a WordPress website and want to include a javascript that calculates the size in bytes of pages of the site. I've created this little script that I call with onload on the body.
<script type="text/javascript">
function getPageSize() {
console.log("tests begin");
// HTML size
var mypagesize;
var iTimePage = 0;
iTimePage = performance.getEntriesByName(window.location.href)[0];
mypagesize = iTimePage.transferSize / 1024.0;
// images size
var imgElems = window.document.getElementsByTagName('img');
console.log(imgElems);
var myimgsize = 0;
var iTimeImg = 0;
for (var i = 0, len = imgElems.length; i < len; i++) {
var url = imgElems[i].src || imgElems[i].href;
console.log(imgElems);
if (url && url.length > 0) {
iTimeImg = performance.getEntriesByName(url)[0];
console.log(url.length);
if (iTimeImg) {
myimgsize += (iTimeImg.transferSize / 1024.0);
}
}
}
//CSS size
var linkElems = window.document.getElementsByTagName('link');
var mylinksize = 0;
var iTimeLink = 0;
for (var i = 0, len = linkElems.length; i < len; i++) {
var url = linkElems[i].src || linkElems[i].href;
if (url && url.length > 0) {
iTimeLink = performance.getEntriesByName(url)[0];
if (iTimeLink) {
mylinksize += iTimeLink.transferSize / 1024.0;
}
}
}
//JS size
var scriptElems = window.document.getElementsByTagName('script');
var myscriptsize = 0;
var iTimeScript = 0;
for (var i = 0, len = scriptElems.length; i < len; i++) {
var url = scriptElems[i].src || scriptElems[i].href;
if (url && url.length > 0) {
iTimeScript = performance.getEntriesByName(url)[0];
if (iTimeScript) {
myscriptsize += iTimeScript.transferSize / 1024.0;
}
}
}
var pagesizereduce = Math.round(mypagesize + myimgsize + mylinksize + myscriptsize);
console.log("tests end");
console.log(mypagesize);
console.log(myimgsize);
console.log(mylinksize);
console.log(myscriptsize);
document.getElementById('desktop').innerHTML = pagesizereduce;
document.getElementById('mobile').innerHTML = pagesizereduce;
}
</script>
The only problem I have is for the images. it works perfectly on Chrome but on Firefox if my image is a featured image on WordPress, the performancegetEntriesByName(); is undefined. If the images are in the post it work perfectly.
Is there a problem with Mozilla handling js differently of chrome ? Or is it a WordPress problem with the featured images on Mozilla ?
In this page when the user click "Show Image" button, a random image appear. that's good. I need the script only affect this image.
The problem is the header image disappear too, and I need to keep all other images displayed.
I need a solution
Code here:
https://codepen.io/Haitham1000/pen/aXjYzz
function display_random_image()
{
var theImages = [{
src: "http://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg",
width: "240",
height: "160"
}, {
src: "http://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg",
width: "320",
height: "195"
}, {
src: "http://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg",
width: "500",
height: "343"
}];
var preBuffer = [];
for (var i = 0, j = theImages.length; i < j; i++) {
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i].src;
preBuffer[i].width = theImages[i].width;
preBuffer[i].height = theImages[i].height;
}
// create random image number
function getRandomInt(min,max)
{
// return Math.floor(Math.random() * (max - min + 1)) + min;
imn = Math.floor(Math.random() * (max - min + 1)) + min;
return preBuffer[imn];
}
// 0 is first image, preBuffer.length - 1) is last image
var newImage = getRandomInt(0, preBuffer.length - 1);
// remove the previous images
var images = document.getElementsByTagName('img');
var l = images.length;
for (var p = 0; p < l; p++) {
images[0].parentNode.removeChild(images[0]);
}
// display the image
var targetContainer = document.getElementsByClassName("container");
targetContainer[0].appendChild(newImage);
}
If container is the only place where there will be images you want to remove (for example, the previous image), you can iterate over just the images it contains, rather than all images in the document. For example:
// remove the previous images
var targetContainer = document.getElementsByClassName("container")[0];
var images = targetContainer.getElementsByTagName('img');
var l = images.length;
for (var p = 0; p < l; p++) {
images[0].parentNode.removeChild(images[0]);
}
// display the image
targetContainer.appendChild(newImage);
Note that var targetContainer was moved to the top, that the [0] was added to it, and that images is now coming from targetContainer.getElementsByTagName.
Codepen
You are finding and then looping over every image on the page to remove it. Instead of var images = document.getElementsByTagName('img'); try getting images in the container and then replace them.
function display_random_image() {
....
var newImage = getRandomInt(0, preBuffer.length - 1);
//GET THE CONTAINER FIRST
var targetContainer = document.getElementsByClassName("container")[0];
//FIND THE IMAGES IN CONTAINER ONLY
var images = targetContainer.getElementsByTagName('img');
var l = images.length;
for (var p = 0; p < l; p++) {
images[0].remove();
}
// display the image
targetContainer.appendChild(newImage);
}
I'm trying to create a slot game;
I have some images that I put into an array
var createSlots = function(){
//setup images as tilingSprites
var slot1 = new PIXI.extras.TilingSprite(t1, 200, 200);
var slot2 = new PIXI.extras.TilingSprite(t2, 200, 200);
var slot3 = new PIXI.extras.TilingSprite(t3, 200, 200);
var slot4 = new PIXI.extras.TilingSprite(t4, 200, 200);
var slot5 = new PIXI.extras.TilingSprite(t5, 200, 200);
var slot6 = new PIXI.extras.TilingSprite(t6, 200, 200);
var slot7 = new PIXI.extras.TilingSprite(t7, 200, 200);
var slot8 = new PIXI.extras.TilingSprite(t8, 200, 200);
var slot9 = new PIXI.extras.TilingSprite(t9, 200, 200);
var slot10 = new PIXI.extras.TilingSprite(t10, 200, 200);
//push slots into array; images, sprites etc.
mainSlotArr.push(slot1, slot2, slot3, slot4, slot5, slot6, slot7, slot8, slot9, slot10);
};
for the moment I have 2 functions (will combine them once I get this working)
createReels1 and createReels2
what they do is copy the mainSlotArray use a shuffle function
Then populate to 2 columns (reels) each (at the moment createReels2 only does one reel)
it then removes the array element from the array it's using
The trouble I'm having is that whatever image tiles are used in createReels2, disappear if they are being used in createReels1 function, e.g if image1.png used in createReels2 and createReels1, then it is not visible in the first 2 reels
createReels functions below (alot of hard coding!)
var createReels1 = function(){
slotArr1 = mainSlotArr.slice();
shuffle(slotArr1);
var counter = 0;
var num = 0
for(var i = 0; i <2; i++){
var slotContainer = new PIXI.Container();
slotContainer.width = 100;
slotContainer.height = 400;
slotContainer.y = 100;
slotContainer.x = i*130;
stage.addChild(slotContainer);
slotContainerArr.push(slotContainer);
for(var j = 0; j < 3; j++){
var slot = slotArr1[j];
var toDel = slotArr1.indexOf(slot);
slot.scale.y = slot.scale.x = .5;
console.log(slot);
var nextY = j*(slot.height/2);
slot.y = nextY;
slotContainerArr[i].addChild(slot);
slotArr1.splice(toDel, 1);//remove from array
}
}
}
var createReels2 = function(){
slotArr2 = mainSlotArr.slice();
shuffle(slotArr2);
var counter = 0;
var num = 0
for(var i = 0; i <1; i++){
var slotContainer = new PIXI.Container();
slotContainer.width = 100;
slotContainer.height = 400;
slotContainer.y = 100;
slotContainer.x = 260;
stage.addChild(slotContainer);
slotContainerArr.push(slotContainer);
for(var j = 0; j < 3; j++){
var slot = slotArr2[j];
var toDel = slotArr2.indexOf(slot);
slot.scale.y = slot.scale.x = .5;
var nextY = j*(slot.height/2);
slot.y = nextY;
slotContainerArr[2].addChild(slot);
slotArr2.splice(toDel, 1);//remove from array
}
}
}
If I understood the code correctly, with quick check:
Sprites can have only one parent. If you check the Sprite object, it actually has a parent property. So slotArr1 and slotArr2 have identical Sprites and that fact doesn't change id you slice them. Then when you are assigning them to different containers, they get moved from one container to the other. You can reuse textures sure, but one Sprite can only have on parent.
I'm not a programmer, but trying to write a script for Photoshop. Below is something that I found, but it simply increments the files "1.png, 2.png, etc..." I'd like to name the exported files, "documentName_canvasWidth_canvasHeight_incrementedNumber.png"
function sfwPNG24(saveFile){
var pngOpts = new ExportOptionsSaveForWeb;
pngOpts.format = SaveDocumentType.PNG
pngOpts.PNG8 = false;
pngOpts.transparency = true;
pngOpts.interlaced = false;
pngOpts.quality = 100;
activeDocument.exportDocument(new File(saveFile),ExportType.SAVEFORWEB,pngOpts);
}
/*
Incrementing a number inside a text layer then Saving it in PNG
*/
var layer = activeDocument.layers[0];
if (layer.kind == 'LayerKind.TEXT') {
for (var i=1; i < 7; i++) {
layer.textItem.contents = i.toString();
sfwPNG24( 'filepathgoeshere'+ i +'.png');
};
};
Add these changes to the second part of the code:
var layer = activeDocument.layers[0];
// documentName_canvasWidth_canvasHeight_incrementedNumber.png
var srcDoc = app.activeDocument;
// get width and height
var W = srcDoc.width.value;
var H = srcDoc.height.value;
// get document name
var fn = srcDoc.name;
if (layer.kind == 'LayerKind.TEXT')
{
for (var i=1; i < 7; i++)
{
layer.textItem.contents = i.toString();
sfwPNG24( 'filepathgoeshere'+ W + "_" + H + "_" + i +'.png')
}
}
Somewhere in my code, I seem to be doing something wrong and I cannot tell which part is going awry. I've printed to console the values I'm getting from the various arrays and it seems to match up. Then when I run the equalization function (a la Wikipedia-Histogram Equalization) my output image is close to total black. I was trying to interpret this guy's php into javascript just to test some stuff out and figured I did a decent job. But I'm not an expert.
The pertinent parts:
function imageLoaded(ev) {
element = document.getElementById("canvas1");
c = element.getContext("2d");
im = ev.target; // the image
// read the width and height of the canvas
width = element.width;
height = element.height;
// stamp the image on the left of the canvas:
c.drawImage(im, 0, 0);
// get all canvas pixel data
imageData = c.getImageData(0, 0, width, height);
w2 = width / 2;
var reds = new Array();
var greens = new Array();
var blues = new Array();
var freqR = new Array();
var freqG = new Array();
var freqB = new Array();
if (imageData){
buildHistograms(reds, greens,blues);
buildFrequencies(reds, greens, blues, freqR, freqG, freqB);
}
var alpha = 255/(w2*height);
// run through the image
for (y = 0; y < height; y++) {
inpos = y * width * 4; // *4 for 4 ints per pixel
outpos = inpos + w2 * 4;
for (x = 0; x < w2; x++) {
//reads pixel data(of img c)to each channel of rgb
r = imageData.data[inpos++];
g = imageData.data[inpos++];
b = imageData.data[inpos++];
a = imageData.data[inpos++];
//using histogram eqalization formula:
adjR = freqR[r]*alpha;
adjG = freqG[g]*alpha;
adjB = freqB[b]*alpha;
//assigns pixel data of output image
imageData.data[outpos++] = adjR;
imageData.data[outpos++] = adjG;
imageData.data[outpos++] = adjB;
imageData.data[outpos++] = a;
}
}
// put pixel data on canvas
c.putImageData(imageData, 0,0);
}
im = new Image();
im.onload = imageLoaded;
im.src = "Lenna.png";
function buildHistograms(reds,greens,blues){
//run through image building histogram
for (y=0; y < height; y++){
inpos = y * width *4;
for (x=0; x < w2; x++){
rd = imageData.data[inpos++];
g = imageData.data[inpos++];
b = imageData.data[inpos++];
a = imageData.data[inpos++];
// Add counts to our histogram arrays for each color.
reds.push(rd);
greens.push(g);
blues.push(b);
}
}
// Sort them by keys into order
reds.sort(function(a,b){return a-b});
greens.sort(function(a,b){return a-b});
blues.sort(function(a,b){return a-b});
}
function buildFrequencies(reds, greens, blues, freqR, freqG, freqB){
// Build frequency charts for all colors: takes REDS GREENS BLUES from buildHistograms and places them on top of each other accordingly
for(i=0; i<=255; i++){
sumR=0;
sumG=0;
sumB=0;
for(j=0; j<= i; j++){
if (reds[j]){sumR+=reds[j];}
if (greens[j]){sumG+=greens[j];}
if (blues[j]){sumB+=blues[j];}
}
freqR[i] = sumR;
freqG[i] = sumG;
freqB[i] = sumB;
}
}
Any help is appreciated, Thanks.
Looks like my build frequencies section was all wrong. I modified it in this way:
var len = reds.length;
for (j=0; j < len; j++) {
var rCurrVal = reds[j];
var gCurrVal = greens[j];
var bCurrVal = blues[j];
if (freqR.hasOwnProperty(rCurrVal)) {
freqR[rCurrVal] += 1;
} else {
freqR[rCurrVal] = 1;
}
if (freqG.hasOwnProperty(gCurrVal)) {
freqG[gCurrVal] += 1;
} else {
freqG[gCurrVal] = 1;
}
if (freqB.hasOwnProperty(bCurrVal)) {
freqB[bCurrVal] += 1;
} else {
freqB[bCurrVal] = 1;
}
}
for (i=0; i<255; i++){
if ($.inArray(i,reds)===-1){freqR[i]=0;}
if ($.inArray(i,greens)=== -1){freqG[i]=0;}
if ($.inArray(i,blues)=== -1){freqB[i]=0;}
if (i>0){
freqR[i]+=freqR[i-1];
freqG[i]+=freqG[i-1];
freqB[i]+=freqB[i-1];
}
}