Please help me. I am trying to convert a line chart to canvas image.
$scope.export = function() {
html2canvas($('#div'), {
useCORS: true,
onrendered: function(canvas) {
document.body.appendChild(canvas)
}
});
}
var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
DOMURL.revokeObjectURL(png);
img.src = url;
}
Related
Using RecordRTC as an extension and also in my development work. Great work!
Is there a way my site can programatically record a div only, instead of the whole tab?
var myformat = {enableTabCaptureAPI: true, enableSpeakers: true}
if(typeof RecordRTC_Extension === 'undefined') {
alert('RecordRTC chrome extension is either disabled or not installed.');
} else {
var recorder = new RecordRTC_Extension();
//recorder.startRecording(recorder.getSupoortedFormats()[4], function() {
recorder.startRecording(myformat, function() {
setTimeout(function() {
recorder.stopRecording(function(blob) {
console.log(blob.size, blob);
var url = URL.createObjectURL(blob);
invokeSaveAsDialog(blob);
video.src = url;
});
}, 3000);
});
}
You do not need a chrome extension to record a DIV. I'm copying here complete demo that can record a DIV.
Start/Stop buttons:
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>
DIV to be recorded:
<div id="element-to-record">
<input value="type something">
</div>
Optionally a hidden CANVAS:
<canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas>
Hidden canvas is used to draw DIV and get webp images. It is till an optional step. You can either append it to he DOM or keep in the memory.
Link RecordRTC and HTML-2-Canvas:
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/html2canvas.min.js"></script>
Complete javascript code:
var elementToRecord = document.getElementById('element-to-record');
var canvas2d = document.getElementById('background-canvas');
var context = canvas2d.getContext('2d');
canvas2d.width = elementToRecord.clientWidth;
canvas2d.height = elementToRecord.clientHeight;
var isRecordingStarted = false;
var isStoppedRecording = false;
(function looper() {
if(!isRecordingStarted) {
return setTimeout(looper, 500);
}
html2canvas(elementToRecord).then(function(canvas) {
context.clearRect(0, 0, canvas2d.width, canvas2d.height);
context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);
if(isStoppedRecording) {
return;
}
requestAnimationFrame(looper);
});
})();
var recorder = new RecordRTC(canvas2d, {
type: 'canvas'
});
document.getElementById('btn-start-recording').onclick = function() {
this.disabled = true;
isStoppedRecording =false;
isRecordingStarted = true;
recorder.startRecording();
document.getElementById('btn-stop-recording').disabled = false;
};
document.getElementById('btn-stop-recording').onclick = function() {
this.disabled = true;
recorder.stopRecording(function() {
isRecordingStarted = false;
isStoppedRecording = true;
var blob = recorder.getBlob();
// document.getElementById('preview-video').srcObject = null;
document.getElementById('preview-video').src = URL.createObjectURL(blob);
document.getElementById('preview-video').parentNode.style.display = 'block';
elementToRecord.style.display = 'none';
// window.open(URL.createObjectURL(blob));
});
};
ONLINE demo:
https://www.webrtc-experiment.com/RecordRTC/simple-demos/recording-html-element.html
I am new in ionic, and Im having a hard time creating a function that could upload an image from photolibrary and even in camera. I have test it using phonegap.I am using ionic framework and using Cordova File-transfer. The function in opening photolibrary and camera works well, but I dont know how to save it into my server (CI) using http POST. Please Help..
This is my Controller :
$scope.selectPicture = function() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
};
$cordovaCamera.getPicture(options).then(
function(imageURI) {
window.resolveLocalFileSystemURI(imageURI, function(fileEntry) {
$scope.picData = fileEntry.nativeURL;
$scope.ftLoad = true;
var image = document.getElementById('myImage');
image.src = fileEntry.nativeURL;
});
$ionicLoading.show({template: 'Foto acquisita...', duration:500});
},
function(err){
$ionicLoading.show({template: 'Errore di caricamento...', duration:500});
})
};
$scope.uploadPicture = function() {
$ionicLoading.show({template: 'Sto inviando la foto...'});
var fileURL = $scope.picData;
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
options.chunkedMode = true;
var params = {};
params.value1 = "someparams";
params.value2 = "otherparams";
options.params = params;
var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://www.yourdomain.com/upload.php"), viewUploadedPictures, function(error) {$ionicLoading.show({template: 'Errore di connessione...'});
$ionicLoading.hide();}, options);
}
var viewUploadedPictures = function() {
$ionicLoading.show({template: 'Sto cercando le tue foto...'});
server = "http://www.yourdomain.com/upload.php";
if (server) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState === 4){
if (xmlhttp.status === 200) {
document.getElementById('server_images').innerHTML = xmlhttp.responseText;
}
else { $ionicLoading.show({template: 'Errore durante il caricamento...', duration: 1000});
return false;
}
}
};
xmlhttp.open("GET", server , true);
xmlhttp.send()} ;
$ionicLoading.hide();
}`
I just see this code in google and I try. fortunately the function in opening library and camera works. the only problem is I dont know how to save the image into the server(CI)..
The drawImage function is working fine if <canvas> is defined in HTML.
Please check my JSFiddle
But, When I create the canvas using createElement('canvas') it does not work.
I have tried to convert the image to canvas in the following ways
Try 1:
$scope.canvas = document.createElement('canvas');
$scope.canvas.width = 500;
$scope.canvas.height =1000;
var ctx = $scope.canvas.getContext('2d');
var img = new Image();
img.onload = function() {
alert("image is loaded");
ctx.drawImage(img, 0, 0);
};
img.src="img/default_subject.png";
In this way the canvas shows only blank screen when tried to display using $scope.canvas.toDataURL()
Try 2:
In this try , I have just moved img.src inside of onload() function
img.onload = function() {
img.src="img/default_subject.png";
ctx.drawImage(img, 0, 0);
};
This try also not working.
Try 3:
In this try, I changed var img = new Image(); to var img = document.createElement('img')
$scope.canvas = document.createElement('canvas');
$scope.canvas.width = 500;
$scope.canvas.height =1000;
var ctx = $scope.canvas.getContext('2d');
var img = document.createElement('img');
img.onload = function() {
alert("image is loaded");
ctx.drawImage(img, 0, 0);
};
img.src="img/default_subject.png";
But, there is no breakthrough .
Please help me find the solution.
After creating the canvas element, you need to add the canvas element to the document. I have modified your JSFiddle example to use JavaScript to create the canvas element.
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height =1000;
document.getElementById("canvasContainer").appendChild(canvas);
var ctx = canvas.getContext('2d');
var img = document.createElement('img');
img.onload = function() {
alert("image is loaded");
ctx.drawImage(img, 0, 0);
};
img.src="http://www.download-free-wallpaper.com/img88/xpwwiirymrkfcacywpax.jpg";
<div id="canvasContainer"></div>
I'm currently using the angular-file-upload directive, and I'm pretty much using the exact codes from the demo.
I need to add a step in there to test for the dimension of the image, and I am only currently able to do with via jQuery/javascript.
Just wondering if there's a "angular" way to check for the dimension of the image before it's being uploaded?
$scope.uploadImage = function($files) {
$scope.selectedFiles = [];
$scope.progress = [];
if ($scope.upload && $scope.upload.length > 0) {
for (var i = 0; i < $scope.upload.length; i++) {
if ($scope.upload[i] !== null) {
$scope.upload[i].abort();
}
}
}
$scope.upload = [];
$scope.uploadResult = [];
$scope.selectedFiles = $files;
$scope.dataUrls = [];
for ( var j = 0; j < $files.length; j++) {
var $file = $files[j];
if (/*$scope.fileReaderSupported && */$file.type.indexOf('image') > -1) {
var fileReader = new FileReader();
fileReader.readAsDataURL($files[j]);
var loadFile = function(fileReader, index) {
fileReader.onload = function(e) {
$timeout(function() {
$scope.dataUrls[index] = e.target.result;
//------Suggestions?-------//
$('#image-upload-landscape').on('load', function(){
console.log($(this).width());
});
//-------------------------//
});
};
}(fileReader, j);
}
$scope.progress[j] = -1;
if ($scope.uploadRightAway) {
$scope.start(j);
}
}
};
I think you can do it by:
var reader = new FileReader();
reader.onload = onLoadFile;
reader.readAsDataURL(filtItem._file);
function onLoadFile(event) {
var img = new Image();
img.src = event.target.result;
console.log(img.width, img.height)
}
This is the code snippet copied from https://github.com/nervgh/angular-file-upload/blob/master/examples/image-preview/directives.js.
I think this is more angularjs. However, you may need to modify it to fit your requirement.
Try this code
uploader.filters.push({
name: 'asyncFilter',
fn: function(item /*{File|FileLikeObject}*/ , options, deferred) {
setTimeout(deferred.resolve, 1e3);
var reader = new FileReader();
reader.onload = onLoadFile;
reader.readAsDataURL(item);
function onLoadFile(event) {
var img = new Image();
img.onload = function(scope) {
console.log(img.width,img.height);
}
img.src = event.target.result;
}
}
});
Although I got this working in Gmapv2..version three is proving to be a little trickier.
I wanted to add the other attributes into the infobubble from the XML file, but whereever I try and add them, it breaks the on-click marker?
<script type="text/javascript">
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(54.046575, -2.8007399);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("http://www.xxxxxx.com/xxxxx.com/server/venue_output.php", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var event_name = markers[i].getAttribute("event_title");
var event_start = markers[i].getAttribute("event_start");
var event_link = markers[i].getAttribute("event_link");
var marker = createMarker(markers[i].getAttribute("event_name"),latlng);
}
});
}
function createMarker(name, latlng) {
var marker = new google.maps.Marker({position: latlng, map: map, bounce:true, icon : new google.maps.MarkerImage('http://www.gigizmo.com/gigizmo.com/app/images/marker.png')});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: "<b>" + name + "</b>" });
infowindow.open(map, marker);
});
return marker;
}
</script>
How do I add my javascript values such as event_link to this marker window?
infowindow = new google.maps.InfoWindow({content: "<b>" + name + "</b>" });
You may try this code snippet, provided at : this example
function createMarker(..){
eval(" infowindow"+time+" = new google.maps.InfoWindow({ content: pt.latLng.toString() });");
eval(" marker"+time+" = new google.maps.Marker({ position: pt.latLng, map: map });");
eval(" google.maps.event.addListener(marker"+time+", \"click\", function() { infowindow"+time+".open(map, marker"+time+"); });");
time++;
//rest of your code
}
And also, speaking of my previous experiences:
be sure that your XML file does not include linebreaks.
Especially as the value you set to "name" variable.