I allow the user to upload an image to the canvas; when creating the Konvas.Image I set the height and width attributes based on the images naturalHeight and naturalWidth.
Upload Code:
function loadImageStep1(src) {
var imgKI = new Konva.Image({
x: 0,
y: 0,
name: 'step1-label',
id: 'step1-label'
});
layer1.add(imgKI);
stage.add(layer1);//Add layer to stage.
var layer1Img = stage.find('.step1-label');
var reader = new FileReader();
reader.onload = function(event) {
img = new Image();
img.onload = function() {
imgKI.image(img);
layer1.draw();
layer1Img.setAttr('width', this.naturalWidth);
layer1Img.setAttr('height', this.naturalHeight);
layer1.draw();
}
img.src = event.target.result;//event.target.result
layer1Img.setAttr('src', event.target.result);
}
reader.readAsDataURL(src);
return false;
}
When I save the canvas to a JSON string the image height and width is gone. I saved the Konva.Image object to a variable and added to the console log to verify that the attributes are present.
Screen Shot of Console Log
Here is the JSON string provided by the stage.toJSON() function; please note that the height and width for the "step1-label" image object is not present.
{"attrs":{"width":500,"height":667,"id":"label-maker","fill":"#ddd"},"className":"Stage","children":[{"attrs":{"id":"background","name":"background"},"className":"Layer","children":[{"attrs":{"width":500,"height":667,"fill":"#ffffff"},"className":"Rect"}]},{"attrs":{"id":"layer1","name":"layer1"},"className":"Layer","children":[{"attrs":{"x":100,"y":180,"name":"step1-label","id":"step1-label","src":"[REMOVED TO MAKE STRING SMALLER]","scaleX":"1.72","scaleY":"1.72"},"className":"Image"}]},{"attrs":{"id":"layer3","name":"layer3"},"className":"Layer","children":[{"attrs":{"id":"txtGroup1","name":"txtGroup1","draggable":true,"x":-5,"y":202},"className":"Group","children":[{"attrs":{"x":250,"y":333.5,"text":"Fine Dinning \nSpecial Preserve","fontSize":"50","fontFamily":"Great Vibes","fill":"#000000","name":"text1","id":"text1","align":"center","lineHeight":"1","fontStyle":"bold","offsetX":203.81988525390625},"className":"Text"}]}]}]}
Here is my work around for this issue. I had to get the image objects and add in the height and width to the JSON string. This is simple because we only allow two images to be added to the canvas.
function saveLabel($title, $continue) {
//Get current width, height and scale settings for the canvas. Use these values to reset once the canvas has beeen saved.
var currentWidth = stage.width();
var currentHeight = stage.height();
var currentXScale = stage.scaleX();
var currentYScale = stage.scaleY();
stage.setWidth(width);
stage.setHeight(height);
stage.scale({ x: 1, y: 1 });
stage.draw();
var $json = stage.toJSON();
//The Konvas library is dropping the height and width of the images when creating the json string, so we have to put them back in...
var layer1Img = stage.find('.step1-label');
var layer2Img = stage.find('.custom');
if (layer1Img.length) {
$json = $json.replace('"id":"step1-label"','"id":"step1-label","height":' + layer1Img[0]["attrs"].height + ',"width":' + layer1Img[0]["attrs"].width);
}
if (layer2Img.length) {
$json = $json.replace('"id":"custom"','"id":"custom","height":' + layer2Img[0]["attrs"].height + ',"width":' + layer2Img[0]["attrs"].width);
}
var $dataURL = stage.toDataURL('image/png');
//Set the canvas back to original settings now that it's been saved.
stage.setWidth(currentWidth);
stage.setHeight(currentHeight);
stage.scale({ x: currentXScale, y: currentYScale });
stage.draw();
saveLabelAjax($json, $dataURL, $title, $continue, label_maker, window.location.hash);
}
Is there something I'm missing in my code; am I setting the image attributes correctly?
I need the image height and width for a rotation function and when I load the canvas from the JSON the rotation functions doesn't work correctly because of this missing data.
I found why you have no width and height in JSON.
While converting a Konva.Node to JSON Konva is trying to make it as minimal as possible. For example, it does NOT save default values (for x and y in will be 0).
In you case width attribute of Konva.Image equals to the natural width of the native image you use. So it is useless in JSON.
When you restore a stage from JSON you will need just load native images and set them to Konva.Image instances.
Related
I'm developing a basic window frame configurator. I splitted glasses in function below. I want to change color when i clicked and get the position of clicked glass to draw openin direction lines.
I tried to understand and implement Lavrton's method(https://codesandbox.io/s/0xj7zml2zl?file=/src/index.js) but i couldn't succeed.
function glassDraw(piece, frameWidth, frameHeight) {
var glassGroup = new Konva.Group();
for (i = 0; i <piece; i++) {
var glass = new Konva.Rect({
name: 'Rect',
x: padding + (frameWidth / piece) * i,
y: padding,
width: frameWidth / piece,
height: frameHeight - padding * 2,
fill: 'lightblue',
id: 'glass'+i,
});
glassGroup.add(glass);
}
glassGroup.find("Rect").on('click', function (e) {
// get id of the cube i drag
var clickedId = e.target.attrs.id;
$('#theId').html(clickedId);
})
return glassGroup;
}
When i use getelementbyid method with id of konva element("glass"+i), it returns null. I think i need to get as a konva element.
You have to create a click listener for all of your rectangles.
for (let rect of glassGroup.children) {
rect.on('click', () => {
console.log(rect.x(), rect.y()); // current position of the object
console.log(rect.id()); // log id of the object
rect.fill('green'); // set color to green
layer.batchDraw(); // update layer (batchDraw just for better performance .draw() would work to)
})
}
Make sure you always update the stage by either call stage.draw() or layer.draw() (or batchDraw() for better performance) after changing something, otherwise your stage will not show anything of what you do.
If something with this code don't work feel free to ask.
Have a nice day.
I am trying to use PDF.js to view PDF documents. I find the display really low resolutions to the point of being blurry. Is there a fix?
// URL of PDF document
var url = "https://www.myFilePath/1Mpublic.pdf";
// Asynchronous download PDF
PDFJS.getDocument(url)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
// Set scale (zoom) level
var scale = 1.2;
// Get viewport (dimensions)
var viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
canvas.height = viewport.height;
canvas.width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
});
There are two things you can do. I tested and somehow it worked, but you will get a bigger memory consumption.
1 . Go to pdf.js and change the parameter MAX_GROUP_SIZE to like 8192 (double it for example) . Be sure to have your browser cache disable while testing.
You can force the getViewport to retrieve the image in better quality but like, I don't know how to say in English, compress it so a smaller size while showing:
// URL of PDF document
var url = "https://www.myFilePath/1Mpublic.pdf";
// Asynchronous download PDF
PDFJS.getDocument(url)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
// Set scale (zoom) level
var scale = 1.2;
// Get viewport (dimensions)
var viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
var resolution = 2 ; // for example
canvas.height = resolution*viewport.height; //actual size
canvas.width = resolution*viewport.width;
canvas.style.height = viewport.height; //showing size will be smaller size
canvas.style .width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport,
transform: [resolution, 0, 0, resolution, 0, 0] // force it bigger size
};
// Render PDF page
page.render(renderContext);
});
enter code here
Hope it helps!
This code will help you, my issue was pdf was not rendering in crisp quality according with the responsiveness. So i searched , and modified my code like this. Now it works for rendering crisp and clear pdf according to the div size you want to give. `var loadingTask = pdfjsLib.getDocument("your_pdfurl");
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 container = document.getElementById("container") //Container of the body
var wrapper = document.getElementById("wrapper");//render your pdf inside a div called wrapper
var canvas = document.getElementById('pdf');
var context = canvas.getContext('2d');
const pageWidthScale = container.clientWidth / page.view[2];
const pageHeightScale = container.clientHeight / page.view[3];
var scales = { 1: 3.2, 2: 4 },
defaultScale = 4,
scale = scales[window.devicePixelRatio] || defaultScale;
var viewport = page.getViewport({ scale: scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
var displayWidth = Math.min(pageWidthScale, pageHeightScale);;
canvas.style.width = `${(viewport.width * displayWidth) / scale}px`;
canvas.style.height = `${(viewport.height * displayWidth) / scale}px`;
// 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);
});`
I've got an image that im trying to add to the current camera location of the Screenview ARSCNView session. Whatever I do it seems to put the image behind the current location of the phone camera and i have to move it back to see it. I have the following code:
var currentFrame = SceneView.Session.CurrentFrame;
if (currentFrame == null) return;
var threeVector = new SCNVector3(currentFrame.Camera.Transform.Column3.X + 0.005f,
currentFrame.Camera.Transform.Column3.Y - 0.02f,
currentFrame.Camera.Transform.Column3.Z - 0.05f);
var scaleFactor = imgToAdd.Size.Width / 0.05;
float width = float.Parse((imgToAdd.Size.Width / scaleFactor).ToString());
float height = float.Parse((imgToAdd.Size.Height / scaleFactor).ToString());
var box = new SCNPlane {
Width = width,
Height = height
};
var cubeNode = new SCNNode {
Position = threeVector,
Geometry = box
};
var mat = new SCNMaterial();
mat.Diffuse.Contents = imgToAdd;
mat.LocksAmbientWithDiffuse = true;
cubeNode.Geometry.Materials = new[] { mat };
SceneView.Scene.RootNode.AddChildNode(cubeNode);
Just trying to execute a simple idea of the ARKit paint apps that you see all over the app store now. So the imgToAdd is a snapshot of the scribble that the user has already put onto the screen and this event is fired at the touchended after an image is created from the view scribbled on.
Any ideas on what I need to change to get it to line up with the current view of the camera on the phone?
I have searched and found code that first inserts an image into a Table in a Google Doc.The image however is larger than the desired image space--and so we have to resize the picture by first getting the dimensions of the inserted picture and then reinserting the picture into the table. The code seems to work well except I am left with two pictures the original sized picture and the scaled picture in the specified table location.
My challenge is that when I attempt to delete the first picture after getting the sizing information needed to scale the picture -- nothing ends up being saved. Here is the code:
if(celltext === "%PIC%") {
table.replaceText("%PIC%", "");
table.getCell(row, cell).insertImage(0, image);
sizePic(table,image, row,cell);
}
function sizePic(table, image) {
var cellImage = table.getCell(row, cell).insertImage(0, image);
//get the dimensions of the image AFTER having inserted it to fix
//its dimensions afterwards
var originW = cellImage.getWidth();
var originH = cellImage.getHeight();
var newW = originW;
var newH = originH;
var ratio = originW/origin
var styleImage = {};
var maxWidth = 200;
if(originW>maxWidth){
newW = maxWidth;
newH = parseInt(newW/ratio);
table.getCell(row,cell).clear();
}
cellImage.setWidth(newW).setHeight(newH).setAttributes(styleImage);
}
}
The problematic line is the table.getCell(row,cell).clear(); that even though it occurs after the image is inserted and before the sized image is inserted, it doesn't appear to work that way. Please note that my code is the result of looking at an existing post How to resize image on Google app Script.
I am trying to export openlayers 3 map to PNG.
This example is working well http://openlayers.org/en/master/examples/export-map.html , but the export image width and height are double than the original map canvas.
If the map canvas is 1330x440, I get the exported png image as 2660x880 pixels.
Any idea how to get the export size same as canvas size ?
This is because your device pixel ratio is 2, because you have a HiDPI (Retina) display.
You can either configure your map with {pixelRatio: 1} and get a blurry map, or scale the exported image when ol.has.DEVICE_PIXEL_RATIO is not equal 1:
map.once('postcompose', function(event) {
var dataURL;
var canvas = event.context.canvas;
if (ol.has.DEVICE_PIXEL_RATIO == 1) {
dataURL = canvas.toDataURL('image/png');
} else {
var targetCanvas = document.createElement('canvas');
var size = map.getSize();
targetCanvas.width = size[0];
targetCanvas.height = size[1];
targetCanvas.getContext('2d').drawImage(canvas,
0, 0, canvas.width, canvas.height,
0, 0, targetCanvas.width, targetCanvas.height);
dataURL = targetCanvas.toDataURL('image/png');
}
});
map.renderSync();