I have an image and I would like to get the tensor from it.
Some of the images are already on the frontend server be whereas others will be served by the server
To do that, one needs to use fromPixels
In case the image is already displayed in an html page
You can consider doing a querySelector to get the image first and then you can use fromPixels
html
<img id="my-image" src="mydata.jpg">
js
const image = document.querySelector("#my-image")
const t = tf.fromPixels(image)
If the image is not present in the html page, you can use the constructor Image to create it and then pass it as parameter to fromPixels
const im = new Image()
im.onload = () => {
const a = tf.fromPixels(im, 4)
a.print()
console.log(a.shape)
}
im.src = "url-of-the-image"
document.body.appendChild(im)
onload makes sure that the image has finished downloading before converting it to a tensor.
If the image url and the url on which the frontend page is served are different there will be a cross-origin issue when creating the tensor. If the server serves the image with an access control that allows the frontend to retrieve that image, then setting the crossOrigin attribute of the image will solve the issue, otherwise there will nothing that can be done to get the tensor from that image.
const im = new Image()
im.crossOrigin = "anonymous";
im.src = "https://i.imgur.com/lVlPvCB.gif"
document.body.appendChild(im)
im.onload = () => {
const a = tf.fromPixels(im, 4)
a.print()
console.log(a.shape)
}
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/0.12.4/tf.js"> </script>
</head>
<body>
</body>
</html>
Related
I'm trying to use the movie db API to fetch a movie poster and allow the user to put text next to it, then allow them to download that component using html2canvas. The downloaded image works, it has the right colors and text just not the movie. The image fills it's container using a background-image style but I also tried using an img tag but that didn't work either. Here is the download function:
const handleDownload = async () => {
const element = ref.current;
const canvas = await html2canvas(element, {useCORS: true, allowTaint: true});
const data = canvas.toDataURL('image/png');
const link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = data;
link.download = 'image.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
window.open(data);
}
}
this is the error that I'm getting:
Here is what it's supposed to capture:
Here is what it actually captures:
I tried using background-image style for the container and I also tried using an img tag and it was the same error. I also tried setting useCORS to false which also didn't work.
This solution was thanks to #ChristianUnnerstall
The problem was that it was being blocked by cors. I had to add crossOrigin="anonymous" to the img tag that was rendered from the imdb database:
<img
id="chosen-image"
src={
selectedMovieImg
? `${selectedMovieImg}?not-from-cache-please}`
: ""
}
alt="movie poster"
crossOrigin="anonymous"
/>
I had to add ?not-from-cache-please so cors sees it as a different request and it will be rendered to the dom and selectedMovieImg is a variable that holds the imdb link to the resource!
I want to simulate Save Image As when the user clicks on an image.
I read this and this thread but I couldn't find the answer.
I'm using CRA and the image is not on my server. Is there a way where I can achieve this?
Here is a Sandbox:
https://codesandbox.io/s/save-image-as-react-pm3ts?file=/src/App.js
<a
href="https://img.mipon.org/wp-content/uploads/2019/12/14094031/logo-cover-website.png"
download
>
<img
download
alt="Mipon"
style={{ width: "300px" }}
onClick={() => console.log("should trigger save image as")}
src="https://img.mipon.org/wp-content/uploads/2019/12/14094031/logo-cover-website.png"
/>
</a>
The download attribute will not work as intended since Blink engine will block cross-origin <a download>. Checkout Deprecations and removals in Chrome 65.
To avoid what is essentially a user-mediated cross-origin information
leakage, Blink will now ignore the presence of the download attribute
on anchor elements with cross origin attributes. Note that this
applies to HTMLAnchorElement.download as well as to the element
itself.
You may try to draw the image to a canvas element and download its dataURL. But this approach will work only if the requested domain has an Access-Control-Allow-Origin headers that allow shared requests. Images without CORS approval will taint the canvas and you will encounter error Tainted canvases may not be exported download image when you try to use methods like toDataURL(). In that case, you can host the image with services like Cloudinary and the download with canvas approach will work.
Here is a function to download an image using canvas, you may use it in a onclick event handler:
function downloadImage(src) {
const img = new Image();
img.crossOrigin = 'anonymous'; // This tells the browser to request cross-origin access when trying to download the image data.
// ref: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#Implementing_the_save_feature
img.src = src;
img.onload = () => {
// create Canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// create a tag
const a = document.createElement('a');
a.download = 'download.png';
a.href = canvas.toDataURL('image/png');
a.click();
};
}
I'm serving my website from example.org, built with reactjs 16.13.1 and typescript.
I have a component that displays an image like this:
<img alt={""} className={"person-image"} src={person.imageUrl}/>
The person JSON object comes from the backend. ImageUrl is an url that looks like this: https://example.org/api/data/24361/img.jpg. The image is served via a Spring Boot controller.
The image fails to load because for some reason it is rewritten to: https://example.org/example.org/api/data/24361/img.jpg
Why is example.org being repeated?
I inspected the JSON returned from the server and the url is correct: https://example.org/api/data/24361/img.jpg
If I copy paste the url on a browser, it loads correctly, so it's not a reverse proxy problem, or it doesn't seem to be.
If I log the url on the console before it's being passed to <img>, it is correct.
I have some other images being loaded from external domains and they load without any issue.
Is the <img> tag operating some kind of rewriting of the url if the image comes from the same domain and an absolute url is being used? Is there something I'm overseeing?
EDIT: the component code
interface PersonProps {
person: PersonData
clickable?: boolean
}
export function Person({person}: PersonProps) {
const actions = [
new Action(
<><FullscreenOutlined/> Full</>,
() => {
// opens wrong url https://example.org/example.org/api/data/24361/img.jpg
const win = window.open(person.imageUrl, '_blank');
win?.focus();
}
)
]
// prints https://example.org/api/data/24361/img.jpg
console.log(person.imageUrl)
return <Wrapper
actions={actions}>
{/* loads wrong url https://example.org/example.org/api/data/24361/img.jpg */}
<img alt={""} className={"person-image"} src={person.imageUrl}/>
<div className={"person-body"}>
{person.name}
</div>
</Wrapper>
}
i have a requirement where i need to display Base64 string as PDF in lightning component without saving that string as file or attachment in salesforce.
You could use a 3rd party Javascript library that can generate PDF on the client side.
Example with jsPDF
Define a Blob and insert in in a <iframe> :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<iframe id=iframe></iframe>
<script>
var doc = new jsPDF();
doc.text("Hello World", 35, 25);
var blob = doc.output( 'blob' )
var file = new File( [blob], 'a_name.pdf', { type: 'application/pdf' } )
iframe.src = URL.createObjectURL( file )
</script>
What I need is to change the content of og:title in a dynamic way into index.blade.php by using express server. As you know, the only way to change the content of the tags is by using server side rendering because facebook cannot read og tags if they added by react helmet component. So, here what I did:
Into index.balde.php I added these lines:
<meta property="og:title" content="$OG_TITLE">
<meta property="og:description" content="$OG_DESCRIPTION">
Then I created server.js file in order to change the content of the tags dynamically through the server:
var express = require('express');
var app = express();
const path = require('path');
const fs = require('fs')
app.get('/profile', function(request, response) {
console.log("Entered the logic");
const filePath = path.resolve(__dirname, '../views', 'index.blade.php');
// read in the index.html file
fs.readFile(filePath, 'utf8', function (err,data) {
if (err) {
return console.log(err);
}
let result = null;
// replace the special strings with server generated strings
data = data.replace(/\$OG_TITLE/g, 'PROFILE TITLE');
result = data.replace(/\$OG_DESCRIPTION/g, "PROFILE DESCRIPTIONS");
//result = data.replace(/\$OG_IMAGE/g, 'https://i.imgur.com/V7irMl8.png');
response.send(result);
});
});
app.listen(5000, function(){
console.log('listening on *:' + 5000);
});
As a result, when I open www.testurl.com:5000/profile The content of the tags have been changed successfully, but my problem is how to make the content of the tags changed without need to add the port number in url, since the requested link should be without the port number. The user does not need to add port number into the URL.
Is there anyway in react/express to let the server know that when user call www.testurl.com/profile all event listener in the server on port 500 should be called (on other way when access the url without port number app.get('/profile',...) should be called)? Or there is a way to call the url with port number into the basic component to make the event each time user open any page inside the app?
I am really need a help, since i spent a lot of time in order to find a solution. Thanks.