We Keep Coding

Image (canvas) in PDF, is generated wrong

This code allows me to generate the PDF, from an image with canvas, when I generate it in cell or reduce the revolution (width x height), the image of the table in the PDF comes out in half; how could i fix it?
PDF - A4
Correct Image
Not correct image
<script type="text/javascript">
function demoFromHTML() {
var elementHTML = document.getElementById('resultados');
html2canvas(elementHTML, {
useCORS: true,
onrendered: function(canvas) {
var pdf = new jsPDF('p', 'pt', 'A4');
var pageHeight = 1695;
var pageWidth = 1250;
for (var i = 0; i <= elementHTML.clientHeight / pageHeight; i++) {
var srcImg = canvas;
var sX = 0;
var sY = pageHeight * i;
var sWidth = pageWidth;
var sHeight = pageHeight;
var dX = 0;
var dY = 0;
var dWidth = pageWidth;
var dHeight = pageHeight;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', pageWidth);
onePageCanvas.setAttribute('height', pageHeight);
var ctx = onePageCanvas.getContext('2d');
ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight);
var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
var width = onePageCanvas.width;
var height = onePageCanvas.clientHeight;
if (i > 0)
pdf.addPage(593, 780);
pdf.setPage(i + 1);
pdf.addImage(canvasDataURL, 'JPG', 20, 40, (width * .45), (height * .45));
}
pdf.save('cotizador.pdf');
}
});
}
</script>

Inline video resize for mobile (jam3) to achieve object-fit: cover

I'm trying to make https://github.com/Jam3/ios-video-test work for my purposes.
I want the video to scale and cover the whole viewport on mobile and desktop, something like an object-fit: cover or a height: 100% and width auto (for now it scales to fit the width)
I changed this ...
resize()
window.addEventListener('resize', resize, false)
function resize () {
var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight
letterbox(canvas, [
width, height
], canvasVideo.video)
}
// resize and reposition canvas to form a letterbox view
function letterbox (element, parent, video) {
var aspect = video.videoWidth / video.videoHeight
var pwidth = parent[0]
var pheight = parent[1]
var width = pwidth
var height = Math.round(width / aspect)
var y = Math.floor(pheight - height) / 2
// this is a fix specifically for full-screen on iOS9
// without it, the status bars will not hide... O.o
if (canvasVideo.fallback) height += 1
element.style.top = y + 'px'
element.style.width = width + 'px'
element.style.height = height + 'px'
}
to hack this (Not gonna lie, I really know very little of what I'm doing) ...
var width = Math.round(height / aspect)
var height = pheight
var y = Math.floor(pheight - height) / 2
and it only works to a certain extend (fine on mobile but it doesn't really cover the wide desktop viewports)
Thanks so much for your help!

So in case anyone had a similar issue the solution was this …
// resize and reposition canvas to form a letterbox view
function letterbox (element, parent, video) {
var aspect = video.videoWidth / video.videoHeight
var parentWidth = parent[0]
var parentHeight = parent[1]
var parentAspectRatio = parentWidth / parentHeight
var childWidth = video.videoWidth
var childHeight = video.videoHeight
var childAspectRatio = childWidth / childHeight
var targetWidth = 0
var targetHeight = 0
if (parentAspectRatio > childAspectRatio) {
targetWidth = parentWidth
targetHeight = targetWidth / childAspectRatio
} else {
targetHeight = parentHeight
targetWidth = targetHeight * childAspectRatio
}
element.style.width = targetWidth + 'px'
element.style.height = targetHeight + 'px'
element.style.left = -(targetWidth - parentWidth) / 2 + 'px'
element.style.top = -(targetHeight - parentHeight) / 2 + 'px'
}

Export image from canvas in printing size (300 DPI)

I am trying to make a canvas application and i get success. I just stuck in print image that is output of canvas. Size of image is too small to print enough.
Following is flow of application:
Upload image and draw to the canvas.
Do some operations like zoom, move and rotating on split canvas.
I have successfully generated single images from those splits
And I have export base64 from canvas to printing process.
Problem is here when I export data from canvas it's small image, even if I do some Imagick stuff to resize image quality of final image is not near to print on poster.
JavaScript:
function draw() {
var Activecanvas = document.getElementsByClassName("cf-photoframe-active");
var canvas = Activecanvas[0];
var ctx = canvas.getContext('2d');
var ActiveCanvasId = canvas.getAttribute("id");
var img = canvasDetail[ActiveCanvasId].selectedImage;
var imageX = canvasDetail[ActiveCanvasId].imageX;
var imageY = canvasDetail[ActiveCanvasId].imageY;
var resize = resizeDetail[ActiveCanvasId].resize;
var rotate = rotateDetail[ActiveCanvasId].rotate;
//if(resize)
$j("#resize").slider({
value: resize,
min: -300,
max: 300,
step: 1,
});
$j("#rotat").slider({
value: rotate,
min: -180,
max: 180,
step: 1,
});
if (img != '') {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
var im_width = parseInt(img.width + $j("#resize").slider('value'));
var im_height = parseInt(img.height + $j("#resize").slider('value'));
var maxWidth = canvas.width; // Max width for the image
var maxHeight = canvas.height;
var iswidthMax = 0;
var imageOrgWidth = img.width;
var imageOrgHeight = img.height;
if (maxWidth < maxHeight) {
iswidthMax = 1;
} else if (maxWidth == maxHeight) {
iswidthMax = 2;
}
if (iswidthMax == 1) {
maxWidth = (maxHeight * imageOrgWidth) / imageOrgHeight;
} else if (iswidthMax == 0) {
maxHeight = (maxWidth * imageOrgHeight) / imageOrgWidth;
} else if (iswidthMax == 2) {
if (img.width > img.height) {
maxWidth = (maxHeight * imageOrgWidth) / imageOrgHeight;
} else {
maxHeight = (maxWidth * imageOrgHeight) / imageOrgWidth;
}
}
var resizeVal = $j("#resize").slider('value');
var nw = maxWidth + resizeVal;
var resizeValHeight = maxHeight * resizeVal / maxWidth;
var nh = maxHeight + resizeValHeight;
ctx.translate(imageX, imageY);
ctx.rotate(rotate * Math.PI / 180);
ctx.translate(-nw / 2, -nh / 2);
ctx.drawImage(img, 0, 0, nw, nh);
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.restore();
}
}

If you have smaller canvas elements for editing, then you will have to recombine the data from those smaller canvas elements into a canvas element which is the full size and output the data from that element.
For simplicity's sake, let's say that you have cut the image into four quadrants and drawn to four canvas elements canvas[0] - canvas[3] for editing. You would then need to recombine them into one larger canvas doing something like the following...
var imgData = [];
for (var i = 0; i < 4; i++) {
var tmpCtx = canvas[i].getContext('2d');
imgData[i] = tmpCtx.getImageData(0, 0, canvas[i].width, canvas[i].height);
}
var fullSizeCanvas = document.createElement('canvas');
fullSizeCanvas.width = img.width * 2;
fullSizeCanvas.height = img.height * 2;
var fullCtx = fullSizeCanvas.getContext('2d');
fullCtx.putImageData(imgData[0], 0, 0);
fullCtx.putImageData(imgData[1], img.width, 0);
fullCtx.putImageData(imgData[2], 0, img.height);
fullCtx.putImageData(imgData[3], img.width, img.height);
var data = fullSizeCanvas.toDataURL();

Why does my function on resize applies on hover (js, svg)

So I have this function which aim is to resize an svg element on window resize :
bP.resize = function(){
var currentHeight = window.innerHeight;
var currentWidth = window.innerWidth;
var delta = prevHeight - currentHeight;
var wantedHeight = currentHeight - delta - 400;
var ratio = wantedHeight / height;
svg.style('transform', 'scale(0,' + ratio + ')');
height = wantedHeight;
prevHeight = currentHeight;
prevWidth = currentWidth;
};
and that call :
window.addEventListener('resize', bP.resize);
the thing is, resize only applies when I resize my window AND hover the svg.

Canvas drawImage scaling

I'm trying to scale an image proportionately to the canvas. I'm able to scale it with fixed width and height as so:
context.drawImage(imageObj, 0, 0, 100, 100)
But I only want to resize the width and have the height resize proportionately. Something like the following:
context.drawImage(imageObj, 0, 0, 100, auto)
I've looked everywhere I can think of and haven't seen if this is possible.

context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width)

#TechMaze's solution is quite good.
Here is the code after some corrections and the introduction of the image.onload event. image.onload is essential in order to avoid any kind of distortion.
function draw_canvas_image() {
var canvas = document.getElementById("image-holder-canvas");
var context = canvas.getContext("2d");
var imageObj = document.getElementById("myImageToDisplayOnCanvas");
imageObj.onload = function() {
var imgWidth = imageObj.naturalWidth;
var screenWidth = canvas.width;
var scaleX = 1;
if (imgWidth > screenWidth)
scaleX = screenWidth/imgWidth;
var imgHeight = imageObj.naturalHeight;
var screenHeight = canvas.height;
var scaleY = 1;
if (imgHeight > screenHeight)
scaleY = screenHeight/imgHeight;
var scale = scaleY;
if(scaleX < scaleY)
scale = scaleX;
if(scale < 1){
imgHeight = imgHeight*scale;
imgWidth = imgWidth*scale;
}
canvas.height = imgHeight;
canvas.width = imgWidth;
context.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);
}
}

And if you want to properly scale the picture as per the screen size, here is the code you can use:
var imgWidth = imageObj.naturalWidth;
var screenWidth = $(window).width() - 20;
var scaleX = 1;
if (imageWdith > screenWdith)
scaleX = screenWidth/imgWidth;
var imgHeight = imageObj.naturalHeight;
var screenHeight = $(window).height() - canvas.offsetTop-10;
var scaleY = 1;
if (imgHeight > screenHeight)
scaleY = screenHeight/imgHeight;
var scale = scaleY;
if(scaleX < scaleY)
scale = scaleX;
if(scale < 1){
imgHeight = imgHeight*scale;
imgWidth = imgWidth*scale;
}
canvas.height = imgHeight;
canvas.width = imgWidth;
ctx.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);
If you are not using jQuery, replace $(window).width with the appropriate equivalent option.