I'm trying to generate a PDF following the instructions given in http://railscasts.com/episodes/153-pdfs-with-prawn-revised
I'm able to put a background image on a specific page by doing this:
image "#{Rails.root.to_s}/public/document_assets/1_cover.png", :at => [bounds.left - 30, bounds.top + 50], :fit => [#width, #height]
I also got an image to render on the background of multiple pages at once using:
repeat(2..3) { canvas { image("#{Rails.root.to_s}/public/document_assets/1_bg.png", :at => bounds.top_left, :fit => [#width, #height]) } }
but that renders the image on top of everything else on the page, so no text or other content is visible.
I can't seem to figure out how to set the background image property as described in the Prawn documentation. Does anyone know how to do this?
Thanks!
I figured out the problem. You can set the background option in the PDF class where the margins get set in the railscast example. My issue was that the image I was using was not the right size. When I sized it to 8.5x11" and 72px per inch, it worked.
Related
I am trying to customize the style of Pull-To-Refresh indicator in NativeScript/Vue app. There seems to be no example code for Vue. I tried to place the following code adapted from Angular into , got errors when running the app.
<RadListView.pullToRefreshStyle>
<PullToRefreshStyle indicatorColor="white" indicatorBackgroundColor="blue"/>
</RadListView.pullToRefreshStyle>
Can anybody offer a working example or update the following page?
https://docs.nativescript.org/vuejs/ns-ui/ListView/pull-to-refresh
On a side note, according to doc here:
https://docs.nativescript.org/ns-ui-api-reference/classes/pulltorefreshstyle
Only color and background color can be customized. Is there anyway to get around this change size of indicator?
The only way I can think of is to set both foreground and background of indicator to transparent then use page level activityIndicator.
Just set the attributes on pullToRefreshStyle property
HTML
<RadListView :pullToRefreshStyle="pullToRefreshStyle">
Script
import * as colorModule from "tns-core-modules/color";
data() {
return {
pullToRefreshStyle: {
indicatorColor: new colorModule.Color("red"),
indicatorBackgroundColor: new colorModule.Color("green")
}
};
}
I have a user interface with:
N.1 Push button (used to upload images)
N.2 QGraphicsView (left and right)
N.1 Push button that takes a print screen of the current image loaded on QGraphicsView left
Using the mouse is possible to:
1) zoom-in/zoom-out from the image
2) draw rectangles on the image.
I want to take the print screen of the image according to the zoom-in or zoom-out area I am using. However, once the file is saved it shows the entire image (wrong because I wanted only the enlarged or shrank part) with the rectangles drawn (this is correct).
According to this post QFileDialog was used in a similar way I am trying to do. I successfully used QFileDialog::getSaveFileName() to save the image. However it is not entirely solving the problem.
Below the pushbutton that takes care of taking the print screen of the image in the QGraphicsView left:
void MainWindow::on_addNewRecordBtn_clicked()
{
leftScene->clearSelection(); // Selections would also render to the file
leftScene->setSceneRect(leftScene->itemsBoundingRect()); // Re-shrink the scene to it's bounding contents
QImage image(leftScene->sceneRect().size().toSize(), QImage::Format_ARGB32); // Create the image with the exact size of the shrunk scene
image.fill(Qt::transparent); // Start all pixels transparent
QPainter painter(&image);
leftScene->render(&painter);
image.save(QFileDialog::getSaveFileName(this, tr("New Image Name"), QDir::rootPath(),
"Name (*.jpg *.jpeg *.png *.tiff *.tif)"));
}
The expected result would be saving the zoomed image (zoom.jpg for example) like this:
However when I save the image (zoom.jpg) the result that I am obtaining is constantly the entire image with the drawn features:
So if anyone needs, it is possible to take a print screen of an image no matter what the zoom in. Meaning you can zoom-in and zoom-out and take a print screen.
The following statement will do the job, grabbing the image your present (zoomed in or out status):
QImage image = ui->leftView->grab().toImage();
The only glitch is that the scroll bars horizontal and vertical (depending on the zoom) are also printed in your image. You can avoid that by setting them off right before taking the print screen and putting them back on right after.
Basically my previous function can be better written as follows:
void MainWindow::on_addNewRecordBtn_clicked()
{
leftScene->setSceneRect(leftScene->itemsBoundingRect());
// Setting off the scroll bars
ui->leftView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
ui->leftView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
QImage image = ui->leftView->grab().toImage();
image.save(QFileDialog::getSaveFileName(this, tr("New Image Name"), QDir::rootPath(),
"Name (*.jpg *.jpeg *.png *.tiff *.tif)"));
// Putting the scroll bars back on
ui->leftView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
ui->leftView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
}
Hope this will be helpful in case you encountered my same problem.
I am trying to create a pdf from a webpage using phantomJS. I want the pdf to just be a single page long that is the same height as my webpage. If I don't set paperSize or viewportSize at all then it creates a page that is almost the right height, it is just a little short by about 100px. If I detect page height and use that to set viewportSize I have the exact same problem, it's short by about 100px. Is there a way to get phantomJS to just create a pdf based on the webpage's size? I want it to be exact because the page is a dark colour and it looks really bad to have a big white block at the end of the page (which is what is there if I add a constant to viewport height to make it fit everything in one page).
My code to find height(Note: the height is the same whether I use body or the classname below to find it):
var size = page.evaluate(function() {
var height = $('.export-athlete-detail-report').outerHeight(true);
return {width: 700, height:height};
});
page.paperSize = size;
page.render(reportFile);
Hello i Have uploaded image using ImageResizer
using this code
var instructions = new ImageResizer.Instructions
{
Width = Convert.ToInt32(Newwidth),
Height = Convert.ToInt32(Newheiht),
Format = "jpg",
Mode = ImageResizer.FitMode.Crop,
Scale = ImageResizer.ScaleMode.Both,
};
File.InputStream.Seek(0, SeekOrigin.Begin);
ImageResizer.ImageJob i = new ImageResizer.ImageJob(File, Filepath, instructions);
i.CreateParentDirectory = false;
i.Build();
i have tried using
AutoRotate = true
i still got the image rotated to horizontall
i also tried Rotate=90
the pic was rotated and lost the proportion here is how it looks like after rotate
the resized roteted picture changed it to width=296 height=437 instead of height=296 width=437
the image was taken vertically using samsung galaxy 3 buy when resized it and upload it it show horizonally
here is the original photo taken:
here is how it shown after uploaded:
You haven't posted the diagnostics page, which lists which plugins are installed.
The most likely cause is that you didn't <add name="AutoRotate" /> or new AutoRotate().Install(Config.Current) to install the AutoRotate plugin, and therefore &autorotate=true had no effect.
It's also possible that there's a new form of image metadata that we can't detect yet, but that seems less likely.
Try Autorotate property "True"; It worked for me.
&autorotate=true
My app has a bunch of images stored as blobs in the local SQLite Database. These images are taken with the device camera. I'm using Titanium Alloy, so the image was saved using the .save() method an Alloy Model.
I've started using the TiSocial module that can post an image to Twitter or Facebook. One its parameters is image and it has to be:
a local/remote path to an image you want to share
The image I want to use is set as the image property on an ImageView. The ImageView image is set like this: $.theImageView.image = args.the_image;, where args.image is the image blob, taken from the database collection.
I tried to take this image blob and set it as the image on the TiSocial module initialisation method:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: args.the_image,
removeIcons:"airdrop,print,copy,contact,camera"
});
Alternatively I tried to take use the image saved on the ImageView, like this:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: $.theImageView.image,
removeIcons:"airdrop,print,copy,contact,camera"
});
However neither of these worked, and no image appears in the Tweet or Facebook message dialogs. And no error appears in the console.
On the other hand, if I set the image property to an image saved in the assets folder, then it works just fine. For example:
`image: "an_image.jpg"`
I tried a solution mentioned in the comments below, which was to save the image to Ti.FileSystem, and then read the image from there. However, this still did not work.
You could try sharing remote images this way...
var largeImg = Ti.UI.createImageView({
width : Ti.UI.SIZE,
height : 'auto',
image :'http://www.google.com/doodle4google/images/splashes/featured.png'
});
var imageGoogle =largeImg.toBlob();
// share image
Social.activityView({
status : "Hello world! Take a look at this: ",
image : imageGoogle,
removeIcons:"airdrop,print,copy,contact,camera"
});
then i would suggest to add one field called img_path in your database table because you can not get path from blob so when you store any blob to alloy model then also add its path to that model so you can retrieve it later and can share.
Hope you understand.
I had some luck by saving the file to the Ti.Filesystem, and then later retrieving it and using the .getNativePath() method:
function getImage() {
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, args.alloy_id + '.jpg');
return f.read();
}
var theImage = getImage();
Social.activityView({
text: "Just tried this beer called " + args.name,
image: theImage.getNativePath(),
removeIcons:"airdrop,print,copy,contact,camera"
});