Error in export PNG canvas all div content - javascript

In localhost, it's works exported div to image, include image over another image. I need create dynamic ID card.
But, the local project its work perfect, but the project online, not worked
I used guillotine for only zoom image and move
My first image template is svg inside div as background image
The name, job, number employee its show
var test = $(".test").get(0);
$('.toCanvas').click(function(e) {
html2canvas(test).then(function(canvas) {
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
$('#save').click(function(e) {
let type = 'png'; // image type
w = canvasWidth;
h = canvasHeight;
Canvas2Image.saveAsImage(canvas, w, h, type, 'credencial');
});
});
});
i tried different options, for example, generated image to php, save it, and after download, but the problem its same, locally its work perfectly, but online not working
thanks

Related

Screenshot from html video element to small

I am currently working on a project, where I have a locally hosted html page with a live video stream in it. I want to be able to capture a image from the video when pressing a button. The video is an html video element that gets its contents from hls.js. I already have a javascript function that is called when the button is clicked. The script uses a hidden canvas and sets its width and height to video.videoWidth and video.videoHeight. Then canvas.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); is called to get an image of the video. I then get a link to the image with canvas.toDataURL('image/png'); and pass the link to the href of an tag.
The problem is, that the resulting image always is 300x150, while the video is 1920x1080. This obviously is not what I want. I want to have an image that is the same size as the video. I dont understand whats causing this.
I have confirmed that video.videoWidth and video.videoHeight return the correct values, by printing them to console.
I am really confused, because looking on the internet and googling a lot, shows that other people are using the exact same javascript lines as I am and are apparently not having this issue.
Here is my script:
function MouseDown(){
elmnt.style.backgroundColor = "black";
var canvas = document.getElementById("canvas");
var vid = document.getElementById("video");
canvas.width = vid.videoWidth;
canvas.height = vid.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(vid, 0, 0, vid.videoWidth, vid.videoHeight);
console.log("Size: " + vid.videoWidth + "x" + vid.videoHeight);
var img = canvas.toDataURL('image/png');
var newimg = img.replace(/^data:image\/png/,'data:application/octet-stream');
var a = document.getElementById("imageLink");
a.setAttribute('download', 'Drone-Image.png');
a.href = newimg;
a.click();
}
Edit: Whatever the problem was, it resolved itself. When I started the computer that hosts the page today and tried again, it just worked...
I had tried a restart of the computer yesterday, but that didn't help...

Images Rendered to Canvas in Node Webkit are Blurry

When I try to load an image in my node webkit app with the following code:
var canvas = document.getElementById('cytoBkg');
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
var map = new Image();
map.src = './maps/map.jpg';
map.onload = function() {
ctx.drawImage(map, 0, 0, map.width, map.height, 0, 0, canvas.width, canvas.height);
console.log(map.width, map.height);
}
the image that is rendered to the canvas is very blurry. After about a minute, the following error comes up in the console:
[7583:7583:0519/153517.738479:ERROR:CONSOLE(0)] "Denying load of chrome-extension://dekacdafkimiiblogellomljhcemdaab/maps/map.jpg. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.", source: chrome-devtools://devtools/bundled/inspector.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/#691bdb490962d4e6ae7f25c6ab1fdd0faaf19cd0/&dockSide=undocked (0)
How can I make my image load properly? I have tried adding the image to as a web accessible resource in my package.json file, but this did not help.
This issue seems to arise when you set the height and width of the canvas in it's style attribute before drawing the image on the canvas. In the above example, the issue can be remedied by setting:
canvas.width = map.width;
canvas.height = map.height;
after the image's onload event, and removing any css related to the height or width of your canvas.

Fetch Urls and merge into single high quality image (Javascript)

I've currently got a piece of JS that allows me to fetch all the IMG urls inside a certain DIV (vpc-preview). I'm now looking for a solution to take these Urls and merge them into one image that pops up for the user to download.
I'm using this method rather than something like the "HTMLCanvasElement.toDataURL" method as I want a high quality image output. I found the Html2canvas method generates a blurry image especially on retina. The original URL's are high quality images which would be ideal if just merged.
Note: The images will not have consistent names and there can be anywhere between 5-30 images stacked on top of eachother. Which is why I'm collecting them from the container they reside in as that and the height/width are the only constants.
Below is a Fiddle I've put together to show what I have so far, the only difference is the images will be stacked on top of each other rather than side by side.
Demo Fiddle
function img_find() {
var imgs = document.querySelectorAll('#vpc-preview img');
var imgSrcs = [];
for (var i = 0; i < imgs.length; i++) {
imgSrcs.push(imgs[i].src);
}
return alert(imgSrcs);
}
UPDATE: The following fiddle lets users upload images and then merges them into a single photo for download. Unfortunately my coding skills aren't good enough to manipulate this into using the SRC urls of images within certain DIV and to Merge all the photos on top of each other. Click here to see thread this came from.
Fiddle
function addToCanvas(img) {
// resize canvas to fit the image
// height should be the max width of the images added, since we rotate -90 degree
// width is just a sum of all images' height
canvas.height = max(lastHeight, img.width);
canvas.width = lastWidth + img.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (lastImage) {
ctx.drawImage(lastImage, 0, canvas.height - lastImage.height);
}
ctx.rotate(270 * Math.PI / 180); // rotate the canvas to the specified degrees
ctx.drawImage(img, -canvas.height, lastWidth);
lastImage = new Image();
lastImage.src = canvas.toDataURL();
lastWidth += img.height;
lastHeight = canvas.height;
imagesLoaded += 1;
}

How to show the image with reduced size in thumnails using Cordova

In my android application, I have to show the images in thumbnail view with reduced size(100 KB) instead of showing it with original size(1 MB). It helps to improve the performance of my application.
How to implement this compression functionality using Ionic/ Cordova. Could you please provide some suggestion to implement this functionality.
Try this. It should work. But instead of image tag use canvas tag. Put this code in your javascript function for loading image. It compress your image to your desired dimensions.
img = new Image();
img.src = 'example.png'; // your file
img.onload = function(){
var canvas = document.getElementById('outputImage'); // id of your canvas
var ctx = canvas.getContext('2d');
canvas.width=400 // your dimensions
canvas.height=300
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

html image id and canvas

Hi there I have a simple question I can'[t seem to find the answer to on google. I'm trying to draw an image on a canvas. I originally used the "new" constructor ( ballPic = new Image(); ballPic.src = "ball.png" ) which worked when drawing on my canvas, but I needed to do some scaling and wasn't sure if I could attach a css id to the object. So I instead tried to use the image tag and did the rest in css.
However using a variable that way doenst seem to work with my canvas' drawing:
ballPic = '<img id="soccerBall">';
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.drawImage(BallPic, -25, -25);
Is this because assigning a variable like ballPic = is not the same as being the element itself like when using the constructor? How would I pass it other than attaching it to the document and using getElementbyID?
You can keep using the Image constructor and still scale the image. There's another method overload of the drawImage function:
From MDN:
The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.
drawImage(image, x, y, width, height)
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
I would recommend you check out that page, it has a lot of good information, like
Using data: urls
Handling image loading
Loading still frames from videos
Slicing
Examples gallore
Create an image, handle the onload event, in which you update the canvas size to the scaled size of the image, then drawImage with a scale.
var scale = 2 ;
var ballPic = new Image();
ballPic.onload = function drawImage() {
var c=document.getElementById("myCanvas");
c.width = ballPic.width * scale ;
c.height = ballPic.height * scale ;
var ctx=c.getContext("2d");
ctx.scale(scale, scale) ;
ctx.drawImage(ballPic, 0, 0);
};
ballPic.src =
'http://melinabeachturtlehatchery.files.wordpress.com/2010/07/turtle4.jpg';
the fiddle is here :
http://jsbin.com/etemox/1/edit

Categories

Resources