is it possible to make images in a div take the form of a shape or the form inside another image?
Thanks
well only solution i can think of here is to get width and height of image, and then asign those values to the div u want to resize:
var imgWidth = $('#imageid').width();
var imgHeight = $('#imageid').height();
$('#divId').css("height", imgHeight );
$('#divId').css("width", imgWidth);
Related
How can I adjust an image to a button in Tkinter?
Actually i have this :
originalImg = Image.open(currentphotofolderPath + file)
img = ImageTk.PhotoImage(originalImg)
Button(photoFrame, image = img, borderwidth=0, height = 200, width = 200)
The problem the image does not adjust to the button with 200x200
I don't want to resize the image with PhotoImage.resize()
The zoom() function should fix your issue:
Return a new PhotoImage with the same image as this widget but zoom it
with X and Y.
Adding the code line below before instantiating the Button() widget should be helpful:
originalImg = Image.open(currentphotofolderPath + file)
originalImg.zoom(200, 200)
img = ImageTk.PhotoImage(originalImg)
Button(photoFrame, image=img, borderwidth=0, height=200, width=200)
you have a couple of choices, the zoom function as posted by Billal, or you create a resize function:
def Resize_Image(image, maxsize):
r1 = image.size[0]/maxsize[0] # width ratio
r2 = image.size[1]/maxsize[1] # height ratio
ratio = max(r1, r2)
newsize = (int(image.size[0]/ratio), int(image.size[1]/ratio))
image = image.resize(newsize, Image.ANTIALIAS)
return image
which will then resize the Image (not the PhotoImage) to the biggest possible size while retaining the aspect ratio (without knowing it beforehand)
note that the resize method should use less memory than the zoom method (if thats an important factor)
I'm using a canvas to make blur effect on boostrap carousel images. Basically, carousel images are set to background size cover so image will crop according to window size. I want to do the same to the canvas image. Any ideas? Thanks heaps!
This snippet should do the trick.
var aspectheight = h * (canvas.width / w);
var heigthoffset = ((aspectheight - canvas.height) / 2) * -1;
ctx.drawImage(image, 0, heigthoffset, canvas.width, aspectheight);
Where h and w are the width and height if the image being rendered, and image is that image.
I have a situation where i am generating several graphs in web page and showing them in canvas and my requirement is that on click of download button,i should be able to export all canvas images to pdf.
I have successfully done this for single canvas element using html2canvas and Jspdf but cannot figure out how to do the same for all.
I followed this JSFiddle code for generating pdf from Html2canvas and jspdf.
jsfiddle
$(document).ready(function() {
var d_canvas = document.getElementById('canvas');
var context = d_canvas.getContext('2d');
context.moveTo(20, 20);
context.lineTo(100, 20);
context.fillStyle = "#999";
context.beginPath();
context.arc(100, 100, 75, 0, 2 * Math.PI);
context.fill();
context.fillStyle = "orange";
context.fillRect(20, 20, 50, 50);
context.font = "24px Helvetica";
context.fillStyle = "#000";
context.fillText("Canvas", 50, 130);
$('#ballon').draggable();
$('#download').click(function() {
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
});
});
Kindly help,thanks in advance.
It was very simple ,I just changed the argument to this line
html2canvas($("#canvas"), {
Instead of passing seperate canvases and then trying to export them to single pdf rather i kept different canvases in on Div and passed the Div id to the above mentioned line and both canvases were exported to single pdf file
There should be no need to use html2canvas for this. It will only deliver you another canvas element at a cost. You can use the original canvas element and toDataURL() directly with jsPdf.
Example (partly pseudo)
This will collect all canvases in the page and put them in a PDF. The pseudo part is the missing variables for width, deltas, factor etc. But you should get the gist of it.
Note: The size for images must be given in the same unit you're using for the document, so you need to convert pixel positions and sizes into millimeter representation using a pre-calculated factor based on document DPI (not shown here, but this may help).
var x = someX,
y = someY,
dx = somDeltaForX,
dy = somDeltaForY,
i,
canvases = document.querySelectorAll("canvas"),
pdf = new jsPDF('p', 'mm'),
f = convertionFactorFromPixelstoMM;
for(i = 0; i < canvases.length; i++) {
var url = canvases[i].toDataURL("image/jpeg", 0.75);
doc.addImage(url, "JPEG", x * f, y * f, canvases[i].width * f, canvases[i].height * f);
x += dx; // tip: dx could also be based on previous canvas width in non-uniform sizes
if (x > widthOfPage) {
x = 0;
y += dy;
}
}
I love the way Sublime text shows it's product demo on it's home page:
http://www.sublimetext.com/
How can I create a similar demo? All I note is that it is a Canvas element.
Sorry if it's sounds as a basic question. I see it's made on Canvas. Any leads or help in this regard is highly appreciate?
They are using delays and parts of images such as this one (look at the bottom part of the image):
and specify what (rectangular) part of each image renders when, making it look like an animation.
It's a typical texture atlas.
This is the list of the images:
"anim/rename2_packed.png",
"anim/days_169_packed.png",
"anim/command_palette_packed.png",
"anim/goto_anything_packed.png",
"anim/goto_anything2_packed.png",
"anim/regex_packed.png"
And this is how they specify the delay and the image pieces
{"delay":1811,"blit":[[0,0,800,450,0,0]]},
{"delay":48,"blit":[[0,450,400,344,200,36],[66,982,63,15,0,36]]},
{"delay":798,"blit":[]}, etc...
As you see, delay is the time in milliseconds, and blit looks like parameters for drawImage - srcX, srcY, width, height, destX, destY.
Each of the "screens" is kept as a separate variable, like command_palette_timeline, days_169_timeline, goto_anything_timeline, etc. Each containing delay/blit array of objects like the one from the paragraph above.
The actual render code is pretty straightforward, they follow each step in each timeline, with delays between them, and each step is rendered like this:
for (j = 0; j < blits.length; ++j)
{
var blit = blits[j]
var sx = blit[0]
var sy = blit[1]
var w = blit[2]
var h = blit[3]
var dx = blit[4]
var dy = blit[5]
ctx.drawImage(img, sx, sy, w, h, dx, dy, w, h)
}
http://deepschool.kd.io/Pages/Experiments/draw.htm
This is a Image editor I am working on, But it has a bug. Let's say you have created an image a 15x Zoom, when you change the zoom, the image is lost. Why is this? and what is the Remedy?
HTML:
Zoom:
<input type="number" id="zoom" min="1" max="50" onchange="zoomy()">
JS:
var zoomy = function() {
var zoomamount = zoom.value
var canvassize = zoomamount * 16
c.width = canvassize
c.height = canvassize
};
Thanks In Advance
If you want to zoom into canvas, it means you have to redraw it with zoom.
So instead of drawing pixels on click right onto canvas, which is made of pure pixels... You need to first create some representation of your grid of pixels.
var gridOfPixels = [];
Let's say you are ok with static size for now. Make it 8x8 pixels. At start you want to initialize your array:
for (var i=0; i < 8*8; i++) gridOfPixels[i] = 0;
So the grid canvas is ready, now we need to draw it.
function renderGrid() {
for (var y=0; y < 8; y++)
for (var x=0; x < 8; x++)
renderPixel( x, y, gridOfPixels[x+y*8] );
}
You already know how to renderPixel - calculate the rectangle position (posX = x*pixWidth, posY*pixHeight), where pixWidth is canvasWidth/8, etc.. Now you draw all your pixels, using the third parameter for the color.
To finish, you have to connect onclick to put a pixel on grid, and then call renderGrid so the user sees the change.
$('#my-canvas').click(function(e) {
var x = ...;
var y = ...; // calculate the position of pixels from mouse position inside canvas
// dont forget to check that x,y are in the 0-7 range
// dont forget to convert x,y to whole number using parseInt()
gridOfPixels[x+y*8] = 1;
renderGrid(); // update the grid canvas
});
Now, every time you resize the canvas or change some variables, the original canvas content will be saved in your grid, and you can renderGrid() any time you need to. You could even do it in realtime, animating the color of the pixels, etc..
Have fun. :)