For a project I need to load a pdf file onto a div. On clicking a button a canvas will be opened where the user will draw his signature and then on clicking the add button present in the canvas, the user should be able to place the canvas signature as an image on to the pdf. At last on clicking the final button the image should get merged onto the pdf.
I did the above task in the following way:
Converted pdf into series of images using GhostScript.
Loaded the converted images onto a div.
On clicking the button a canvas will be opened and the user will sign in it and on clicking the add button present in the canvas, the user will be able to place the image onto the image of pages loaded in the div.
I obtain the page Id which is the page number and the signature image placed coordinate using e.clientX and e.clientY.
Then I pass all those 3 values to a php script which uses fpdf and fpdi to merge the image onto the pdf.
I'm not able to place the image properly because e.clientX and e.clientY makes use of pixel as units where as fpdf uses mm as units. I'm trying to sort out that.
Is there any other way to do this in a simpler way. i.e., directly loading the pdf onto the div and merging the signature instead of what I've explained above.
You may try Firefox's PDF.js, which you can make use of, in your project. A sample code would be:
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
There are Javascript-Libraries like Mozillas pdf.js that render PDF-Files directly in the browser into a canvas. That might be a possibility to circumvent the image-rendering process. But as far as I know those libraries have problems with CMYK-PDFs. Therefore the safe way would be to do the image rendering.
As for embedding the signature into the pdf I can't see any other way then the one described by you. The aforementioned libraries all are only displaying the PDF-file so they can not write into the PDF.
Hope that helps
You can look at Applidok PDF service, which allow to have signature area, so that form user will have the chance to either upload signature image, or to draw it on a canvas, so that it get merged on his custom PDF document generated at end.
An example is online at http://pipnee.com/P398D433C .
Related
Background
Hi there, I have been recently working on a project of mine which allows users to login and signup to the system. This has been done in PHP. Once the user logs in to the system I have allowed them to upload a profile picture. The upload works and the profile picture displays.
What I would like to happen
I want to allow the user to crop the image they have uploaded to a 150x150 image so that it fits nicely when shown on the page.
What have I already tried
I have uploaded the image as normal and used GD from PHP to crop the image. When this happened, the image didn't crop to where I think the user would have wanted to crop it. The subject of the image was on the right like this example: https://i.pinimg.com/originals/29/a1/9b/29a19bb78244f8a7229fa13c21dbcd50.jpg
In this example I think the user would have chosen the tree as the subject. (I know I can select a crop area but I will not know where the subject of the image is hence my question)
What I have achieved so far
Here is an image of what I have created so far:
The slightly opaque overlay over the image is what I want the cropped area to be. This area is draggable using js. I have managed to choose the direction of the image using JS.
Here is the function that moves the overlay when a user clicks and drags it:
function elementDrag(e)
{
e = e || window.event;
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
// decides which direction is allowed for dragging
if(width > height)
{
//landscape
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
//elmnt.style.left = (l+p_dims.left) + "px";
}
else
{
//portrait or sqaure
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
//elmnt.style.top = (elmnt.offsetTop - (t+p_dims.top)) + "px";
}
}
This is the area where I would potentially like to change it so that overlay doesn't go past the image dimensions on screen
What I have failed to do
I wanted to make the draggable overlay only over the area of the image and not the whole page. Once the overlay has been placed the user should be allowed to click the crop button to crop the image. I know how to crop the image using a crop area in PHP and upload it afterwards.
I did find this js library but not keen on using it, I will though if it is a last resort. https://github.com/Foliotek/Croppie
So how do I do this without using any PHP libraries if possible? Thanks in advance.
I've been dealing with something like this. Croppie seamed like a very viable option. I tried it out and it works wonders. Have been using it every since. Great little tool. Highly recommend you use it.
Is it possible to load a div if a mobile is detected or if a resolution is lower than 641px?
I have different menus for desktop and for mobile. Mobile menu uses image svg sprite, but for desktop i don't want that svg image to load to save HTTP request.
I can hide the div based on media queries, but how can i at least prevent the image from being loaded, or load the intire menu div only for mobile?
What is the best approach to this?
You can prevent the image from being loaded in certain condition's
$(document).ready( function() {
if(yourCondition){
$("img").removeAttr("src");
}
});
https://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect
check above link, you can just use it in if else statement to show hide div on basis of device type
<?php
// Written By Adam Khoury # developphp.com - March 26, 2010
// PHP swapping CSS style sheets for target device layouts
// Make your index page of your site a .php file instead of .html
$styleSheet = "default.css";
$agent = $_SERVER['HTTP_USER_AGENT']; // Put browser name into local variable
if (preg_match("/iPhone/", $agent)) { // Apple iPhone Device
// Set style sheet variable value to target your iPhone style sheet
$styleSheet = "iphone.css";
} else if (preg_match("/android/", $agent)) { // Google Device using Android OS
// Set style sheet variable value to target your Android style sheet
$styleSheet = "android.css";
}
?>
above code is simply taken from http://www.developphp.com/view_lesson.php?v=310, check the complete code if you want.
If your biggest problem is to prevent loading some images if not needed I would recommend to stay with media query.
If you load different css-files (depending on media) you can add the needed images as "background-image:".
This should also work for SVG Spite.
How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability
Simple question with yes/no answer and if yes...then how?
Suppose you have an HTML page with an image on it without any sort of watermark.
Is it possible to place a watermark on that image if a user saves it to their computer?
I need a simple function that watermarks an image upon download or save...
I do understand that once the image loads in the browser, it is technically downloaded, so is there a way to display the image without a watermark on screen, and if the user opens browser cache, he/she finds a watermarked copy?
If anybody has done this using any platform (PHP, GD, jQuery, etc.), your contribution would be appreciated.
One trick might be to combine 2 images, so they become one.
I have image A:
Then I add image B (watermark version)
So when you display the image for the user you use one as background and the other one as image, so when user tries to download, they will get only one part. Of course as already mentioned, the user will be able to get all they can see on the screen, but most users won't be able to combine the images properly.
Please note that the image on top must be transparent.
I would recommend doing this server side and cache the modified images when you have cut out the watermark
Here you can read how to do it with PHP: http://www.sitepoint.com/watermark-images-php/
I personally don't think that it is possible with javascript, because as you already have said yourself, it is already downloaded.
But don't nail me on that.
On the server side it is for sure possible, as you can see in the above link.
A possible alternate solution is to contain the image inside an element with a hidden overflow.
For example:
Your image has a height of 200px, you add an extra 20px watermark (when uploading) at the bottom of the image (so it isn't actually on top of the image). So the total image now has a height of 220px; but you place it inside an element give that element a 200px height and a hidden overflow.
You can change the source of the image when a user right-clicks it. This way you can change the source to the watermarked version when the user tries to save the image.
Yes, the user will already have the non-watermarked version in their cache, but only advanced users are going to know how to get to those images.
$('img').on('mousedown', function (event) {
//check which mouse button was clicked, 1 == left, 2 == middle, 3 == right
if (event.which == 3) {
//update the source of this image
this.src = this.src.replace('.jpg', '_watermarked.jpg');
}
});
Here is a demo: http://jsfiddle.net/s6A9m/
Anything that the user can see they can take. There is no way to watermark ONLY if downloaded. When an image is displayed in the browser it has already downloaded.
There are several approaches you could take. I would recommend you use PHP to add the watermark to the image before it is displayed. This means that all protected images on the site will display a visible watermark. A second approach I have seen used is to display a low quality version that is not watermarked, but restrict the full quality version to only those who are supposed to see it.
Yes it is possible. All you have to do is,
Call the download function, in which we can implement the downloading of watermarked images.
I have used AngularJS, HTML, JQuery and watermarkJS which you find here(http://brianium.github.io/watermarkjs/)
HTML:
Download Sample
Javascript:
$scope.selectedWatermarkType = 'Text';
$scope.selectedPosition = 'Bottom-left';
$scope.text = 'Sample Watermark';
$scope.size = '45';
$scope.selectedFont = 'Arial';
$scope.ColorCodeGlobalObj.colorcode = 'ffff';
$scope.DownloadSample = function () {
if ($scope.selectedWatermarkType == 'Text') {
if ($scope.selectedPosition == 'Bottom-left') {
watermark(['/assets/js/node_modules/watermarkjs/examples/img/shepherd.jpg'])
.image(watermark.text.lowerRight($scope.text, $scope.size + 'px ' + $scope.selectedFont, '#' + $scope.ColorCodeGlobalObj.colorcode, 0.5))
.then(function (img) {
saveImageAs(img);
});
}
}
'img' is the watermarked image object which can be used to download the image.
function saveImageAs(imgOrURL) {
imgOrURL.src.replace('image/png', 'image/octet-stream');
if (typeof imgOrURL == 'object')
imgOrURL = imgOrURL.src;
var link = document.createElement("a");
link.setAttribute("href", imgOrURL);
link.setAttribute("download", 'watermarkSample.png');
link.click();
}
This code performs download of watermarked image. Still the unwatermarked image is available in the mentioned srcpath which can be appended to an 'img' tag and can be viewed.
Hope this helps !
I need to get the window height and width of the browser using ATK4, the lightweight php framework with jquery
The javascript to get this would be
$(window).height();
$(window).width();
As agiletoolkit integrates with jquery, i think it should be possible to get it with something like
$height=$p->js()->univ()->_selectorWindow()->height();
but this doesnt work, instead when i pass the $height variable to be used, in the HTML source i get the following .
'height':$(window).univ().height(),'width':$(window).univ().width()
and it doesnt display the element at all
I want to be able to call jqplot to set the width of a graph to the full width of the users browser on a particular page. To do this, i need to pass a parameter which is width:NNN where NNN is the number of pixels wide. As far as i know, jqplot doesnt support a parameter as a percentage so i cant say width:100%. Also, if i set a div on the page and add the graph, it also ignores the size of the div and creates a small graph 400 x 300 pixels only.
I created a plugin to use jqplot from atk4 but this is one of the issues I still need to resolve. I can pass a height and width as parameters without issue but i want it to default to the full screen size if no parameters are specified.
Can anyone suggest the right syntax for getting these values ? TIA.
what you should understand is that "$p->js()->_selectorWindow()->height();" will actually be translated to "$(window).height();" -- but you can get width of window ONLY at client side.
so, if you want to get height of the window in your code, you can do that only by using ajax request, where actual heigh is sent back from the frontend.
please, rephrase your question so that it's clear what you need height for so I can suggest best way of doing that.
example of how to get backend and frontend interlinked:
paste this in page/test.php and open up http://example/test to see in action
class page_test extends Page {
function init(){
parent::init();
$b=$this->add("Button");
$b->set("Get Width");
$b->js("click")->univ()->ajaxec($this->api->getDestinationURL(), array("width" => $this->js(true)->_selectorWindow()->width()));
$v=$this->add("View_HtmlElement")->setElement("div")->set("Click button to get width of the window");
if ($w = $_POST["width"]){
$v->js(null, $v->js()->html("Width: " . $w))->univ()->alert("Width: " . $w)->execute();
}
}
}
Basically I have a slightly non-standard implementation of FancyBox. By default you have to include a link to the large version of the image so that the Lightbox can display it. However, in my implementation, the image link URLs point to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg" rel="gallery">
I have:
<a href="mysite/photos/view/abc123" rel="gallery">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$this->renderPartial('_photo', array('photo'=>$photo, true));
}
}
The "$this->renderPartial()" bit simply calls a layout file which includes a standard HTML tag to output.
Now when the user clicks on a thumbnail, the above function is called and the large image is displayed in the Lightbox.
Now if the user right clicks on the thumbnail and selects "open in new tab/window" then the image is displayed in the browser as per normal, i.e. just the image. I want to change this so that it displays the image within a layout.
In the above code I can include the following and put it in an IF statement:
$this->render('photos', array('photo'=>$photo));
This will call the layout file "photos" which contains the layout to display the image in.
I have a specific limitation for this - the image URL must remain the same, i.e. no additional GET variables in the URL. However if we can pass in a GET variable in the background then that is OK.
I will most likely need to change my function above so that it calls a different file for this functionality.
EDIT: To demonstrate exactly what I am trying to do, check out the following:
http://www.starnow.co.uk/KimberleyMarren
Go to the photos tab and hover over a thumbnail - note the URL. Click the thumbnail and it will open up in the Lightbox. Next right click on that same thumbnail and select "open in new tab/new window". You will notice that the image is now displayed in a layout. So that same URL is used for displaying the image in the Lightbox and on its own page.
The way StarNow have done this is using some crazy long JavaScript functionality, which I'm not too keen on replicating.
The html link should point to the layout showing the image on a new page by default, e.g.:
<a href="mysite/images/show/123" rel="gallery">
Before the lightbox opens, append a query string to the url in order to distinguish it from the normal link and load the layout for the lightbox. As soon as the image is loaded in the lightbox, change the link back to its original state.
$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
var el = $(selectedArray[selectedIndex]);
el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
var el = $(currentArray[currentIndex]);
el.attr('href', el.attr('href').split("?")[0]);
}
});
You will then have to process the following link in order to return the lightbox layout:
<a href="mysite/images/show/123?mode=lightbox" rel="gallery">
You should be able to modify the JavaScript function that generates the HTML with the <img /> tag to link the image to such a page. Although, if you are trying to make it so that selecting "Open image in new tab" opens a page like this, then that might be impossible (unless there is some sort of crazy cookie/session implementation to alternate between the image script just passing an image and generating a page, which I think could be possible). To assign a new href for the link to have when you click "Open link in new tab" should be quite possible by just modifying the JavaScript function.
Could you clarify what exactly you are attempting to do? Open link in new tab or open image in new tab?
Edit: It appears that the FancyBox script is changing the href of your link to point directly to the image. You would need to find where in the script it is selecting each link tag with rel="gallery" and replacing the href to point to the images; you will want it to not change the href if you want it left as "mysite/photos/view/abc123", for example.
If you need the same functionality the demo site you posted is using, then this is easy to achieve, but keep in mind that the site is NOT using the same URL for both the pop-up and the standalone image page.
Click on any thumbnail with Firebug console is open, you'll notice that it's making an Ajax request to get the image from a different URL! which is an obvious behavior.
http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864
While the link is pointing to:
http://www.starnow.co.uk/KimberleyMarren/photos/2129864/
you see your links should point to the correct image page, in case of JS disabled browsing or right clicking (as you mentioned) AND using JS to override the link default behavior (which is redirecting you to the image page).
So for example you can have a method that will generate your image layout/page, and this should be used as href; and override the click event of the link to call a similar method (using ajax) but this time it'll retrieve the image itself to use it in your lightbox.