We Keep Coding

Split image file in two separate image

I have on my server an image file with an height of 50 000px.
I want to save 2 files of 25 000px each (first and second part of the original image)
Any suggestions about how to do that ?
Thanks

The sharp image package might be useful for this scenario. More specifically the extract method.
I've added a link to the documentation but here's a possible implementation to split up the image.
const sharp = require("sharp");
const originalFilename = "image.jpg";
const image = sharp(originalFilename);
// this is just a placeholder
const imageWidth = 500;
image
.extract({ left: 0, top: 0, width: imageWidth, height: 25000 })
.toFile("top.jpg", function(err) {
// Save the top of the image to a file named "top.jpg"
});
image
.extract({ left: 0, top: 25000, width: imageWidth, height: 25000 })
.toFile("bottom.jpg", function(err) {
// Save the bottom of the image to a file named "bottom.jpg"
});
I'm assuming you can reuse the original sharp image object to call the extract function twice. If not you might need to call the sharp constructor again.

pixijs swapping out an image without it jumping

I am working on a html 5 javascript game. It has a heavily textured background. I am looking at having one 3d background item and swapping it out on the fly. So in this instance we see a room with a closed door - then when a js event is fired - the image is swapped out to show an open door.
I am trying to create the function and although I can swap the image - I am unable to stop it from jumping.
so a new image path comes in - I null and remove the old backdrop and replace it with the new. I have read about adding it to the texture cache - not sure how to do that? Its my first time using pixijs
GroundPlane.prototype.resetBackdrop = function (imagePath) {
if(this.backdrop) {
this.backdrop.alpha = 0;
this.removeChild(this.backdrop);
this.backdrop = null;
this.backdrop = PIXI.Sprite.fromImage(imagePath);
this.backdrop.anchor.x = .5;
this.backdrop.anchor.y = .5;/*
this.backdrop.scale.x = 1.2;
this.backdrop.scale.y = 1.2;*/
this.addChildAt(this.backdrop, 0);
this.backdrop.alpha = 1;
}
};

The reason for the "jump" is that the image being swapped in takes some time to load before it can be displayed on the screen.
To prevent this, you can load the image into the TextureCache ahead of time, so when you swap images, there won't be any delay.
//set the initial backdrop image
this.backdrop = PIXI.Sprite.fromImage("Image1.png");
this.backdrop.anchor.x = 0.5;
this.backdrop.anchor.y = 0.5;
this.backdrop.scale.x = 1.2;
this.backdrop.scale.y = 1.2;
//this will store the second image into the texture cache
PIXI.Texture.fromImage("Image2.png");
//if you need to keep track of when the image has finished loading,
//use a new PIXI.ImageLoader() instead.
GroundPlane.prototype.resetBackdrop = function (imagePath)
{
//Update the image Texture
this.backdrop.setTexture(PIXI.Texture.fromFrame(imagePath));
};

Using canvas to create desktop notification images, only one image works from background page

I'm having an issue while using canvas in a background page to create data URLs for desktop notifications' images.
I want to use the "image" notifications which require a 3:2 ratio to display properly. The images I want to use (from hulu.com) are a different ratio, so I decided to use the canvas element to create the corresponding data URL off of these images so that the ratio is correct. It kind of works in theory, but…
…I'm having issues if I'm creating more than one canvas/notification in the background page. One image is created properly, but the rest comes out empty.
Confusingly, opening the same background page in a new tab (i.e. exact same code) makes everything works just fine: all the notifications are created with the images loaded from hulu.com. Also, just changing the dimensions from 360x240 to 300x200 makes it work. Finally, though they're similar computers with the same Chrome version (34.0.1847.116), it works without modification at work while it doesn't on my own laptop.
I made a test extension available at the bottom of this post. Basically, it only has a generated background page. The code for that page is this:
var images = ["http://ib2.huluim.com/video/60376901?size=290x160&img=1",
"http://ib2.huluim.com/video/60366793?size=290x160&img=1",
"http://ib4.huluim.com/video/60372951?size=290x160&img=1",
"http://ib1.huluim.com/video/60365336?size=290x160&img=1",
"http://ib3.huluim.com/video/60376290?size=290x160&img=1",
"http://ib4.huluim.com/video/60377231?size=290x160&img=1",
"http://ib4.huluim.com/video/60312203?size=290x160&img=1",
"http://ib1.huluim.com/video/60376972?size=290x160&img=1",
"http://ib4.huluim.com/video/60376971?size=290x160&img=1",
"http://ib1.huluim.com/video/60376616?size=290x160&img=1"];
for (var i = 0; i < 10; i++) {
getDataURL(i);
}
/*
* Gets the data URL for an image URL
*/
function getDataURL(i) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = 360;
canvas.height = 240;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
var dataURL = canvas.toDataURL('image/png');
chrome.notifications.create('', {
type: 'image',
iconUrl: 'logo_128x128.png',
title: String(i),
message: 'message',
imageUrl: dataURL
}, function(id) {});
}
//img.src = chrome.extension.getURL('logo_128x128.png');;
img.src = images[i];
}
The commented out line for img.src = ... is a test where it loads a local file instead of a remote one. In that case, all the images are created.
The red rectangle added to the canvas is to show that it's not just the remote image that is an issue: the whole resulting canvas is empty, without any red rectangle.
If you download and add the test extension below, you should get 10 notifications but only one with an image.
Then, to open the background page in a new tab, you can inspect the background page, type this in the console:
chrome.extension.getURL('_generated_background_page.html')
and right-click the URL, and click "Open in a new Tab" (or window). Once open you should get 10 notifications that look fine.
Any idea of what is going on? I haven't been able to find any kind of limitations for background pages relevant to that. Any help would be appreciated, because this has been driving me crazy!
Files available here: https://www.dropbox.com/s/ejbh6wq0qixb7a8/canvastest.zip
edit: based on #GameAlchemist's comment, I also tried the following: same getDataURL method, but the loop wrapped inside an onload for the logo:
function loop() {
for (var i = 0; i < 10; i++) {
getDataURL(i);
}
}
var logo = new Image();
logo.onload = function () {
loop();
}
logo.src = chrome.extension.getURL('logo_128x128.png');

Remember that the create() method is asynchronous and you should use a callback with. The callback can invoke next image fetching.
I would suggest doing this in two steps:
Load all the images first
Process the image queue
The reason is that you can utilize the asynchronous image loading better this way instead of chaining the callbacks which would force you to load one and one image.
For example:
Image loader
var urls = ["http://ib2.huluim.com/video/60376901?size=290x160&img=1",
"http://ib2.huluim.com/video/60366793?size=290x160&img=1",
"http://ib4.huluim.com/video/60372951?size=290x160&img=1",
"http://ib1.huluim.com/video/60365336?size=290x160&img=1",
"http://ib3.huluim.com/video/60376290?size=290x160&img=1",
"http://ib4.huluim.com/video/60377231?size=290x160&img=1",
"http://ib4.huluim.com/video/60312203?size=290x160&img=1",
"http://ib1.huluim.com/video/60376972?size=290x160&img=1",
"http://ib4.huluim.com/video/60376971?size=290x160&img=1",
"http://ib1.huluim.com/video/60376616?size=290x160&img=1"];
var images = [], // store image objects
count = urls.length; // for loader
for (var i = 0; i < urls.length; i++) {
var img = new Image; // create image
img.onload = loader; // share loader handler
img.src = urls[i]; // start loading
images.push(img); // push image object in array
}
function loader() {
count--;
if (count === 0) process(); // all loaded, start processing
}
//TODO need error handling here as well
Fiddle with concept code for loader
Processing
Now the processing can be isolated from the loading:
function process() {
// share a single canvas (use clearRect() later if needed)
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
current = 0;
canvas.width = 360;
canvas.height = 240;
createImage(); // invoke processing for first image
function createImage() {
ctx.drawImage(images[current], 0, 0); // draw current image
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
chrome.notifications.create('', {
type : 'image',
iconUrl : 'logo_128x128.png',
title : String(i),
message : 'message',
imageUrl: canvas.toDataURL() // png is default
},
function(id) { // use callback
current++; // next in queue
if (current < images.length) {
createImage(); // call again if more images
}
else {
done(); // we're done -> continue to done()
}
});
}
}
Disclaimer: I don't have a test environment to test Chrome extensions so typos/errors may be present.
Hope this helps!

weird behavior inside canvas when animating a human stripes

this is my jsfiddle : http://jsfiddle.net/yKvuK/6/
if (keydown.right) {
characterImg.src = 'http://pixenate.com/pixenate//cache/photo_e2094a30725ccd74a6d889648d34343b.jpg';
character.CurentPos++;
character.x += character.speed;
if (character.x > CanvasWidth - character.width) { // make the character keep walking even if he step outside the canvas
character.x = 0;
}
}
if (keydown.up) {
characterImg.src = "http://pixenate.com/pixenate//cache/photo_1_5ef90294cd2afeb4486dedd663cfd872.jpg";
character.y -= character.speed;
if (character.y < 0) {
character.y = 0;
}
character.CurentPos++;
}
if (keydown.down) { //going down
characterImg.src = "http://pixenate.com/pixenate//cache/photo_1_ff6712ddd80b138f1865eb4937622d1b.jpg";
character.CurentPos++;
character.y += character.speed;
if (character.y > CanvasHeight - character.height) {
character.y = CanvasHeight - character.height;
}
}
you can see the problem when trying to move the character up and down can anyone help me ?

You need to create a new version of your images, I mean make a new png file one for each. jpg does not support transparency.
(I made on for you, you can see in the url under)
When you have the files you can do like:
var characterImgL = new Image(); // Image Left to be loaded and drawn on canvas
var characterImgR = new Image(); // Image Right to be loaded and drawn on canvas
var characterImgU = new Image(); // Image Up to be loaded and drawn on canvas
var characterImgD = new Image(); // Image Down to be loaded and drawn on canvas
...
function init() {
characterImgL.src = "http://david.blob.core.windows.net/easeljstutorials/img/MonsterARun.png";
characterImgR.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png";
characterImgU.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png";
characterImgD.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png";
characterImg = characterImgL; //Start image = Left image
}
and then on each movement you assign the characterImg to the right one.
Like
characterImg = characterImgR; if movement to right
characterImg = characterImgL; if movement to left
Check the fiddle, the left / right is working, the up, down you have to fix png for that it will take some minutes to rotate each frame.
(you can copy the .png for the right movement from the url in the fiddle)
Option 1: (the easy way)
Use as in the fiddle. Notice that the Monster_ARun_R.png image is almost correct, it has 10 images inside it and they should change position. The one you see to the left should be in the right looking to the right. The second one should be the next last (also looking to the right, ect)
Example (numbers are images):
1 2 3 4 5 6 7 8 9 10 should be 10 9 8 7 6 5 4 3 2 1 BUT looking to the right (otherwise is the same as MonsterARun.png
Option 2: (a bit more work)
If you will have Right, Left, Up & Down movement you need a different png/file for each movement. Each png file is made of several images to make an animation. The one I fixed I just flipped horizontally the original png file (like mirror view) but to be well done you need to also invert the order of each image. And then the same for up & down movement. AND all png files are horizontal. The ones you put in your fiddle are vertical you need a image like this:

Is there a minimalistic PDF.js sample that supports text selection?

I'm trying PDF.js.
My problem is that the Hello World demo does not support text selection. It will draw everything in a canvas without the text layer. The official PDF.js demo does support text selection but the code is too complex. I was wondering if somebody has a minimalistic demo with the text layer.

I have committed the example to Mozilla's pdf.js repository and it is available under the examples directory.
The original example that I committed to pdf.js no longer exists, but I believe it this example showcases text-selection. They have cleaned up and reorganized pdf.js and so the text-selection logic is encapsulated inside the text-layer, which can be created using a factory.
Specifically, PDFJS.DefaultTextLayerFactory takes care of setting up the basic text-selection stuff.
The following example is outdated; only leaving it here for historical reasons.
I have been struggling with this problem for 2-3 days now, but I finally figured it out. Here is a fiddle that shows you how to load a PDF with text-selection enabled.
The difficulty in figuring this out was that the text-selection logic was intertwined with the viewer code (viewer.js, viewer.html, viewer.css). I had to extricate relevant code and CSS out to get this to work (that JavaScript file is referenced in the file; you can also check it out here). The end result is a minimal demo that should prove helpful. To implement selection properly, the CSS that is in viewer.css is also extremely important as it sets up CSS styles for the divs that are eventually created and then used to get text selection working.
The heavy lifting is done by the TextLayerBuilder object, which actually handles the creation of the selection divs. You can see calls to this object from within viewer.js.
Anyway, here's the code including the CSS. Keep in mind that you will still need the pdf.js file. My fiddle has a link to a version that I built from Mozilla's GitHub repo for pdf.js. I didn't want to link to the repo's version directly since they are constantly developing it and it may be broken.
So without further ado:
HTML:
<html>
<head>
<title>Minimal pdf.js text-selection demo</title>
</head>
<body>
<div id="pdfContainer" class = "pdf-content">
</div>
</body>
</html>
CSS:
.pdf-content {
border: 1px solid #000000;
}
/* CSS classes used by TextLayerBuilder to style the text layer divs */
/* This stuff is important! Otherwise when you select the text, the text in the divs will show up! */
::selection { background:rgba(0,0,255,0.3); }
::-moz-selection { background:rgba(0,0,255,0.3); }
.textLayer {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #000;
font-family: sans-serif;
overflow: hidden;
}
.textLayer > div {
color: transparent;
position: absolute;
line-height: 1;
white-space: pre;
cursor: text;
}
.textLayer .highlight {
margin: -1px;
padding: 1px;
background-color: rgba(180, 0, 170, 0.2);
border-radius: 4px;
}
.textLayer .highlight.begin {
border-radius: 4px 0px 0px 4px;
}
.textLayer .highlight.end {
border-radius: 0px 4px 4px 0px;
}
.textLayer .highlight.middle {
border-radius: 0px;
}
.textLayer .highlight.selected {
background-color: rgba(0, 100, 0, 0.2);
}
JavaScript:
//Minimal PDF rendering and text-selection example using pdf.js by Vivin Suresh Paliath (http://vivin.net)
//This fiddle uses a built version of pdf.js that contains all modules that it requires.
//
//For demonstration purposes, the PDF data is not going to be obtained from an outside source. I will be
//storing it in a variable. Mozilla's viewer does support PDF uploads but I haven't really gone through
//that code. There are other ways to upload PDF data. For instance, I have a Spring app that accepts a
//PDF for upload and then communicates the binary data back to the page as base64. I then convert this
//into a Uint8Array manually. I will be demonstrating the same technique here. What matters most here is
//how we render the PDF with text-selection enabled. The source of the PDF is not important; just assume
//that we have the data as base64.
//
//The problem with understanding text selection was that the text selection code has heavily intertwined
//with viewer.html and viewer.js. I have extracted the parts I need out of viewer.js into a separate file
//which contains the bare minimum required to implement text selection. The key component is TextLayerBuilder,
//which is the object that handles the creation of text-selection divs. I have added this code as an external
//resource.
//
//This demo uses a PDF that only has one page. You can render other pages if you wish, but the focus here is
//just to show you how you can render a PDF with text selection. Hence the code only loads up one page.
//
//The CSS used here is also very important since it sets up the CSS for the text layer divs overlays that
//you actually end up selecting.
//
//For reference, the actual PDF document that is rendered is available at:
//http://vivin.net/pub/pdfjs/TestDocument.pdf
var pdfBase64 = "..."; //should contain base64 representing the PDF
var scale = 1; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
/**
* Converts a base64 string into a Uint8Array
*/
function base64ToUint8Array(base64) {
var raw = atob(base64); //This is a native function that decodes a base64-encoded string.
var uint8Array = new Uint8Array(new ArrayBuffer(raw.length));
for(var i = 0; i < raw.length; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
return uint8Array;
}
function loadPdf(pdfData) {
PDFJS.disableWorker = true; //Not using web workers. Not disabling results in an error. This line is
//missing in the example code for rendering a pdf.
var pdf = PDFJS.getDocument(pdfData);
pdf.then(renderPdf);
}
function renderPdf(pdf) {
pdf.getPage(1).then(renderPage);
}
function renderPage(page) {
var viewport = page.getViewport(scale);
var $canvas = jQuery("<canvas></canvas>");
//Set the canvas height and width to the height and width of the viewport
var canvas = $canvas.get(0);
var context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
//Append the canvas to the pdf container div
jQuery("#pdfContainer").append($canvas);
//The following few lines of code set up scaling on the context if we are on a HiDPI display
var outputScale = getOutputScale();
if (outputScale.scaled) {
var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
(1 / outputScale.sy) + ')';
CustomStyle.setProp('transform', canvas, cssScale);
CustomStyle.setProp('transformOrigin', canvas, '0% 0%');
if ($textLayerDiv.get(0)) {
CustomStyle.setProp('transform', $textLayerDiv.get(0), cssScale);
CustomStyle.setProp('transformOrigin', $textLayerDiv.get(0), '0% 0%');
}
}
context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
}
var canvasOffset = $canvas.offset();
var $textLayerDiv = jQuery("<div />")
.addClass("textLayer")
.css("height", viewport.height + "px")
.css("width", viewport.width + "px")
.offset({
top: canvasOffset.top,
left: canvasOffset.left
});
jQuery("#pdfContainer").append($textLayerDiv);
page.getTextContent().then(function(textContent) {
var textLayer = new TextLayerBuilder($textLayerDiv.get(0), 0); //The second zero is an index identifying
//the page. It is set to page.number - 1.
textLayer.setTextContent(textContent);
var renderContext = {
canvasContext: context,
viewport: viewport,
textLayer: textLayer
};
page.render(renderContext);
});
}
var pdfData = base64ToUint8Array(pdfBase64);
loadPdf(pdfData);

Because This is an old question and old accepted answer, to get it working with recent PDF.JS versions you may use this solution
http://www.ryzhak.com/converting-pdf-file-to-html-canvas-with-text-selection-using-pdf-js
Here is the code they used :
Include the following CSS and scripts from the PDF.js code
<link rel="stylesheet" href="pdf.js/web/text_layer_builder.css" />
<script src="pdf.js/web/ui_utils.js"></script>
<script src="pdf.js/web/text_layer_builder.js"></script>
use this code to load the PDF :
PDFJS.getDocument("oasis.pdf").then(function(pdf){
var page_num = 1;
pdf.getPage(page_num).then(function(page){
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = $('#the-canvas')[0];
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var canvasOffset = $(canvas).offset();
var $textLayerDiv = $('#text-layer').css({
height : viewport.height+'px',
width : viewport.width+'px',
top : canvasOffset.top,
left : canvasOffset.left
});
page.render({
canvasContext : context,
viewport : viewport
});
page.getTextContent().then(function(textContent){
console.log( textContent );
var textLayer = new TextLayerBuilder({
textLayerDiv : $textLayerDiv.get(0),
pageIndex : page_num - 1,
viewport : viewport
});
textLayer.setTextContent(textContent);
textLayer.render();
});
});
});

If you want to render all pages of pdf document in different pages with text selection you can use either
pdf viewer
canvas and renderer to parse the text and append it over the canvas, so that it looks like text selection.
But on real scenario, if you are going to process with the canvas like zoom in/out then this canvas operation will terribly reduce your browser performance. please check the below url,
http://learnnewhere.unaux.com/pdfViewer/viewer.html
You could get the complete code from here
https://github.com/learnnewhere/simpleChatApp/tree/master/pdfViewer