I have a button, Printer Friendly, which creates a screenshot of a table within the Route Check In tab. I have another tab, LCP, where I would like the same button to capture a screen shot of this page when I go the LCP tab.
Here is the code within rollup.js where the html2canvas is created when you click the Printer Friendly button.
app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
.....
$scope.printDiv = function(divName) {
html2canvas(document.getElementById("routeContent"), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG',1,30,210,230);
//HEADER TEST
doc.text(5, 5, "Header");
doc.save('Route.pdf');
//OPEN IN NEW WINDOW TEST
//doc.output('dataurlnewwindow');
//IE 9-11 WORK AROUND
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
},
});
//html2canvas for LCP tab
/*
html2canvas(document.getElementById("divPrint"), {
onrendered: function (canvas) {
//document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
//alters size of the pdf preview
//doc.addImage(img, 'JPEG',1,1,205,100);
doc.addImage(img, 'JPEG',1,1,210,110);
doc.save('LCP.pdf');
//IE 9-11 WORK AROUND
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
},
});
*/
}
});
How can I combine both to work when I click the button within the specific tab? Thanks.
I also want the screen shot to open in a new tab rather than the screenshot saving as a pdf.
Any help is appreciated.
Related
I am using the awesome jquery-cropper plugin from fengyuanchen.
I'm having the issue of when certain images get uploaded it rotates and it is not on the right side which I have to make the user rotate them. I will upload the image via ajax. I'm getting the error rotate is not defined which I have been stuck a couple of hours.
$('#profilePhoto').on( 'change', function(){
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
$("#profileImageContainer").hide();
$("#rotateImg").show();
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
cropper = canvas.cropper({
aspectRatio: 1 / 1,
rotatable: true,
});
$('#btnCrop').click(function() {
// Get a string base 64 data url
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
});
$('#rotateImg').click(function () {
cropper.cropper.rotate(90);
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
}
else {
alert("Invalid file type! Please select an image file.");
}
}
else {
alert('No file(s) selected.');
}
});
The main problem here is about scopes since it looks like it is not reconizing the cropper variable.
This problems surfaces because when the user upload a photo sometimes this photo rotate automatically. If I could solve this problem first without having to make the user rotate the image would be better
Really stupid mistake. Instead of:
cropper.cropper().rotate(90);
I should apply:
cropper.cropper('rotate', 90);
Currently i am working on a open webapp camera, right now i have implemented the camera setup(live stream as viewport, take picture button, capture, display taken picture in corner... etc) but now i am running into the issue of how to save that picture for the user to their device or computer, this app is currently being designed for mobile b2g primarily. I know most people are gonna tell me security issues!!! i dont mean tell the device exactly where to put it. I mean something like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
window.onload = function () {
var img = document.getElementById('embedImage');
var button = document.getElementById('saveImage');
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
'9TXL0Y4OHwAAAABJRU5ErkJggg==';
img.onload = function () {
button.removeAttribute('disabled');
};
button.onclick = function () {
window.location.href = img.src.replace('image/png', 'image/octet-stream');
};
};
</script>
</head>
<body>
<img id="embedImage" alt="Red dot"/>
<input id="saveImage" type="button" value="save image" disabled="disabled"/>
</body>
</html>
that specific code executed on mobile triggers the file to automatically be saved on click of the button. now what i want to do is use that to take my picture from its var its in and save it as that file, for example that will be in downloads folder.
this is what my code is currently https://github.com/1Jamie/1Jamie.github.io
any help would be appreciated and this is the current running implementation if you want to take a working look http://1Jamie.github.io
This worked for me when I was playing around with getUserMedia - I did notice that you did not have the name of the method in the proper case and it is a method of the navigator.mediaDevices interface - not a method of the window directly...
References:
[Navigator for mozilla]https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API/Navigator
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices
[mediaDevices for chrome and android]https://developers.google.com/web/updates/2015/10/media-devices?hl=en
var video = document.getElementById('monitor');
var canvas1 = document.getElementById('photo1');
var img1 = document.getElementById('canvasImg');
navigator.mediaDevices.getUserMedia({
video: true
}).then(function (stream) {
video.srcObject = stream;
video.onloadedmetadata = function () {
canvas1.width = video.videoWidth;
canvas1.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
};
}).catch(function (reason) {
document.getElementById('errorMessage').textContent = 'No camera available.';
});
function snapshot1() {
canvas1.getContext('2d').drawImage(video, 0, 0);
}
"save_snap" is the id of a button - Disclaimer I am using jQuery- but you should easily see where this corresponds to your code:
$("#save_snap").click(function (event){
// save canvas image as data url (png format by default)
var dataURL = canvas2.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
$('#canvasImg').attr("src" , dataURL);
$('#downloader').attr("download" , "download.png");
$('#downloader').attr("href" , dataURL);
//* trying to force download - jQuery trigger does not apply
//Use CustomEvent Vanilla js: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
// In particular
var event1 = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
//NOW we are effectively clicking the element with the href attribute:
//Could use jQuery selector but then we would have to unwrap it
// to expose it to the native js function...
document.getElementById('downloader').dispatchEvent(event1);
});
Are there any Fabric.JS Wizards out there?
I've done my fair research and I can't seem to find much of an explanation on how to add an image to the fabric.JS canvas.
User Journey:
a) User uploads an image from an input file type button.
b) As soon as they have selected an image from their computer I want to place it into the users canvas.
So far I've got to storing the image into an expression, this is my code below:
scope.setFile = function(element) {
scope.currentFile = element.files[0];
var reader = new FileReader();
/**
*
*/
reader.onload = function(event) {
// This stores the image to scope
scope.imageSource = event.target.result;
scope.$apply();
};
// when the file is read it triggers the onload event above.
reader.readAsDataURL(element.files[0]);
};
My HTML/Angular:
<label class="app-file-input button">
<i class="icon-enter"></i>
<input type="file"
id="trigger"
onchange="angular.element(this).scope().setFile(this)"
accept="image/*">
</label>
If you haven't guessed yet I am using a MEAN stack. Mongoose, Express, Angular and Node.
The scope imageSource is what the image is store in. I've read this SO
and it talks about pushing the image to the Image object with my result, and then pass it to the fabric.Image object. Has anyone done a similar thing that they can help me with?
Thanks in advance
**** UPDATE ****
Directive defines the canvas variable:
var canvas = new fabric.Canvas(attrs.id, {
isDrawingMode: true
});
Upload image from computer with Fabric js.
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
canvas{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>
once you have a dataURL done, you can do either:
reader.onload = function(event) {
// This stores the image to scope
fabric.Image.fromURL(event.target.result, function(img) {
canvas.add(img);
});
scope.$apply();
};
Or you put on your image tag an onload event where you do:
var img = new fabric.Image(your_img_element);
canvas.add(img);
This is for drag and drop from desktop using the dataTransfer interface.
canvas.on('drop', function(event) {
// prevent the file to open in new tab
event.e.stopPropagation();
event.e.stopImmediatePropagation();
event.e.preventDefault();
// Use DataTransfer interface to access the file(s)
if(event.e.dataTransfer.files.length > 0){
var files = event.e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (f.type.match('image.*')) {
// Read the File objects in this FileList.
var reader = new FileReader();
// listener for the onload event
reader.onload = function(evt) {
// put image on canvas
fabric.Image.fromURL(evt.target.result, function(obj) {
obj.scaleToHeight(canvas.height);
obj.set('strokeWidth',0);
canvas.add(obj);
});
};
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
}
});
Resources
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
In my application I'm using html2canvas for converting a HTML in to canvas and after that i'm converting that canvas to image using toDataURL() every thing fine in chrome the image is downloading soon after the page loads, but in safari the image loading in a the same page without downloading.
$(document).ready(function(e) {
html2canvas(document.body, {
onrendered: function(canvas) {
var test = document.getElementsByClassName('test'); //finding the div.test in the page
$(test).append(canvas); //appending the canvas to the div
var canvas = document.getElementsByTagName('canvas');
$(canvas).attr('id','test'); //assigning an id to the canvas
var can2 = document.getElementById("test");
var dataURL = can2.toDataURL("image/png");
document.getElementById("image_test").src = dataURL; //assigning the url to the image
$(canvas).remove(); //removing the canvas from the page
download(can2,'untitled.png');
function download(canvas_name,filename)
{
var tempLink = document.createElement('a');
e;
tempLink.download = filename;
tempLink.href = dataURL;
if (document.createEvent) // create a "fake" click-event to trigger the download
{
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false,false, 0, null);
tempLink.dispatchEvent(e);
}
else if (tempLink.fireEvent)
{
tempLink.fireEvent("onclick");
}
}
},logging:true,background: "#fff",
});
});
Can anybody help me what i nee to change to download the file in Safari?
iOS limitations
The iOS there are limitations which prevent direct download (practically almost all formats), where images can be downloaded holding the "touch".
The best alternative to this would be to open an "alert" with instructions and after the alert to close call "window.open" with the image.
See the code with an alternative to "iOS"
BUG in Safari (PC and MAC - non iOS - is no problem in webkit technology, but in the browser)
I tried append anchor, create "ghost-iframe" and replace mimetype: application/download.
Download manager open, but not add file after click in "Save" or "Open".
In my opinion this is a BUG in Browser (not is an issue of Webkit, the issue is of Safari).
See code:
$(document).ready(function(e) {
var ghostFrame = document.createElement("iframe");
ghostFrame.name = "myFrame";
document.body.appendChild(ghostFrame);
html2canvas(document.body, {
onrendered: function(canvas) {
var test = document.getElementsByClassName('test'); //finding the div.test in the page
$(test).append(canvas); //appending the canvas to the div
var canvas = document.getElementsByTagName('canvas');
$(canvas).attr('id','test'); //assigning an id to the canvas
var can2 = document.getElementById("test");
var dataURL = can2.toDataURL("image/png");
document.getElementById("image_test").src = dataURL; //assigning the url to the image
$(canvas).remove(); //removing the canvas from the page
var tempLink = document.createElement('a'), e;
tempLink.download = 'untitled.png';
if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { //iOS = Iphone, Ipad, etc.
alert("Instructions...");
tempLink.target = "_blank";
tempLink.href = dataURL;
} else {
tempLink.target = ghostFrame.name;
tempLink.href = dataURL.replace(/^data[:]image\/png[;]/i, "data:application/download;");//force download
}
if (document.createEvent) // create a "fake" click-event to trigger the download
{
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
tempLink.dispatchEvent(e);
} else if (tempLink.fireEvent) {
tempLink.fireEvent("onclick");
}
},
logging:true,
background: "#fff",
});
});
Alternative solution (not work in iOS):
You will have to upload the file to the server and then set the required headers for download, see:
Upload image
Download image with .htaccess (add "htaccess" just the folder that the images are generated by <canvas>.toDataURL)
Download image with PHP
I am having problems running the CamanJS script on mobile devices, i.e. iPad and iPhone's Safari / Chrome, and I've been trying to resolve it for days.
The test script is very simple:
1) Accepts browser file selection of image
2) Gets the image source using FileData, then drawing it into a canvas, then instantiate a Caman("#sample") object
3) Run some filter (either within onLoad of that image, or manually by clicking a button)
It works perfectly fine on all desktop browsers and the filters are also successfully applied, but when I try it on mobile devices like iOS Safari, the moment I try to instantiate the Caman object, my existing canvas #sample goes blank and reverts to the original canvas default background color, with no image loaded at all. I've tried instantiating the Caman object before image is drawn on canvas, image onLoad, or on demand after the canvas image is successfully drawn, but the end result is still the same - the canvas goes blank.
Below is my sample code, can someone please advise? Thank you for your kind assistance.
<script>
var caman = null;
function handleUpload(evt) {
var target = (evt.target) ? evt.target : evt.srcElement;
var files = target.files; // FileList object
var field = target.id;
var curCount = target.id.replace(/\D+/, "");
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
renderImage(e.target.result);
};
})(f);
reader.readAsDataURL(f);
}
}
function renderImage(imagedata) {
var canvas = document.getElementById("sample");
var ctx = canvas.getContext("2d");
// Render Preview
var previewImage = new Image();
previewImage.src = imagedata;
previewImage.onload = function() {
ctx.drawImage(previewImage, 0, 0, previewImage.width, previewImage.height);
caman = Caman("#sample", function () { this.sunrise().render(); });
};
}
function testProcess() {
//caman = Caman("#sample", function () { this.sunrise().render(); });
if (caman) {
caman.sunrise().render();
}
}
</script>
<form>
<input id="photo" name="photo" value="" type=file size="30" maxlength="50">
</form>
<canvas id="sample" width=300 height=300 style="background-color: #aaaaaa;"></canvas>
<br><br>Test Process<br><br>
<script>
document.getElementById('photo').addEventListener('change', handleUpload, false);
</script>
I had the same problem: worked on Chrome and Safari on my Mac, but did not work on Chrome or Safari on the iPhone 5s running iOS7. I solved by adding the data-caman-hidpi-disabled attribute to my canvas tag.
Try this:
<canvas id="sample" width=300 height=300 style="background-color: #aaaaaa;" data-caman-hidpi-disabled="true"></canvas>
According to the CamanJS website:
If a HiDPI display is detected, CamanJS will automatically switch to
the HiDPI version if available unless you force disable it with the
data-caman-hidpi-disabled attribute.
http://camanjs.com/guides/#BasicUsage