Why is my QR code cropped when extracting with base64? - javascript

im trying to copy the qr code from another windows but the left first line of the qr is missing
Script (renderer.js):
const loadQr = async () => {
const response = await window.loader.loadQr()
// console.log(response)
document.getElementById('qr').src = 'data:image/png;base64,' +
response
}
console.log('Index Loaded')
loadQr()
And my HTML is:
<div class="btns">
<button onclick="loadQr()">Load QR</button>
</div>
<br>
<img id ="qr" width="264" height="264" src="" alt="qr">
<script src='../renderer.js'></script>
And Im also adding a sc so you understand what im dealing with:
https://imgur.com/a/8y5izKx
Thanks in advance :)

Related

How to replace a string with another string in JS?

I am fetching data (html content) from an API and setting it as an dangerioslyinnerhtml in ReactJS. I want to make an image popup using fancyapps/UI and in order to do that, I have to replace this,
<div className="img-parent">
<img className='fancybox' src="" alt="" />
</div>
with this
<Fancybox options={{ infinite: false }}>
<button
data-fancybox="gallery"
data-src={require("source-of-image")}
className="button button--secondary">
<img className='fancybox' src={require("source-of-image")} alt="" />
</button>
</Fancybox>
Any ideas with .replaceAll function in JS?
I tried to explain my problem in details and I want some experienced people to help.
An approach would be to parse the response you are getting as html as explained here:
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(txt, 'text/html');
and then you get the data you need to display your FancyBox components like this:
const images = [];
htmlDoc.querySelectorAll(".img-parent img").forEach(img=>{
images.push({src:img.src, alt:img.alt})
});

What is problem in save files indexedDB in my code

Im just started learning indexedDB and have a task.So i need save 3 pictures in indexedDB and after show this pictures after click on button(1,2 or 3).In this code i save only one pictures but after click button 1 nothing is going.
`
<div class="flexi" >
<img src="" alt=''>
<button id="one">1</button>
<button class="two">2</button>
<button class="three">3</button>
</div>
<script src='./IDB.js'></script>
<script>
let db=idb.open("Gallery",1,(upgradeDB)=>{
let photo=upgradeDB.createObjectStore("Nature"/* ,{keypath:description} */)
})
.then((photos)=>{
let transaction=photos.transaction(["Nature"],"readwrite")
let store=transaction.objectStore("Nature")
let img=new Image();
img.src="img nat/christopher-czermak-AeiXAB8n8Mc-unsplash.jpg"
let BlobUpload = new Blob([img], {type: 'image/jpg'});
store.add(BlobUpload,1)
})
document.querySelector("#one").addEventListener("click",function(){
let bs=idb.open("Gallery",1)
.then((res)=>{
let transaction=res.transaction(["Nature"],"readwrite");
let store=transaction.objectStore("Nature");
return store.get(1)
})
.then((pic)=>{
let imgUrl=URL.createObjectURL(pic);
document.querySelector("img").setAttribute("src",imgUrl)
})
})
`
I think problem in blob file because i use
console.log(imgUrl)
and in console i see
blob:null/e8e0cf8f-0f36-4f3c-b688-029b33b256bf

Python FastAPI: Returned gif image is not animating

Below is my Python and Html code:-
Python:
#app.get('/', status_code=200)
async def upload_file(file: UploadFile = File(...)):
error_img = Image.open('templates/crying.gif')
byte_io = BytesIO()
error_img.save(byte_io, 'png')
byte_io.seek(0)
return StreamingResponse(byte_io, media_type='image/gif')
HTML:
<img src="" id="img-maze" alt="this is photo" style="display: none;" />
function goBuster(file) {
fetch('/', {
method: 'GET',
body: data
})
.then(response => response.blob())
.then(image => {
var outside = URL.createObjectURL(image);
var mazeimg = document.getElementById("img-maze");
mazeimg.onload = () => {
URL.revokeObjectURL(mazeimg.src);
}
mazeimg.setAttribute('src', outside);
mazeimg.setAttribute('style', 'display:inline-block');
})
}
The image is not animating, I checked the generated html and found:
<img src="blob:http://127.0.0.1:8000/ee2bda53-92ac-466f-afa5-e6e34fa3d341" id="img-maze" alt="this is photo" style="display:inline-block">
So the img src is using blob, I guess this is the reason why the gif is not animating, but I have no idea how to fix it.
Update 1
Now I have updated my code to:
with open('templates/crying.gif', 'rb') as f:
img_raw = f.read()
byte_io = BytesIO()
byte_io.write(img_raw)
byte_io.seek(0)
return StreamingResponse(byte_io, media_type='image/gif')
The generated HTML looks same:
<img src="blob:http://127.0.0.1:8000/c3ad0683-3971-4444-bf20-2c9cd5eedc3d" id="img-maze" alt="this is maze photo" style="display:inline-block">
but it gets worse, the image is not even showing up.
error_img.save(byte_io, 'png')
You're converting this image to png. PNG doesn't support animation.
I think you can use:
#app.get('/', status_code=200)
async def upload_file(file: UploadFile = File(...)):
with open('templates/crying.gif', 'rb') as f:
img_raw = f.read()
byte_io = BytesIO(img_raw)
return StreamingResponse(byte_io, media_type='image/gif')
(Posted solution on behalf of the question author, in order to post it in the answer space).
I fixed the problem by:
using the code provided by #VadSim,
change wb to rb
Notice: if you ran the program and then changed wb to rb, the code would have destroyed the original gif image to be a 0 bytes image. This is why it was not working at first.
Now, I have the gif working in html :)

unable to load webcam/video in html

I am using a basic html/javascript script where I load a webcam component.
<html>
<head>
<!-- Load the latest version of TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/mobilenet"></script>
</head>
<body>
<div id="console"></div>
<!-- Add an image that we will use to test -->
<video autoplay playsinline muted id="webcam" width="224" height="224"></video>
<!-- Load index.js after the content of the page -->
<script src="index.js"></script>
</body>
</html>
const webcamElement = document.getElementById('webcam');
async function app() {
console.log('Loading mobilenet..');
// Load the model.
net = await mobilenet.load();
console.log('Successfully loaded model');
const webcam = await tf.data.webcam(webcamElement);
while (true) {
const img = await webcam.capture();
const result = await net.classify(img);
document.getElementById('console').innerText = `
prediction: ${result[0].className}\n
probability: ${result[0].probability}
`;
img.dispose();
await tf.nextFrame();
}
}
This seems to be the correct way to load a webcam as per other answers. However, nothing opens for me. No console logs as well. I am trying this on Firefox.
First of all, simply include the script webcam-easy.min.js in the section of the html file.
and try instead of that js, you will get the web cam output

retrieving gifs from tenor API json

i'm implementing this tenor API into my Site....the thing is that with this function I retrieve a single value single gif...How do I foreach() all of them?
How would need to be the html structure and the javascript loop
JAVASCRIPT/ JSON
function grab_data(anon_id)
{
// set the apikey and limit
var apikey = "*************";
var lmt = 8;
.....
// callback for trending top 10 GIFs
function tenorCallback_trending(responsetext)
{
// parse the json response
var response_objects = JSON.parse(responsetext);
top_10_gifs = response_objects["results"];
// load the GIFs -- for our example we will load the first GIFs preview size (nanogif) and share size (tinygif)
document.getElementById("preview_gif").src = top_10_gifs[1]["media"][0]["nanogif"]["url"];
document.getElementById("share_gif").src = top_10_gifs[6]["media"][0]["tinygif"]["url"];
return;
}
I would have this top_10_gifs variable loaded of content...how do I foreach it?
HTML
<h2 class="title">GIF loaded - preview image</h2>
<div class="container">
<img id="preview_gif" src="" alt="" style="">
</div>
<h2 class="title">GIF loaded - share image</h2>
<div class="container">
<img id="share_gif" src="" alt="" style="">
</div>
Depends on what exactly you're trying to do (which you haven't explained), but something like
response_objects.results.forEach((gifObj, i) => {
if (i >= 8) return;
// do something with each gifObj
document.querySelector('.container')
.appendChild(document.createElement('img'))
.src = gifObj.media[0].tinygif.url;
});
to iterate over all of them.

Categories

Resources