Image over canvas in background
Fanfong68 opened this issue · 1 comments
Fanfong68 commented
Is it possible to use background canva and image together. I am going to generate a certificate, so i need a frame and a few rectangles as the background. Below is my code:
background: function(currentPage, pageSize) {
return {
canvas: [
{
type: 'rect',
x: pageSize.width * 0.42,
y: pageSize.height * 0.16,
w: pageSize.width * 0.08,
h: pageSize.height * 0.04,
lineColor: 'black',
},
{
type: 'rect',
x: pageSize.width * 0.84,
y: pageSize.height * 0.16,
w: pageSize.width * 0.08,
h: pageSize.height * 0.04,
lineColor: 'black',
},
{
type: 'rect',
x: pageSize.width * 0.64,
y: pageSize.height * 0.32,
w: pageSize.width * 0.28,
h: pageSize.height * 0.12,
lineColor: 'black',
},
{
image: 'sampleImage.jpg',
width: pageSize.width,
height: pageSize.height,
absolutePosition: { x: pageSize.width * 0.37, y: pageSize.height * 0.001 },
// opacity: 0.3,
// margin: [0, -120, 0, 0]
}
]
};
},
liborm85 commented
You can use stack, example:
var dd = {
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
background: function(currentPage, pageSize) {
return {
stack: [
{
image: 'sampleImage.jpg',
width: pageSize.width,
height: pageSize.height,
absolutePosition: { x: pageSize.width * 0.37, y: pageSize.height * 0.001 },
// opacity: 0.3,
// margin: [0, -120, 0, 0]
},
{
canvas: [
{
type: 'rect',
x: pageSize.width * 0.42,
y: pageSize.height * 0.16,
w: pageSize.width * 0.08,
h: pageSize.height * 0.04,
lineColor: 'black',
},
{
type: 'rect',
x: pageSize.width * 0.84,
y: pageSize.height * 0.16,
w: pageSize.width * 0.08,
h: pageSize.height * 0.04,
lineColor: 'black',
},
{
type: 'rect',
x: pageSize.width * 0.64,
y: pageSize.height * 0.32,
w: pageSize.width * 0.28,
h: pageSize.height * 0.12,
lineColor: 'black',
},
]
}]
};
},
}