I am looking to use ffmpeg.wasm in a serverless Vue app, but have no idea how to integrate it. Ideally I want to use it to stitch together Canvas HTMLElement into a video output that the user can download. If anyone can make a JSFiddle, Codepen or whatever other medium demo, that would be great. Working off of this example I am not sure how to add a Canvas element as a frame to a file and then createURL for the resulting file.
Related
I have a use case where I have to bind the src attribute of the <g-image> tags dynamically. I have learned that I can use javascrpt expressions in v-bind, so I proceeded on. But here's the paradox:
<g-image :src="'~/images/blocks.png'" width="500"/> // does not work
<g-image src="~/images/blocks.png" width="500"/> //works!
Why does one work and the other does not, even though, they shoud evaluate to the same values?
I am planning to then use it as <g-image :src="'~/images/'+imageName+'.png'" width="500"/>
Gridsome documentation
The src attribute and options like width, height and quality must be static values because they are compiled into an object which contains URLs and other information that will be rendered into an img tag
I admit Im not a regular Gridsome user and everything which follows comes from my understanding of Vue/Webpack, Gridsome docs and this issue
g-image is component provided by Gridsome intended to make use of responsive images easier. Most of the job is done during build time - they use some Webpack magic to process Vue templates. If g-image is found, it's src attribute is read and if it contains path to existing local image, they take the image, generate multiple copies of it with different sizes and add srcset attribute which allows the browser to decide which image to download depending on screen size...
Important thing is this is all happening at build time. It means your app is not running which means it is not possible to evaluate any JS dynamic expression used for src (probably based on app state)!
It may seem as using require() (which is Webpack construct which allows some dynamic content) makes it work but you will loose main g-image feature which is automatic generation of responsive image...
This is not an issue easy to solve on Gridsome side (look how old the issue is and how much attention from maintainers it gets). If you really want dynamic responsive images, you will need to use simple img and generate image variants (and srcset) some other way. Or you can use Cloudinary to generate those images on the fly....
Title says it all. I'm developing a Vue app that is going to be used as a display for my instance of Home Assistant. I tell it what JS file to load and what tag to use and HA puts it inside an iframe. The font I'm using is an otf file.
It seems like my component can only use the font when it gets included in the page's section. Since I'm not generating the page or the iframe, I can't add anything to the head. The only thing I can figure out to do is use JS to add the font face to the head after the page is loaded. I've seen a react component do this. Is there a build option or something?
But it is my understanding the whole point of web components is to be able to include a single JS file then use the component. Does this not include fonts or other resources?
I've been asked to use Selenium to write some tests for a website. Several of the pages have graphs on them that are generated by the "chart.js" library. The tests require me to:
Read the size of some of the data values in the chart
Click on certain bars on the chart.
Hover over certain bars and validate the tool tips
The trouble is the chart is implemented as a single HTML canvas element, so there is no DOM for the details of the chart that selenium can manipulate.
You won't be able to access the chart directly using Selenium because there is no DOM, as you noted. There may be a way to access chart data using JavascriptExecutor to run JS commands. I'm not familiar with chart.js but I have written automation against CANVAS elements. I got with dev and talked to them about what I needed access to and they gave me pointers on methods, etc. that I could call to get what I needed. I use the page object model so I ended up writing some Java functions that wrapped around the JS code that accessed the CANVAS.
I am wondering if it is possible (but I have a hunch it's not..) to retrieve the absolute URL of an image that is loaded by a specific CSS class.
For example:
<div class="rabbit">
rabbit in css has a background image... how do I get that background image URL?
The reason why I ask on how to do this in Selenium IDE is because in my company we use it.
I am still googling and since I am not very proficient at JS, I could easily be missing a simple solution!
here's a quick pointer
You'll need to use storeEval to run some js and store the value, so look at the Selenium IDE docs for that
Then the js will be something like this...
getComputedStyle(document.getElementById('hireme'),'').getPropertyValue('background-image');
if you run the snippet above, in the console on this page you should get something like this...
"url(http://careerscdn.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png)"
Which will hopefully be good enough for any asserts you want to make
You'll need to replace the document.getElementById('hireme') with document.getElementsByClassName('rabbit')[0];
Hope this helps, use comments if you need any clarification.
You may also need to add this.browserbot.getCurrentWindow(). before the call to document.getElementById
Hello guys I have two small questions about my facebook application link and JS SDK. So let me explain:
1- Well as I understood from Facebook JS SDK, the should be left just empty. But still I am a little dizzy and I want to make sure whether we should put our page content into it or it should be left empty?
Please make me sure about it.
2- I have put some changes in my css and markup of my page but after one day I can not see some of the changes in my facebook application link.
How can I see the result of changes if there is such a way??
Thank you very much indeed.
Let me answer this for you:
1) Yes, It should be left empty and here's the info on why it's required quoted from JS SDK docs:
The JavaScript SDK requires the fb-root element in order to load properly and a call to
FB.init to initialize the SDK with your app ID correctly.
The fb-root element must not be hidden using display: none or
visibility: hidden, or some parts of the SDK will not work properly in
Internet Explorer.
The SDK inserts elements into fb-root which expect to be positioned
relative to the body or relative to an element close to the top of the
page. It is best if the fb-root element is not inside of an element
with position: absolute or position: relative. If you must place the
fb-root element inside of a positioned element, then you should also
give it a position close to the top of the body or some parts of the
SDK may not work properly.
2) It's most probably a cache problem, there's a similar question with an issue of css which has been answered previously: Caching for css content for iphone FB APP
Also to get your browser/visitors browser to re-fetch your CSS file, The trick is to pass a query param/variable at the end of the CSS file url like so: ?v=1
<link rel="stylesheet" href="css/style.css?v=1">
This will automatically make your browser or maybe even facebook to fetch your CSS file again with the new changes. Make sure to change the number everytime you update your files so you could see the changes instantly.