Develop Reference

how can i put base64 image file into opencv? (javascript)

I'm trying to get random image from input video file, and then put the image into opencv to get grayScale image on the webpage.
Getting random image from video is solved by below-solution.
Javascript how to extract frame from video?
but now i'm stuck to the problem, Is it impossible to give base 64 source image file into opencv(imread, imshow, cv.cvtColor)? Please help me.
'''
//const cv = require("./js/opencv");
var video = document.createElement("video");
var image = new Image();
var canvas = document.getElementById("prevImgCanvas");
var canvas_after = document.getElementById("canvas_after");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
video.addEventListener('loadeddata', function() {
reloadRandomFrame();
}, false);
video.addEventListener('seeked', function() {
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataurl = canvas.toDataURL("image/jpeg")
image.src = dataurl;
image.onload = function(){
console.log(image);
let mat = cv.imread(image);
cv.imshow('canvasOutput', mat);
mat.delete();
};
}, false);
var playSelectedFile = function(event) {
var file = this.files[0];
var fileURL = URL.createObjectURL(file);
video.src = fileURL;
}
var input = document.getElementById('fileinput');
input.addEventListener('change', playSelectedFile, false);
function reloadRandomFrame() {
if (!isNaN(video.duration)) {
var rand = Math.round(Math.random() * video.duration * 1000) + 1;
video.currentTime = rand / 1000;
}
}
'''

let image = new Image()
image.src = 'your base64'
await new Promise(r => {
image.onload = r
})
cv.imread(image)

pdfmake base64 image callback

I have to work with pdfmake to build a pdf preview within my laravel application. I am a javascript noob and going nuts to generate the dataURI for an image in b. Hope you can help me out.
How can I get that generated base64 into my docdefinition?
function convertImageToDataURL(src, callback, outputFormat) {
// Create an Image object
var img = new Image();
// Add CORS approval to prevent a tainted canvas
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
// Mark the canvas to be ready for garbage
// collection
canvas = null;
};
img.src = src;
// make sure the load event fires for cached images too
if (img.complete || img.complete === undefined) {
// Flush cache
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
// Try again
img.src = src;
}
}
convertImageToDataURL(
'{{asset('storage/'.$report->author->enterprises->first()->logo_image)}}',
function(dataUrl) {
// console.log('RESULT:', dataUrl);
// Put dataUrl into DocDefinition here!?!?
// return dataUrl is undefined
}
);`

Okay. As I said: I am a javascript noob. So I changed the script to this one:
function convertImageToDataURL(imgSrc) {
img = new Image();
img.src = imgSrc;
img.crossOrigin = "Anonymous";
var canvas = document.createElement("canvas");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/jpg");
canvas = null;
return dataURL;
}
It might not be beautyful nor elegant, but it works for me.

Convert a html page (div+svg elements) to a PDF

I use librairies javascript (jspdf.js and html2canvas.js) to convert my html page (elements div and svg) to a PDF. But the export doesn't include all DIV elements.
function svg_to_pdf(svg, callback) {
svgAsDataUri(svg, {}, function(svg_uri) {
var image = document.createElement('img');
image.src = svg_uri;
image.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var doc = new jsPDF('portrait', 'pt');
var dataUrl;
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
dataUrl = canvas.toDataURL('image/jpeg');
doc.addImage(dataUrl, 'JPEG', 0, 0, 600, 400);
callback(doc);
}
});
}
function download_pdf(name, dataUriString) {
var link = document.createElement('a');
link.addEventListener('click', function(ev) {
link.href = dataUriString;
link.download = name;
document.body.removeChild(link);
}, false);
document.body.appendChild(link);
link.click();
}

screen capture of svg appears as solid back color

I am trying to capture an svg. I used canvg to convert svg to canvas. but when printing I get solid black image.
I have tried many suggestions I found but no luck so far.
vm.printDiagram = function() {
var fileName="Diagram.pdf";
var svgElements = $("#eleDiagram").find('svg');
svgElements.each(function() {
var canvas, xml;
canvas = document.createElement("canvas");
canvas.className = "screenShotTempCanvas";
var ctx = canvas.getContext('2d');
ctx.fillText(255,255,255);
//ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
xml = (new XMLSerializer()).serializeToString(this);
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
//draw the SVG onto a canvas
canvg(canvas, xml);
$(canvas).insertAfter(this);
$(this).attr('class', 'tempHide');
$(this).hide();
});
html2canvas($("#eleDiagram"), {
background :'#FFFFFF',
onrendered: function(canvas){
var image = new Image();
image.src = canvas.toDataURL("image/png");
var fullQuality= canvas.toDataURL('image/png', 1.0);
var dwidth=$("#eleDiagram").width();
var dheight=$("#eleDiagram").height();
var _postPdfData = {
"images":[
{
"data":fullQuality,
"width":dwidth,
"height": dheight
}
]
};
_postPdfData = JSON.parse(angular.toJson(_postPdfData));
var pdfUrl = "service/printpdf";
$http.post(pdfUrl,_postPdfData,{responseType:'arraybuffer'}).then(function onSuccess(response) {
if (response.data) {
var file = new Blob([response.data], {type: 'application/pdf'});
var fileURL = window.URL.createObjectURL(file);
if(response && response.data){
var a = document.createElement("a");
document.body.appendChild(a);
a.href = fileURL;
a.download = fileName;
a.click();
}
}
});
}
});
$("#eleDiagram").find('.screenShotTempCanvas').remove();
$("#eleDiagram").find('.tempHide').show().removeClass('tempHide');
};

Take a snapshot from a data-uri video

I'm trying to get a snapshot from a video data-uri
var video = document.createElement('video');
video.src = uri;
canvas = document.createElement('canvas');
canvas.style.visibility = 'hidden';
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var snapshot = canvas.toDataURL();
But this doesn't work. Why?

Although it's a Data URI and you might expect the video to load instantly, you do need to listen for the video's canPlay event (see MDN).
function onFile(ev) {
var file = ev.target.files[0];
console.log();
var reader = new FileReader();
reader.addEventListener('load', function() {
taksVideoSnapshot(reader.result);
}, false);
reader.readAsDataURL(file);
}
function taksVideoSnapshot(videoUri) {
var video = document.createElement('video');
video.addEventListener('canplay', function() {
canvas = document.createElement('canvas');
canvas.style.visibility = 'hidden';
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var snapshot = canvas.toDataURL();
console.log('Snapshot', snapshot.length);
showThumb(snapshot);
}, false);
video.src = videoUri;
document.body.appendChild(video);
}
function showThumb(snapshot) {
var thumb = document.createElement('img');
thumb.src = snapshot;
document.body.appendChild(thumb);
}
<input type="file" onchange="onFile(event)">
Also see on JSBin.