When i am using TCPDF to create a PDF, everything works fine with .jpg images. But when ill try to use an .png image, no image is shown, just blank white space. There is no error in any log, and the path for the image is correct.
So if ill use:
$pdf->Image($path.$imageURL, 15, 15, 178, 129, 'JPG', '', '');
Everything is fine, the image is there as expected. But with:
$pdf->Image($path.$imageURL, 15, 15, 178, 129, 'PNG', '', '');
where $imageURL is an PNG image, there is no image in my PDF.
Any ideas?
This page with a lot of examples is very good to start TCPDF
On the example 42 (PHP -> PDF), they use that :
$pdf->Image('images/image_with_alpha.png', 50, 50, 100, '', '', 'http://www.tcpdf.org', '', false, 300);
The doesn't set 'PNG'. I let you try this.
Related
I upgraded to iOS 14 + XCode-beta Version 12 beta 3 and from that moment React Native Image component not render an image from external URL. On Android, the Image component runs still perfectly.
Here is my code on how I calling an image.
const avatarImageUrl = Config.IMAGE_BASE_URL + this.props.data.avatar;
<Image source={{uri: avatarImageUrl}} style={styles.avatarImage}/>
And this is my Config component:
export default Config = {
API_BASE_URL: 'link-to-api',
IMAGE_BASE_URL: 'link-to-api',
// date when Realm database is updated with fresh API data and
bundled with app
BUILD_DATE: '2020-06-18',
};
And styles
avatarImage: {
flex: 3,
width: '100%',
height: '100%',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
backgroundColor: '#cccccc',
width: "100%",
marginLeft: 0,
marginRight: 0,
},
It's there anyone who has the same problem with React Native on iOS14?
Thaks
Robert
You can try few things:
A. Use the following package to fix the issue by running:
npm install --save react-native-fix-image
npx react-native-fix-image
Then rebuild project.
Note: each time after reinstalling node_modules you'll have to run npx react-native-fix-image.
B. Upgrade react-native to V0.63.2 then rebuild the project.
I used solution A.
In my React Native app, I have added an functionality to upload multiple images, which will be stored as image[] including uri.
This works perfectly for Android.
But for iOS, the image[] is created also contains some data but it is entirely different from android. And for uri null value only present.
Please help me to solve this issue.! (Note: Android should not get affected by change.)
Thanks in advance.!
Images Array: (For Android)
[
{ 'file': 'content://media/external/images/media/30993',
'size': 125434,
'uri': 'content://media/external/images/media/30993',
'isDirectory': false,
'md5': '041550fe959f36d1b247bb6b2eaa3272',
'exists': true },
{ 'file': 'content://media/external/images/media/30988',
'size': 541148,
'uri': 'content://media/external/images/media/30988',
'isDirectory': false,
'md5': '39bf35dfcf0852c5412205195a395b29',
'exists': true
}
]
Images Array: (For iOS)
[
{
'file': 'assets-library://asset/asset.JPG?id=C2FBB68D-2012-4696-8648-D8990F72BF77&ext=JPG',
'size': 125434,
'modificationTime': 1552019118.1320686,
'uri': null,
'isDirectory': 0,
'md5': '041550fe959f36d1b247bb6b2eaa3272',
'exists': 1
},
{
'file': 'assets-library://asset/asset.JPG?id=98EBA95A-254E-40F4-8E1D-C355D8795777&ext=JPG',
'size': 541148,
'modificationTime': 1552019117.7241733,
'uri': null,
'isDirectory': 0,
'md5': '39bf35dfcf0852c5412205195a395b29',
'exists': 1
}
]
[Updated]
I need to get the absolute file path from this url 'assets-library://asset/asset.JPG?id=98EBA95A-254E-40F4-8E1D-C355D8795777&ext=JPG' , which is similar to 'content://media/external/images/media/30988'.
Please help me to resolve this issue.!
Thanks in advance.!
I had this exact same issue.
The solution is to set the uri to the 'file' attribute.
This is how you can append the image into formData correctly for both iOS and Android:
let uri = image.file;
// extract the filetype
let fileType = uri.substring(uri.lastIndexOf(".") + 1);
formData.append('uploads[]', {
uri,
name: `photo.${fileType}`,
type: `image/${fileType}`,
});
You can't remove the additional data on the iOS filename "?id=98EBA95A-254E-40F4-8E1D-C355D8795777&ext=JPG'" at this point, otherwise it won't upload. You can remove it at the server side though.
I have a little question about image and preloading in flutter :
How to change the fit value to cover of an image without touching the size of the placeholder ?
Widget primaryVideoImg(img) {
return Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
child: GestureDetector(
child: FadeInImage.assetNetwork(
placeholder: 'res/preloader.gif',
image: 'remote image url',
fit: BoxFit.fill,
)))
],
);
}
As you see in the picture bellow the placeholder take also the whole page.
You can use Stack and some transparent image for placeholder in FadeInImage.assetNetwork to achieve what you want.
For your code it will look something like this:
import 'package:transparent_image/transparent_image.dart';
...
Stack(children: <Widget>[
new Image.asset('res/preloader.gif', fit: BoxFit.fill),
FadeInImage.assetNetwork(
placeholder: kTransparentImage,
image: 'remote image url',
fit: BoxFit.cover,
),
],
);
You can make your own transparent image and attach it to the project.
Or use kTransparentImage presented in transparent_image 0.1.0 plugin:
https://pub.dartlang.org/packages/transparent_image
I find this trick in Flutter cookbook.
For more information look on this link:
https://flutter.io/docs/cookbook/images/fading-in-images
Good Luck!
I am building a Rails 3.2.11 app with Flot. I want to render my Flot charts in PDFs using Prawn. My Flot charts render in the browser fine. I can create Prawn PDFs fine (though not with chart images yet).
I want to use the Flot canvas plugin to render my axes, etc. on the canvas so they are included when I Ajax the image data to the server using the .getCanvas() and .toDataURL() methods, but I can’t seem to get it to work.
I am using jquery.flot.min.js 0.8.0 and jquery.flot.canvas.min.js (no version indicated). In the Chrome console I see that both are loading.
My Coffeescript looks like this:
temp_plot = $.plot $("#barchart"), [
data: $("#barchart").data("bardata")
bars:
show: true
barWidth: (365/12)*24*60*60*1000*0.8
align: 'center'
],
xaxis:
mode: "time"
timeformat: "%b"
tickSize: [1, "month"]
yaxis:
position: 'right'
labelWidth: '40'
reserveSpace: true
canvas: true
barchart_canvas = temp_plot.getCanvas()
I am able to see the Ajax payload and it is indeed the Flot chart canvas, just without the axes, etc. I appreciate any advice. Thanks!
Just to be extra clear, code as Javascript looks like this:
var barchart_canvas, temp_plot;
temp_plot = $.plot($("#barchart"), [
{
data: $("#barchart").data("bardata"),
bars: {
show: true,
barWidth: (365 / 12) * 24 * 60 * 60 * 1000 * 0.8,
align: 'center'
}
}
], {
xaxis: {
mode: "time",
timeformat: "%b",
tickSize: [1, "month"]
},
yaxis: {
position: 'right',
labelWidth: '40',
reserveSpace: true
},
canvas: true
});
barchart_canvas = temp_plot.getCanvas();
UPDATE - SUCCESS
I updated Flot to 0.8.1 and included the jquery.flot.canvas.js file that came in the 0.8.1 .zip archive. (I was getting some strange rendering behavior using plugins from Flot 0.8.0 with jquery.flot.js 0.8.1, so watch out for that.)
Now my axes render on the canvas. Great! My thanks to the Flot gods!
Your options look okay, assuming (I'm not familiar with CoffeeScript) that last bit is supposed to be missing curly braces.
Your Flot version can't be 1.1, though; the latest is 0.8.1, and jquery.flot.canvas.min.js was introduced in 0.8.0. So you're using either the wrong version, or some Flot-derivative that may not support the canvas plugin.
Note that the canvas plugin currently only affects the axes; the legend is still rendered in HTML. Complete support for rendering everything on canvas will come in 0.9.
I've been trying to use the arbor layout. I've tried
layout: {
name:"arbor"
}
and
layout: {
name:"arbor",
liveUpdate: true,
ready: undefined,
maxSimulationTime: 4000,
fit: true,
padding: [ 50, 50, 50, 50 ],
ungrabifyWhileSimulating: true,
repulsion: undefined,
stiffness: undefined,
friction: undefined,
gravity: true,
fps: undefined,
precision: undefined,
nodeMass: undefined,
edgeLength: undefined,
stepSize: 1,
stableEnergy: function( energy ){
var e = energy;
return (e.max <= 7) || (e.mean <= 5);
}
}
In both cases the firebug console reports
arbor is not defined
http://localhost/WS/BioJS/biojs/src/main/resources/dependencies/cytoscape/jquery.cytoscapeweb.layout.arbor.js
Line 76
I'm I missing something?
is there a working example of the arbor layout usage?
You need to include arbor.js in a script tag in your HTML. The file jquery.cytoscapeweb.layout.arbor.js just interfaces arbor with Cytoscape Web. Make sure you use the version of arbor.js bundled in the Cytoscape Web ZIP if you need IE support -- arbor doesn't provide this out of the box.
The reason why arbor.js isn't embedded in jquery.cytoscapeweb.layout.arbor.js is because arbor.js needs to be in its own script tag in order for web workers to work properly. If you concatenate and minify arbor.js with your app's other scripts, arbor's path finding can break or arbor's webworkers could conflict with other webworkers in your app.