I'm trying to upload a local image to a konvajs stage and then erase parts of the image that are not needed. My upload works well and the draw/erase work but I'm unable to erase the uploaded image. I can only erase the draw line over the image.
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
I have created a jsfiddle: https://jsfiddle.net/tommy6s/L3f27mch/
I read two stackoverflow posts similar to mine that featured a round eraser tip but I still could not figure out how to get mine to work.
Any help is appreciated. Thank you.
For this demo I was using separate <canvas> element for drawing canvas.
You can draw your image directly into canvas via context:
img.onload = function() {
context.drawImage(img, 0,0, width/2, height / 2)
layer.draw();
};
Demo
Related
I'm currently working on creating pdf files with jspdf and the AutoTable plugin.
My plan is to create a table like this:
I have the images as local urls, and I'm trying to add them to the pdf using the new Image and adding them as .src to the image.
When I directly run the jspdf.addImage function with the image, the images display correctly.
But I'm struggling to get the correct scaling to work. So I wanted to use the width and height properties from the image, but for this to work you need to wait for the image to load.
I tried to use the onload function, but it stops rendering the table in general, because it skips over the function and continues with the next table before the images load.
If you have any suggestions of how to get something like this to work it would be greatly appreciated. The images all have variable resolution and need to be scaled down to properly fit in the table. I'll paste my working code (but without the height and width scaling) below.
doc.autoTable({
head: [{comments: 'Photos'}],
body: body,
styles: {
lineColor: [0, 0, 0],
lineWidth: 0.4,
},
headStyles: {
fillColor: [191, 191, 191],
textColor: [0, 0, 0],
},
didDrawCell: function (data) {
if (data.section === 'body') {
console.log(data);
const image = new Image();
// image.onload = function() {
// console.log(this);
// const width = this.width;
// const height = this.height;
// console.log({width, height})
// doc.addImage(
// this,
// 'JPEG',
// data.cell.x + 5,
// data.cell.y + 2,
// )
// }
image.src = QuestionPhotos.link(photosObject[data.cell.raw])
doc.addImage(
image,
'JPEG',
data.cell.x + 5,
data.cell.y + 2,
)
}
}
The commented out part of this code was my other attempt where I would add the image after it was loaded, but this made the image not appear at all in the pdf.
I have been able to solve most of my question using the following functions:
The scaling I was able to fix by storing the width and height together with my images. I then set my height to be fixed (in my case 80mm) and calculated the width like this: photo.height / photo.width * 80.
I tried the other functions Ihsan mentioned, but without any luck.
The didDrawCell is used for inserting the images after the cell has been drawn. willDrawCell draws the image behind the table. didParseCell will insert the images in the top corner of the page instead of in the table itself.
I also initially used the didParseCell to increase the size of the cells to be the correct size for the images, but later on changed this to adding the style when creating the body of the table.
body.push([{content:'', styles: {minCellHeight: height + 10}}]);
I kept track of the row index to know at what rows to insert the image and so that the sizing is correct.
I am using ESRI basemaps with Mapbox-GL-JS. I am trying to capture a screenshot of the map using the following code:
this.map.getCanvas().toBlob(function (blob) {
canvasContext.strokeStyle = '#CCCCCC';
canvasContext.strokeRect(leftPosition, topPosition, width, height);
var img = new Image();
img.setAttribute("crossOrigin", "anonymous");
var srcURL = URL.createObjectURL(blob);
img.onload = function () {
canvasContext.drawImage(img, leftPosition, topPosition, width, height);
URL.revokeObjectURL(srcURL);
};
img.src = srcURL;
});
I am not able to figure out why the attribution on the Map is not getting captured in the screenshot. I understand that here I am just trying to get the canvas of the map. I even tried adding text elements to the map canvas and that doesn't work either. I have markers & routes, which get in the image correctly. I also tried using the Mapbox basemap and try the same, but faced the same issue.
Any help is highly appreciated!
map.getCanvas() will only return the Map's canvas not any of the HTML Elements which sit over the map like the controls, Mapbox logo or attribution text. Sam Murphy has been working on an example showing how to capture the Map including the Logo and Attribution text to an image which you can see at https://github.com/mapbox/mapbox-gl-js/pull/6518/files.
Since we can't easily capture an HTML Element to an image in JavaScript the attribution text is re-created in a canvas drawn into the Image.
Here is the problem :
I have a canvas, and four (would be more in future, but 4 for testing...anyway, doesn't matter) images that can be "poped" into the canvas by clicking on it.
Each image can be present multiple times in the canvas.
So far, poping is working fine, images are draggable... But I can't add some resize or zIndex function as I can only select the last image add to the canvas.
In a ideal world, I would like, by clicking/dragging an image, put it on top of the canvas, and kinda "select" it, so that I can connect the resize functions to the image.
But with the array of images, I can't manage to identify properly the item dragged, and can't use (or don't manage to use) the selectors.
Thank you.
EDIT : some code
var imgCpt = 0;
var image = [];
function addDetails(img) {
imgCpt++;
var imageObj = new Image();
imageObj.onload = function() {
image[imgCpt] = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
id:image[imgCpt]
});
image[imgCpt].setX((stage.getWidth()/2) - (image[imgCpt].getWidth()/2));
image[imgCpt].setY((stage.getHeight()/2) - (image[imgCpt].getHeight()/2));
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
layer.add(image[imgCpt]);
stage.add(layer);
};
imageObj.src = 'uploads/'+img;
}
I've already tried different solutions : multiple layer, and acting on it instead of acting on image, working with shapes filled with image instead of image, but it's always the same problem : I can't get the id of the concerned element (instead of the id of the last insert element)
This version works with array, but I tried yersterday to build the image id with eval(); without more success.
Thank you for your help
EDIT² : sorry to insist, but I would really be glad to have some assistance on this point, even if I think it's more JS related than pure KineticJS related.
Thank you.
Ok Guys, just solved the problem :
eval("image["+imgCpt+"].on('click', function() {alert("+imgCpt+");});");
Instead of :
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
Now time to set a true action behind the click.
Thank you for helping ;)
I'm want to make an application for Galaxy Tab, that allows me to draw pictures... Something similar to MS Paint (don't ask my why :)) so the first steps are:
win = Ti.UI.createWindow({
backgroundColor: 'black',
exitOnClose: true
});
image = Ti.UI.createImageView({
width: 200,
height: 200
});
image.addEventListener('touchmove', function(e){
//And here I need somehow to draw a pixel on image at e.x, e.y coordinates
// How can i do it?
});
So, how should i draw a pixel?
sorry I have not read you full Question.
try This, this is a Titanium Appcelerator Module and this is absoultely free
It have also a easy example. You can use easy.
Again Really Sorry..
I have a main view, then on that view I have, as children, two labels and an image. I want the labels to flow one after another from the top of the screen and I want the image at the bottom. I get the labels to flow properly by setting layout:'vertical' in the main window. But once that is done, I can't seem to force the image to the bottom. Here is a snippet of my code:
var self = Ti.UI.createView({
backgroundColor:'#fff',
layout:'vertical'
});
var l1 = Titanium.UI.createLabel({
text:quote,
color:'#000',
shadowColor:'#ddd',
shadowOffset:{x:2,y:2},
font:{fontFamily:'Marker Felt',fontSize:24},
top:20,
left:15,
right:15,
height:'auto'
});
self.add(l1);
var l2 = Titanium.UI.createLabel({
text:author,
color:'#000',
shadowColor:'#ddd',
shadowOffset:{x:2,y:2},
font:{fontSize:16},
top:10,
left:15,
right:15,
height:'auto',
textAlign:'right'
});
self.add(l2);
var imgView = Titanium.UI.createImageView({
image:myimage,
setBottom:10,
height:100
});
self.add(imgView);
I have tried setting the image layout and that doesn't work. If I change the 'self' window layout to 'absolute' then I can't seem to get the labels to flow cleanly after one another. The first label is of variable height so I need them to follow each other.
I am using Titanium 1.82.
Thanks. In advance.
You might need to add another view. The 'base' view would have what you are calling 'self' added at top:0 and height: 'auto'
Then add imgView to 'base' with bottom: 10 (not setBottom like you have).
Just set the bottom:0; position: fixed; i think this will help u to set the image bottom of the screen.. If it still not working means try with Html,Css and Javascript for design it will be very easy.