I am trying to render pdf using react-pdf the issue I am facing is that I am displaying image from the backend server using the URL. But it displays blank in the pdf. When I debugged further came to know that when I put breakpoint on the highlighted line the image gets displayed. May be it gets little time to load the image from remote URL ?
<Page size="A4" style={styles.page}>
{this.state.productsToBeExported.map((product) => {
const img = this.getImageSource(product);
//if breakpoint is added here then the images are displayed
return (
<View
key={product.productId}
style={styles.section}
>
<Image
style={{
width: imgWidth + "px",
border: "2pt solid #999898",
}}
src={img}
></Image>
</View>)
});
</Page>
//remote Image Url (Node server)
getImageSource(product) {
return `${URL}/${this.props.timestamp}/${product.productId}.jpg`;
}
PDF OUTPUT
Any help would be much appreciated.
Note: These images are generated in the backend on the fly. So I can't import them.
I ran into the same issue and it seems to be an issue with react-pdf. It seems to be showing files with the .jpeg extension only
Related
I have a page with azure maps, and most of the time it loads normally and the map covers the entire screen. But at some points when refreshing the page, the map is limited to a small size, and if I just refresh the screen or even open the browser console, the size is updated correctly.
<body>
<div id="mapDiv"></div>
</body>
I even created an event in an attempt to make a resize
map.events.add('ready', function () {
setTimeout(function () {
map.map.resize();
}, 1000);
});
Error
enter image description here
when i refresh or open da console
enter image description here
If it is meant to be full screen, make sure to set the width/height to 100% for not only the map, but the html and body tags as well. When you don't specify any styles for the map div, it inherits from it's parents. Try adding this CSS to your page:
html, body, #mapDiv {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
I add several images using fromURL, all from external sites(not sure if that has anything to do with the issues):
fabric.Image.fromURL('<zillow listing image URL>', function (img) {
...scaleToHeight stuff...
...clipPath stuff to do some masking...
canvas.add(img);
});
Output to PNG. Had to use this workaround to get around a chrome frame issue with jsPDF
function debugBase64 (base64URL) {
var win = window.open();
win.document.write('<iframe src="' + base64URL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}
debugBase64(canvas.toDataURL('png'));
....I have tried this PNG export and a few others and it's always the same thing. All of the text and basic shapes show up great, but never the images that I brought in with fromURL. Any advice would be greatly appreciated.
I am implementing this in Vue. I put most everything initially in 'mounted' and was just putting 'console.log(canvas.toJSON());' at the end of the section. Apparently this was still affected by racing, though. Because when I instead added a button to log the JSON it included the image objects as well.
I am generating PDF's server side with an HTML template that gets completed with data from the client and server. The code below works, but:
1) The PDF file is 5x bigger than when it is 'Saved as PDF' on the client side.
2) The PDF is not searchable.
I am assuming both of these problems stem from PhantomJS generating a raster vs. vector based PDF. What should I do differently (hoping I am just missing an PhantomJS option or two...)??
var phantom = require('phantom');
req.body['invoicenumber'] = 15010001;
phantom.create(function(ph){
ph.createPage(function(page) {
page.set('paperSize', { format: 'Letter',orientation: 'portrait', margin: '1cm' });
page.open("html/template.html", function(status) {
page.evaluate(function(data) {
$(function() { populate(data); });
},function() {
var quotenumber
page.render('quotes/'+req.body['invoicenumber']+'.pdf', function(){
ph.exit();
res.send(req.body['invoicenumber']+'.pdf');
});
},req.body);
});
});
})
MINOR UPDATE: Increasing the margin so the page is not scaled up reduces the file size, but still 2.5x the client side 'Save as PDF'...
In the html template try using any of these header tags (h1,h2...h6) to wrap your content. The content inside these headers tags will be rendered as text in the generated pdf. Hence it should be searchable. This will also reduce good amount of pdf file size. Not sure why div, p, table etc tags are rendered as image in the pdf.
Good day.
I use script Imagecropper
Script:
<img src="http://test.com/img/1362244329.jpg" id="yui_img" height="768" width="1024">
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
result:
But if i do not specify the image size, then i get next(see image):
<img src="http://test.com/img/1362244329.jpg" id="yui_img">
result:
And if i specify the wrong picture size, the window will increase the portion of the image:
<img src="http://test.com/img/1362244329.jpg" id="yui_img" height="333" width="500">
result:
How to make in tag image does not necessarily will been to specify its size?
First of all I'd like to point you to YUI 3 since YUI 2 is no longer supported. You shouldn't write new code using YUI 2. There's an ImageCropper component I wrote for YUI 3 that works just like the YUI 2 version in the YUI Gallery: http://yuilibrary.com/gallery/show/imagecropper. Since it copies what the YUI 2 ImageCropper did, it shares these issues with the older version.
What to do when the size of the image isn't specified
The reason why you're getting a small ImageCropper is that you're creating the widget before the image has been fetched and so the browser doesn't know its size yet. What you can do is wait for the image's onload event. You can listen to that event and create the ImageCropper after it fires:
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var yui_img = Dom.get('yui_img');
Event.addListener(yui_img, 'load', function () {
var crop = new YAHOO.widget.ImageCropper(yui_img);
});
})();
Why the ImageCropper doesn't work with images with the wrong size
Neither the YUI 2 ImageCropper nor my YUI 3 version work with images when they don't have the right size. The reason is that both use the background: url() CSS style for showing the image inside the crop area (the non-darkened part of the widget). CSS backgrounds don't let you use a resized/zoomed image.
I plan on using another strategy at some point for the YUI 3 version that will fix the issue. However, you need to keep in mind that the ImageCropper component is designed so that you send the crop coordinates to the server for it to actually crop the image. That means that if you have the wrong size set to the image, the coordinates that the image cropper returns with its getCropCoords method wouldn't be the coordinates that match with the full sized image. Instead you'd also have to send the server the size of the image you've been using and do extra math to crop the image correctly.
In conclusion, you shouldn't use the image with the wrong size. You can fix the size of the image in two ways:
Use the HTML5 naturalWidth and naturalHeight attributes of the image. Those return the real size of the image even if it's resized. Unfortunately these attributes are not yet supported by all browsers.
Create a new image with JS, set it the same src as the image you're using, listen to its load event and get that image's size.
Something like this:
(function () {
var Dom = YAHOO.util.Dom;
var yui_img = Dom.get('yui_img'),
new_img = new Image();
new_img.onload = function () {
yui_img.width = new_img.width;
yui_img.height = new_img.height;
// create the ImageCropper
};
new_img.src = yui_img.src;
}());
A YUI3 version
You can easily do all this with YUI3:
YUI().use('gallery-imagecropper', function (Y) {
var img = Y.one('#yui_img');
img.on('load', function () {
var cropper = new Y.ImageCroper({
srcNode: img,
width: img.get('width'),
height: img.get('height')
});
cropper.render();
});
});
Typo in code. Should be
var cropper = new Y.ImageCropper({
You missed a letter "p".
I'm writing myself a Chrome extension, using Crossrider. It's very simple. It scrapes comments for URLs and replaces them with <img> tags to display the image inline in the comment.
I haven't written in a regex check yet to determine if the URL is pointing to an image, but I have been testing it on a post that has a comment with an image URL.
When the page loads, the image URL is replaced with an <img> tag and the images does display... for a few seconds. Then it turns into a "broken image" icon.
I'm not sure what is happening except that there seem to be two requests for the image, even though my code is only executing once. One of the requests says it's getting 404, but if I click the request in Chrome debug console, it displays the image fine and is the same URL as the request that doesn't get 404.
My code (again I haven't written a regex match to see if the URL points to an image yet):
var $links;
$( '.Mi' ).has('a').each(function(i,e,a) {
$links = $( e ).children('a');
if ( $links.length > 0 ) {
$links.each(function(i,e,a) {
if ( !$( e ).has('img').length ) {
$( e ).html( $('<img/>', { src: $(e).attr('href') }) );
}
});
}
});