I'm developing a system in Vue, where it displays an image, and I mark it up, using vue-konva. However, I am not able to transform this image into a blob to send to firebase.
My code is here:
let canvas = document.getElementsByTagName("canvas")[0]
console.log(canvas)
canvas.toBlob((blob) => {
sendFirebase(blob)
}
print:
<canvas width="1280" height="720" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1280px; height: 720px; display: block;"></canvas>
It doesn't show an error message, but it doesn't work.
I think you may not be able to get the image on the 'canvas'.
Related
I'm trying to upload an image in https://my.gumtree.com/postad but it doesn't' work and doesn't give any errors either.
This is how image component looks like.
This is the html source for this component:
<div id="html5_1e23hbscjgte1ni1goba4orb2_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 8px; width: 130px; height: 100px; overflow: hidden; z-index: 0;"><input id="html5_1e23hbscjgte1ni1goba4orb2" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,.jpg,.jpeg,image/png,.png"> </div>
This is the code i'm using. I tried both
const fileInput = await page.$('input[type=file]');
await fileInput.uploadFile('./img1.jpeg');
and
const inputUploadHandle = await page.$('input[type=file]');
inputUploadHandle.uploadFile(...['img1.jpeg']);
But doesn't work.
I also tried using full paths but no luck.
Can someone please point out what is the issue here?
I'm using https://www.npmjs.com/package/opentok-react in my application and creating a publisher and subscriber in a div. This is the css:
#videos {
position: fixed;
right: 0;
bottom: 0;
width: auto;
height: auto;
z-index: -100;
min-width: 100%;
min-height: 100%;
overflow: hidden;
//min-height: 720px;
//margin-left: auto;
//margin-right: auto;
}
#subscriber {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
#publisher {
position: absolute;
width: 360px;
height: 240px;
bottom: 10px;
right: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}
The problem is when I pass the subscriber component the props width 100% and height 100% it doesn't obey, it doesn't do what I expect. I expect it to use the full height and widdth of the div with the #subscriber id selector. However it doesn't. Instead if I pass the props as a px value it works. How can I just make the subscriber video componet fit to the size of the container div based on a percentage?
TokBox Developer Evangelist here.
When creating publishers and subscribers, the Opentok-React library assigns the OTPublisherContainer and OTSubscriberContainer classes to the DOM elements so please use them to style to publisher and subscribers, respectively. You can see this in the library code here:
OTPublisher
OTSubscriber
I've also gone ahead and filed an issue on the repo to improve documentation on styling.
Im working on some CSS with a web app that I am doing, and I have finally got what I want my page to look like encoded in the css.
#searchNavBar {
position: relative;
width: 100%;
left: -53%;
top: -40px;
height: 70px;
}
#searchResultsDoodle {
position: absolute;
left: 0px;
top: 10px;
width: 100px;
height: 50px;
}
#searchResultsSearchBar {
position: absolute;
left: 110px;
top: 10px;
width: 690px;
height: 50px;
}
#searchResultsSearchButton {
position: absolute;
left: 810px;
top: 10px;
width: 100px;
height: 50px;
}
So I've got a navbar type thing along the top, with a picture, search bar, and a button. Actually taken heavy inspiration from google ;)
Things look good now, however, when I do a "ctrl+", increasing the size of the page, the formatting gets thrown completely off, the search bar drawn to the center of the page, etc... is there any way to write the CSS for this code such that, in the event I increase or decrease the size of the page, the things on the page will attempt to stay as close as they can, proportionally speaking, to the locations that I initially wanted them on the page?
In a CSS file for a script I bought I am seeing three lines that have me somewhat worried:
.h5video .control-panel { height: 45px; width:100%; line-height: 45px; bottom: 0px; left: 0px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAtCAYAAABvewHEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEdJREFUeNpiYGBg2Mzg6+v7iunu3bt/mIBcBqb///8jE//+/cPOJZaFkwDbxggEIOI/iGCAE4wQFhAw4GIxYZWFcSEGAAQYAB5zRmw2StEiAAAAAElFTkSuQmCC") repeat-x scroll 0 0 transparent; position: absolute; }
.h5video .control-panel .seek-bar-guage { height: 7px; background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAAAAAAdccqdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUCB1j+M/0g+kr02emj0D4mekrAD41B7hJ9Jz5AAAAAElFTkSuQmCC") repeat-x scroll 0 0 transparent/* #C9DD1A */; width: 0%; left: 0px; z-index: 2; position: absolute; z-index: 0; }
.h5video .control-panel .seek-bar-buffer { height: 7px; width: 0px; top:0px; left: 0px; position: absolute; z-index: 0; background: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACFJREFUeNpiyMrKYvrz5w/Tr1+/wPjnz59w/Pv3b4AAAwBFtxXP00sbFwAAAABJRU5ErkJggg==); }
These all show Base64 in the coding and I'm trying to figure out what it actually should be showing there. Can anyone help with this?
What you are seeing are base64 encoded images. You can decode them and have them written to files with a .png extension to see their contents. The advantage of base64 encoded images within the CSS is that they can reduce the number of requests that the browser has to make to the web server for loading a page.
I am developing a cross-browser extension (add-on) that sits on the right side of each page. Right now, I overlay the sidebar on top of each page. But I'd prefer to have it sit on the side of each page on its own, not hiding any part of the parent page. I've been searching around for an answer to this with no luck. There seems to be built-in methods for creating sidebars in some browsers. But I am looking for a technique that involves only html and css (and jquery if need be).
As an example of what I'm looking for, the google Related extension sits at the bottom of each page but actually pushes up the page's content when it loads.
The Widgya add-on is part of the parent page's content, and you can see how Google Related pushes it up to avoid intruding on the page. This is the relevant html from the Related extension:
<div style="clear: both; height: 46px; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; "></div>
<iframe class="grelated-iframe" frameborder="0" id="grelated_iframe_189" src="http://www.gstatic.com/webgps/grelated_0_6_9/html/grelated_bar_iframe.html" style="z-index: 2147483647; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; vertical-align: baseline; position: fixed; bottom: 0px; left: 0px; right: 0px; top: auto; width: 100%; height: 49px; " scrolling="no"></iframe>
Using a div that invokes 'clear: both' and an iframe that is absolutely position, the effect is achieved. But I cannot seem to reproduce this effect on the right or left side of the screen. I've tried various methods with no success. I'd appreciate any insight into an approach to take.
Thanks
Update:
Here's the effect I'm trying to achieve:
Chrome has/had an experimental sidebar api, but I need the capability to do this in css & html without relying on a browser-specific api.
Do you mean "position: fixed"? I dont think "clear: both" could make the bar fixed on a certain position when scrolling.
A simple example is the notification bar on
http://chat.stackoverflow.com/