Develop Reference

Html2Canvas: Different image produced by different devices

I am using Html2Canvas to convert the contents of a div to an base64 string.
But, I am struggling to configure it correctly. It is producing different results for different results. My guess is that it's something to do with screen resolution.
Here is my code:
html2canvas(document.querySelector('#dpo_base_image'),
{
height: $('#dpo_base_image').height(),
width: $('#dpo_base_image').width(),
useCORS: true,
allowTaint: true,
}
).then(canvas => {
$('<input>').attr('type', 'hidden').attr('name', 'properties[_DataUrl]').attr('value', canvas.toDataURL()).appendTo('form');
});
Looking at the documentation I have a number of options as below:
Scale: The scale to use for rendering. Defaults to the browsers device pixel ratio.
width: The width of the canvas.
height: The height of the canvas.
windowWidth: Window width to use when rendering Element, which may affect things like Media queries.
windowHeight: Window height to use when rendering Element, which may affect things like Media queries.
There are more detailed here: https://html2canvas.hertzen.com/configuration
I am a back-end developer and don't have the knowledge of things like how screen sizes or resolutions could be affecting this.
Can anyone point me in the direction of consistently getting an image of 2000px wide and 2479px high?
I have tried putting those values in the width/height parameters but I still get different image results.
Thanks for any help.

croppie js image size of uploaded image is 7-8 times then orignal image

I have implemented croppie js in my application with following configuration.
var uploadconfig = {
imgw: "360",
imgh: "240",
type:"square",
upid:"id_upload",
displaydiv:"imgupdiv",
act:"saveimage",
imgsize:"large"
};
$uploadCrop = $('#shoimgupload-demo').croppie({
enableExif: true,
viewport: {
width: uploadconfig.imgw,
height: uploadconfig.imgh,
type: uploadconfig.type
},
boundary: {
width: 500,
height: 400
}
});
but after uploading image the final image gets resized to bigger size.
say i have uploaded png image with size 9kb it gets converted to 60kb after successful upload.
i have read in few articles that adjusting quality param can control quality and size of image but no change getting happened.
Can anyone help me on this?
Or anyone know the ratio of image resize will be appreciated.

Scaling image causes temporary jitter

This may be a duplicate question; I wasn't exactly sure how to word it so I wasn't able to find an answer.
I'm using jQuery to make an image pop out when the page loads. See http://jsfiddle.net/KT728/
The issue is that when the image reaches its final size, the edges are jittery/rough for a second or two, after which they become smooth. I've noticed this in Safari and Firefox so far. Here's the code for the animation:
$(document).ready(function() {
$("img").animate({
opacity: 1,
width: "300px",
height: "300px"
}, 400, "swing", function() {
$("img").animate({
width: "200px",
height: "200px"
});
});
});
I'm using PNG images that are 512px by 512px, scaled down anywhere from 10 by 10 to 300 by 300.
Would converting the PNG images to SVG format solve the issue, or at least make it less obvious? Are SVG images supported by most recent browsers?

Robust way to display an image with one fixed dimension

Lets say that we have an image uploaded by the user, the upload script limits the mb but not the image size (so could be any proportion, 600X200,200X350, and so...).
Im already showing this image in one part on my site using the twitter bootstrap image handler written on css, thats good for a profile picture, the problem is that now I want that image to be a cover (like facebook/twitter cover image), my site is responsive so the width of the cover is 900px or 100% if the screen resolution is less than 900px wide. The height is always fixed to 200px. So I know there is a way to control the correct image display using CSS (maybe with jquery too) but Im not a front-end dev, Im a php dev and I dont want to use server side scripts for doing this. So im looking for suggestions or pieces of codes (css, javascript) to start with, I belive that it have to be an already made solution for this, but I dont find any on google. Thanks for any advice!

I would definitely not advise to use a css-only solution. Not even a client-side solution if the uploaded pictures can have any resolution. You want to use a php script to save resized versions of the uploaded images and serve those to the client. Either as a block's background-image and use css (not cross browser) or as an img tag and use js to resize.
css:
.myselector{
background-size: cover;
}
or js (jquery):
$(function(){
var containers = $('.myselector'), w = $(window);
function onResize(){
//resize code
containers.each(function(){
var $this = $(this),
w = $this.width(),
h = $this.height(),
ratio = w/h,
$img = $('img',$this); // assuming there is only one img in each container
$img.css({'width':'auto','height':'auto'});
var iw = $img.width(), ih = $img.height(), iratio = iw/ih;
if(iratio>ratio){
$img.css({
height:'100%',
width:'auto',
marginLeft: (w-iw*(h/ih))/2
});
}
else{
$img.css({
width:'100%',
height:'auto',,
marginTop: (h-ih*(w/iw))/2
});
}
});
}
w.bind('resize',onResize);
//resize on each image load event
$('img',containers).bind('load',onResize);
onResize();
});
Here is a working fiddle : http://jsfiddle.net/kHxd2/2/
The image's onload listener might need tweeking to react when cached images are rendered in IE: http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
Also you might want to set css rules for rare non-js browsers... (.myselector img{width:100%;})
EDIT : container css:
.myselector{
width: 100%;
max-width: 900px;
height: 200px;
margin: auto; /* centering */
overflow: hidden;
}
see updated fiddle: http://jsfiddle.net/kHxd2/3/
The best solution is to embed the image containers in a main wrapper div and apply the above css rules to that big container.
Here is some useful code to take care of server-side resizing : http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html

You have to put this image as background-image, and then use style:
background-image: url(url/to/your/image.png);
background-size: cover;

There is a property in css3 called as background-size:cover; and background-size:contain;. You might want to use them to suit your needs.
contain
Specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
cover
Specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

CSS, jQuery: How can I zoom a image gallery?

I have an image gallery which holds lots of inline-block containers (similar to a chess field). No when I use the browser zoom strg + mouse wheel the images get scaled so that I can see more or less depending on if I zoom out or zoom in.
My question now is how I can do this directly in jQuery (maybe with a slide) without using the browser zoom function?
Is there an easy way to do this or do I have to change all widths heights?
Regards

The first question would be how much do you want to zoom the images and how big they are. I'm asking because you will need to preload the images at their maximum resolution, could be slow with large images.
Assuming this is not an issue, what I would do is write my own function to animate both width and height; I think there is no more straightforward way.
Other than this, there are plenty of jQuery plugins out there: just Google them, I've found an interesting list on: http://www.tripwiremagazine.com/2011/10/jquery-image-zoom.html

Try also this, in compact form:
$('#image').mouseover(function()
{
$(this).animate({width: "300px", height: "300px"}, 'slow');
});
$('#image').mouseout(function()
{
$(this).animate({width: "200px", height: "200px"}, 'slow');
});