I'm trying to find an example of setasign/fpdi code.
I have a pdf document with multiple pages. I want to create a new pdf that imports each page AND adds a background (this background is another pdf doc - portrait or landscape depending on root pdf page) + some extra text to it.
I'm unable to find a correct example for this issue, hope someone can help me with this one.
I found the answer, I will post it here. Maybe there is a better way... :-)
$portrait_backgroundpdf = "pdf/background_portrait.pdf";
$landscape_backgroundpdf = "pdf/background_landscape.pdf";
$originalpdf = "pdf/original.pdf";
// First get number of pages + orientations of original pdf
$temp_pdf = new Fpdi();
$count = $temp_pdf->setSourceFile($originalpdf);
$sizes = [];
for ($pageNo = 1; $pageNo <= $count; $pageNo++) {
$templateId = $temp_pdf->importPage($pageNo);
$size = $temp_pdf->getTemplateSize($templateId);
$sizes[$pageNo] = $size['orientation'];
}
// sizes is now an array like this example:
// [
// 1 => "P", <-- portrait
// 2 => "P", <-- portrait
// 3 => "L", <-- landscape
// 4 => "L", <-- landscape
// ]
// Now start the new PDF
$pdf = new Fpdi();
foreach($sizes as $page => $size) {
$pdf->AliasNbPages();
$pdf->AddPage();
if ($size == "P") {
$pdf->setSourceFile($portrait_backgroundpdf);
} else {
$pdf->setSourceFile($landscape_backgroundpdf);
}
$tplId = $pdf->importPage(1);
$pdf->useImportedPage($tplId, 0, 0, null);
$pdf->setSourceFile($pdfurl.$pastepdf);
$template = $pdf->importPage($page);
$pdf->useTemplate($template, 10, 30, 180);
// Do other pdf stuff here per page
}
$pdf->Output();
Related
I want to set different text color of label in each row SegmentControl programmatically.
Please check my ref. code.
var arrColors = [
{"color":"white"},
{"color":"orange"},
{"color":"blue"},
{"color":"yellow"},
{"color":"gray"}
];
this.view.segCont.widgetDataMap = {lblColorName: "color"};
this.view.segCont.setData(arrColors);
I want to do something like attached image.
Thanks in advance!!
I got solution from kony team.
1) Create different skin for different color label. See below image:
2) Set condition for as per your require color label.
var arrColors = [
{"color": "white"},
{"color": "orange"},
{"color": "blue"},
{"color": "yellow"},
{"color": "gray"}
];
for (i = 0; i < arrColors.length; i++) {
if (arrColors[i].color === "orange") {
arrColors[i].color = {
"skin": "sknLblOrange"
};
} else {
arrColors[i].color = {
"skin": "sknLblGreen"
};
}
}
this.view.segCont.widgetDataMap = {
lblColor: "color"
};
this.view.segCont.setData(arrColors);
Hope this helpful to you. Happy Coding :)
This is fine if your data is finite and static, or if the data array is always the same length, like with a menu.
However, if your data is dynamic you should consider instead this solution:
var arrColors = [
{"skin": "whiteRowSkin"},
{"skin": "orangeRowSkin"},
{"skin": "blueRowSkin"},
{"skin": "yellowRowSkin"},
{"skin": "grayRowSkin"}
];
this.view.segCont.widgetDataMap = {
lblColor: "color"
// plus any other properties you need for this data.
};
// Lets assume this getData function fetches your dynamic data from a service.
var segData = getData();
for (var i = 0; i < segData.length; i++) {
var colorIndex = i % arrColors.length;
segData[i].color = arrColors[colorIndex];
};
this.view.segCont.setData(segData);
The key above is the Modulus/Remainder % operator, which allows you to decide dynamically which of the colors/skins in the skin array to corresponds to each data row, even if the size of the data array varies.
Note: This obviates the fact that the data may be a matrix if you're using segment sections.
i am using Image Intervention and jcrop to crop and resize image in laravel, but having problems. The issue which i think is that , when i save the file width and height is correct according to the selection, but the x & y is not correct, I am completely lost here, dont know what to do , Please help.
I have made but cropping area is wrong.
here is the code example.
// convert bytes into friendly format
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB'];
if (bytes == 0) return 'n/a';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
}
// check for selected crop region
function checkForm() {
if (parseInt($('#w').val())) return true;
$('.setting-image-error').html('Select area').show();
return false;
}
// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
$('#x1').val(e.x);
$('#y1').val(e.y);
$('#x2').val(e.x2);
$('#y2').val(e.y2);
$('#w').val(e.w);
$('#h').val(e.h);
}
// clear info by cropping (onRelease event handler)
function clearInfo() {
$('#w').val('');
$('#h').val('');
}
// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api, boundx, boundy;
function fileSelectHandler() {
// get selected file
var oFile = $('#picture')[0].files[0];
// hide all errors
$('.setting-image-error').hide();
// check for image type (jpg and png are allowed)
var rFilter = /^(image\/jpeg|image\/png)$/i;
if (!rFilter.test(oFile.type)) {
$('.setting-image-error').html('Select only jpg, png').show();
return;
}
// check for file size
if (oFile.size > 10000000) {
$('.setting-image-error').html('Too Big file ').show();
return;
}
// preview element
var oImage = document.getElementById('preview');
// prepare HTML5 FileReader
var oReader = new FileReader();
oReader.onload = function (e) {
// e.target.result contains the DataURL which we can use as a source of the image
oImage.src = e.target.result;
oImage.onload = function () { // onload event handler
// display step 2
$('.setting-image-cropping-stage').fadeIn(500);
// display some basic image info
var sResultFileSize = bytesToSize(oFile.size);
$('#filesize').val(sResultFileSize);
$('#filetype').val(oFile.type);
$('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
// destroy Jcrop api if already initialized
if (typeof jcrop_api !== 'undefined') {
jcrop_api.destroy();
jcrop_api = null;
$('#preview').width(oImage.naturalWidth);
$('#preview').height(oImage.naturalHeight);
}
//Scroll the page to the cropping image div
$("html, body").animate({scrollTop: $(document).height()}, "slow");
// initialize Jcrop
$('#preview').Jcrop({
minSize: [32, 32], // min crop size
aspectRatio: 1, // keep aspect ratio 1:1
bgFade: true, // use fade effect
bgOpacity: .3, // fade opacity
onChange: updateInfo,
onSelect: updateInfo,
onRelease: clearInfo
}, function () {
// use the Jcrop API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the Jcrop API in the jcrop_api variable
jcrop_api = this;
});
}
}
// read selected file as DataURL
oReader.readAsDataURL(oFile);
}
and Controller code is below.
public function image_crop_resize_and_upload($file, $user_id,$width,$height,$x1,$y1)
{
$filename = $user_id . '.jpg';// image file name
$target_path = User::PICTURE_PATH . $filename;//path where to create picture with new dimensions
$img = \Image::make($file->getRealPath());// create the instance of image with the real path of the image
$filetype = $img->mime();//get file mime type
$filetypes = ['image/jpg', 'image/jpeg', 'image/png']; //allowed files types
//if file exists in the target folder, system will delete the file and next step will create new one.
if (File::exists($target_path)) {
File::delete($target_path);
}
if (in_array($filetype, $filetypes, true)) {
$img->crop($width, $height,$x1,$y1);
$img->encode('jpg', 85);
$img->resize($width,$height);
$img->save('uploads/' . $user_id . '.jpg');
return true;
} else {
return false;
}
}
When i have the file the file width and height is correct, but the selection area, x & y is not correct.
Yes , I have got the answer. The problem is very simple the x and y position of image are wrong because it is inside a bootstrap responsive class. the proper solution is just to remove the class . So the image actually dimension will be shown. and than select the are. Thats it.
<img id="preview" name="preview" class="img-responsive"/>
this should be
<img id="preview" name="preview"/>
So my project was to make two gallery pages. I called them "gallery1" and "gallery2".The gallery pages each have 5 thumbnails that act like buttons so when you click on em, it opens an swf of the picture. Now the problem is, it always opens on the top left, i want them to be in the middle of the page. This is the code for gallery1. Gallery 2 is the samething but with different pics. b1-b5 are the thumbnails.Please help.
var swfRequest1:URLRequest = new URLRequest("image1.swf");
var swfRequest2:URLRequest = new URLRequest("image2.swf");
var swfRequest3:URLRequest = new URLRequest("image3.swf");
var swfRequest4:URLRequest = new URLRequest("image4.swf");
var swfRequest5:URLRequest = new URLRequest("image5.swf");
var swfLoader:Loader = new Loader();
function opengal(evt:MouseEvent):void
{
var pTarget:String = evt.currentTarget.name;
if(pTarget == "b1")
{
swfLoader.load(swfRequest1);
addChild(swfLoader);
}
else if(pTarget == "b2")
{
swfLoader.load(swfRequest2);
addChild(swfLoader);
}
else if(pTarget == "b3")
{
swfLoader.load(swfRequest3);
addChild(swfLoader);
}
else if (pTarget == "b4")
{
swfLoader.load(swfRequest4);
addChild(swfLoader);
}
else if(pTarget == "b5")
{
swfLoader.load(swfRequest5);
addChild(swfLoader);
}
};
b1.addEventListener(MouseEvent.CLICK, opengal);
b2.addEventListener(MouseEvent.CLICK, opengal);
b3.addEventListener(MouseEvent.CLICK, opengal);
b4.addEventListener(MouseEvent.CLICK, opengal);
b5.addEventListener(MouseEvent.CLICK, opengal);
To set your loaded content in the middle of your stage, you can do like this :
// store files path into an array
var files:Array = ['image01.swf', 'image02.swf', 'image03.swf', 'image04.swf', 'image05.swf'];
var loader:Loader = new Loader();
// use loader.contentLoaderInfo to listen to Event.INIT
loader.contentLoaderInfo.addEventListener(
Event.INIT, function(e:Event):void {
// center our loader
loader.x = (stage.stageWidth - loader.width)/2;
loader.y = (stage.stageHeight - loader.height)/2;
})
addChild(loader);
function opengal(evt:MouseEvent):void {
// here the pTarget should be between 0 and 4 as an array index
var pTarget:int = Number((evt.currentTarget.name).substr(-1, 1)) - 1;
loader.load(new URLRequest(files[pTarget]));
};
...
I hope this can help you.
You have to position your swfLoader in the middle of the screen.
You can do this with this code:
swfLoader.x = (swfLoader.width - stage.stageWidth)/2; // and the y axis in a similar way
The required width and height properties can be retrieved when the contentLoaderInfo dispatches an Event.INIT.
I have a CKeditor instance (version 4.1.2) with font, size, text and background color buttons in its toolbar, all completely default.
It's created by replacing a <textarea> whose contents are loaded from a database.
When the loaded html contains elements such as:
<h3><font color="red">Big Red Heading</font></h3>
CKeditor is simply stripping away the tags, to leave:
<h3>Big Red Heading</h3>
Whereas, my expectations (according to the docs) were that it should convert this to:
<h3><span style="color:red">Big Red Heading</span></h3>
(It strips tags with size and face attributes also, just the same way).
I haven't changed allowedContent or colorButton_foreStyle, or any other config setting that ought to have any effect on this issue. I've tried removing all custom config (leaving an absolutely default instance of the editor), and it still happens.
Can anyone explain why this might be happening, and how to fix it?
Thanks.
EDIT: The default value of colorButton_foreStyle is set like this in the CKeditor source:
CKEDITOR.config.colorButton_foreStyle = {
element: 'span',
styles: { 'color': '#(color)' },
overrides: [ { element: 'font', attributes: { 'color': null } } ]
};
...which is why I expected it would automatically convert font tags..?
CKEditor hasn't got all possible transformations defined by default. There is a set of them and it will be enlarged in the future, but this specific one wasn't defined yet.
From Advanced Content Filter guide - content transformations:
Currently, we have defined content transformations for only a handful of editor features, but their number will increase in future releases.
So, there are two solutions:
If you want to keep your font tags, then extend the Advanced Content Filter settings by defining config.extraAllowedContent and change the font plugins settings like in HTML output sample.
If you want to automatically transform your font tags to their newer equivalents, then you can add a new transformations. Read more in filter#addTransformations doc.
I got same problem in CKeditor 4. i searched but i didnt get solution. but i need it so i created my own method in js. its working great.
i created ownFunctoin:
function ConvertFontTagToSpanTag(str) {
var startIndex = str.indexOf('<font');
while (startIndex >= 0) {
var endIndex = str.substring(startIndex).indexOf('>');
var subString1 = str.substring(startIndex, (startIndex + endIndex) + 1);
var subString2 = subString1;
var mapObj = {
size: "font-size:",
face: "font-family:",
color: "color:"
};
subString2 = subString2.replace(/size|face|color/gi, function (matched) {
return mapObj[matched];
});
subString2 = subString2.replace(/['"]/g, ';');
subString2 = subString2.replace(/=;/g, '');
subString2 = subString2.replace('font', 'span');
if (subString2.length > 6) {
subString2 = [subString2.slice(0, 6), 'style=\"', subString2.slice(6)].join('');
subString2 = [subString2.slice(0, subString2.length - 1), '\"', subString2.slice(subString2.length - 1)].join('');
}
//Converting Font-size
var sizeIndex = subString2.indexOf('font-size:');
if (sizeIndex >= 0) {
var sizeEndIndex = subString2.substring(sizeIndex).indexOf(';');
var size = subString2.substring(sizeIndex + 10, (sizeIndex + sizeEndIndex));
//Removing Font size
subString2 = subString2.slice(0, (sizeIndex + sizeEndIndex) - 1) + subString2.slice((sizeIndex + sizeEndIndex));
//Adding Font Size
subString2 = [subString2.slice(0, (sizeIndex + sizeEndIndex)-1), ConvertSpanFontSize(size), subString2.slice((sizeIndex + sizeEndIndex)-1)].join('');
}
//end
str = str.replace(subString1, subString2);
startIndex = str.indexOf('<font');
}
str = str.replace(/font>/g, 'span>');
return str;
}
function ConvertSpanFontSize(size) {
switch (size) {
case '1': return '0.63em';
case '2': return '0.82em';
case '3': return '1.0em';
case '4': return '1.13em';
case '5': return '1.5em';
case '6': return '2em';
case '7': return '3em';
default: return '4em';
}
Cheers...! Thank you
I have question about my code.
It is really working weird.... I have no clue why this happens but let me explain. (MY English is bad but I will try my best to explain and give you guys good picture what is going on)
var spaceshipIncoming = document.createElement('audio');
var canvasMS12Main = document.getElementById('canvasMS12Main');
var imgMainMs12 = canvasMS12Main.getContext('2d');
var mainMs12 = new Image();
var number2 = 5;
var formatImage = ".png";
var stopeIncreaseMS12 = false;
function introMenu(){ //509,734,306,345
imgMain.drawImage(mainImg, 6, 8, gameWidth, gameHeight, 0, 0, gameWidth, gameHeight);
audioElement.setAttribute('src', 'soma.mp3');
audioElement.play();
}
function ms12AniAndSound(){
setTimeout("introMS12()",5000);
spaceshipIncoming.setAttribute('src', 'spaceshipIncoming.mp3');
spaceshipIncoming.play();
}
function introMS12(){//78
if(number2 < 78){
number2 = number2 + 1;
}else if (number2 == 78){
stopeIncreaseMS12 = true;
}
var num = new Number(number2);
mainMs12.src = 'ms12IntroAnimation/introMS12-' + num + formatImage;
clearMainMS12();
imgMainMs12.drawImage(mainMs12, 0, 0, gameWidth, gameHeight, 0, 0, gameWidth, gameHeight);
delayMS12();
}
function delayMS12(){
if(stopeIncreaseMS12 == false){
setTimeout("introMS12()",25);
}else if(stopeIncreaseMS12 == true){
clearMainMS12();
}
}
function clearMainMS12(){
imgMainMs12.clearRect(0, 0, 800, 500);
}
I have folder that has animation images, and the each PNG files are named like: introMS12-#. and each # starts from 6 to 78 (so basically it looks like introMS12-6.png, introMS12-7.png, introMS12-8.png.....introMS12-78.png)
When I first load the webpage, it doesn't show animation, but plays only mp3 sound on canvas. However, if I refresh it or press F5, it plays animation..... sometimes it doesn't play animation even if I refresh it. However, if I close the Chrome web browser and restart it and try refresh button, then it starts playing animation..... (it works randomly....)
I have been trying to make this work over 10 hours... but I do not know what is wrong with my code...... pleas help me ! thanks.