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.
Related
I use "dom-to-image" to convert html table to png:
var wrapper = document.getElementById('exportContent');
domtoimage.toSvg(wrapper).then(function (svgDataUrl) {
downloadPNGFromAnyImageSrc(svgDataUrl);
});
function downloadPNGFromAnyImageSrc(src)
{
var img = new Image;
img.onload = function(){
var canvas = convertImageToCanvas(img);
var pngImage = convertCanvasToImage(canvas);
var anchor = document.createElement('a');
anchor.setAttribute('href', pngImage.src);
anchor.setAttribute('download', 'image.png');
anchor.click();
};
img.src = src;
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png", 1.0);
return image;
}
}
It converts the element to png. However I need to put it into doc file.
Now I need to generate/save a docx file with this png without saving png.
How can I do it?
I followed this post: dom to img
I'm trying to draw an existing image onto a canvas and encode it via base64. Here is my code:
var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";
document.getElementById("Table1").appendChild(canvas);
var myCanvas = document.getElementById("MyCanvas");
var myCanvasContext = myCanvas.getContext("2d");
myCanvas.width = 135;
myCanvas.height = 170;
var img = new Image();
img.onload = function(){
myCanvasContext.drawImage(img,0,0);
}
img.src = "https://example.com/asd.png";
var toURL = myCanvas.toDataURL();
console.log(toURL);
It draws the image to the canvas, but the toURL is an empty image base64 code with 135x170 size. I've tried to decode it, but it always shows a blank image.
I can't find what is the problem with it.
The problem is that myCanvas.toDataURL(); is called before the image is actually loaded. For this you'd need to move it inside the onload-callback, like:
var img = new Image();
img.onload = function(){
myCanvasContext.drawImage(img,0,0);
// ...moved here
var toURL = myCanvas.toDataURL();
console.log(toURL);
}
img.src = "https://example.com/asd.png";
The following is a simplified example:
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = "";
img.src = 'https://www.gravatar.com/avatar/8939f42cb6c31e31e570ea8f07fe9757?s=32&d=identicon&r=PG';
img.onload = () => {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
console.log(canvas.toDataURL());
};
document.body.appendChild(canvas); // append the canvas ...
document.body.appendChild(img); // ... and img for demo purposes only
var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";
document.getElementById("Table1").appendChild(canvas);
var myCanvas = document.getElementById("MyCanvas");
var myCanvasContext = myCanvas.getContext("2d");
myCanvas.width = 500;
myCanvas.height = 500;
var img = new Image();
img.onload = function(){
myCanvasContext.drawImage(img,0,0);
}
img.src = "http://underthebridge.co.uk/wp-content/uploads/2014/03/Example-main-image1.jpg";
var toURL = myCanvas.toDataURL();
console.log(toURL);
var img2 = document.createElement("img");
img2.id = "MyImg";
img2.src = toURL;
document.getElementById("Table1").appendChild(img2);
<div id='Table1'> </div>
You can't put an base64 inside a canvas but only in a tag img.
I am trying to generate a base64 data URL from an image source, but whenever I try to convert it, the dataURL being output is of just the empty canvas without the image. What am I missing here?
src to base64 function:
imageToBase64(url, callback) {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function () {
let canvas = document.createElement('CANVAS');
const ctx = canvas.getContext('2d');
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
const dataURL = canvas.toDataURL('image/png|gif|jpg');
callback(dataURL);
canvas = null;
};
img.src = url;
}
Usage:
componentDidMount() {
this.imageToBase64(this.props.originalUploadFile.data, (dataUrl) => {
console.log(dataUrl) // I am getting a result, but it does not contain the image data
});
}
I am trying to get base64 data from image url but it always return "data:"
Here's the code :
function getBase64Image(imgurl) {
var canvas = document.createElement("canvas");
var img = new Image();
img.src = imgurl;
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Use img.onload to execute the code after your image has loaded. Use a callback function to report back the dataURL.
function getBase64Image(imgurl, callback) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
if (typeof callback === 'function') {
callback(dataUrl);
}
};
img.src = imgurl;
}
I have a canvas with an id called napkin. When I call the following function it is supposed to draw an image and the napkin canvas onto another canvas in memory. It works on every browser but IOS Safari. The operation does not seem to exceed the IOS memory cap for the canvas. I test this by calling k().toDataURL(). Any ideas?
function k() {
var canvas = document.createElement('canvas');
var napkin = document.getElementById("napkin");
var img = new Image();
img.src = picurl;
var ctx = canvas.getContext("2d");
var imgdata = new Image();
imgdata.src = napkin.toDataURL();
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.globalAlpha = 0.5;
ctx.drawImage(imgdata, 0, 0);
return canvas;
}
You need to wait for the image data to load before using it...
var img = new Image();
img.onload = function(){
// do stuff here with img
};
img.src = picurl;
// not here