Posts

Showing posts with the label image

When new image is created, image.width returns 0

When new image is created, image.width returns 0 The code below says that spike.image.width = 0 . Why is this? I'm probably missing something that is obvious. spike.image.width = 0 class Spike { constructor(x = 200, y = 200) { this.x = x; this.y = y; this.image = new Image(); this.image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIBO-v6hQoEBhzmZ05mKzgYqrsZ0svgsED7IDR4dIVNxc78uc2"; } } const ctx = document.getElementById("canvas").getContext("2d"); const spike = new Spike; console.log(spike.image.width); <!DOCTYPE html> <html> <head> <link href="css/default.css" rel="stylesheet" /> </head> <body> <canvas id="canvas" width="400" height="600"></canvas> <script src="js/main.js"></script> </body> </html> 1 Answer ...
-
Read more

Web page header not resizing to image

Web page header not resizing to image I have placed an image into the <header> section of my web page. The image is sized to be 100% of the width of the browser. Unfortunately the height is bigger than the <header> section. I have tried in my css to set the header height to auto, but it doesn't work, the text of my next section ends up under the <header> image. So far the only way I've found to fix it is to set the direct height of the header, but then I would have to change it for each breakpoint and that gets tedious. <header> <header> <header> Does anyone have any ideas on how I can get the header to fully contain the image without it overflowing on top of the next section? Can you post your code or add link to example? – Steve Mulvihill Jul 1 at 2:26 Works fi...
-
Read more

How can I place an image with the onclick() function from JS

How can I place an image with the onclick() function from JS So I think I know how to do it. I need to get the coordinates of the cursor when the onclick() function is called. The thing is, I'm not sure how I can create a new image when I click. I'm sorry for not showing my attempts. They exist, but basically do nothing. Does anyone know how to do this? Thanks. onclick() edit: Note that the images can't be there to begin with. They have to be created on click. It's simple enough once you get the hang of it. With your JavaScript, append a new <img> tag to the DOM with source of your image. For gathering the mouse coordinates, look at this post (stackoverflow.com/a/23744762/3011082). I can code an answer but I encourage you to try again with this new information. – www139 Jun 30 at 19:35 <img> ...
-
Read more

JavaScript Image Slider with ClickOn Effects and Click Tracking

JavaScript Image Slider with ClickOn Effects and Click Tracking Excuse my n00b question of JS about images and click-ons: I am planning on using this to step through an image array for an image slider, based on this question/answer: //Array of images var Images = ['https://dummyimage.com/100x100/000/fff.jpg', 'https://dummyimage.com/200x200/000/fff.jpg', 'https://dummyimage.com/300x300/000/fff.jpg' ]; //Step counter var step = 1; function gallery() { //change image document.getElementById('Imgs').src = Images[step]; //Or you can use - document.images.slide.src=Images[step]; // is step more than the image array? if (step < Images.length - 1) { // No - add 1 for next image. step++; } else { // Yes - Start from the first image step = 0; } } //When the ready, set interval. window.onload = setInterval(gallery, 2500); But I need to also ask viewers to (1) click on the particular images and record their choices (which image ...
-
Read more

How to change bytes of array into image?

Image
How to change bytes of array into image? I have a csv file, which was extracted from MS SQL database with image column included. My task is to convert the contents of each row in image column into image and save it as image file. Here is the content of a row- https://drive.google.com/open?id=1J_jz5vN8ATxJ5Qw_c8l0qqKFrIee8kHF As the contents length exceeds the limited word count, I uploaded it to google drive. I changed it to bytearray and try to write it to new file and read it as an image but I haven't got the image. https://drive.google.com/open?id=1h-7cRiTWErZzmMJYmc6XmLmeLK982WZR How could I convert that bytearray to the image?? I have tried writing it to new file and reading it with io. I have spent 8+ hours on this and have tried every solutions found on stackoverflow. Please help me find the solution. Here is my code - df = (pd.Series(df['image'])) df = df.dropna() x = df[3] print (x) bytes = base64.b64decode(x) print (bytes) image = open("new.jpeg",...
-
Read more