We Keep Coding

How to generate a html2canvas images with a hidden source (html) div

I am working in a project where I need to generate a profile picture of any member and its reviews, and some data, I started working with GDI, but it was so hard to understand, so I searched for other options and found Html2Canvas that works with javascript/jquery, everything is fine, the only thing I couldn't handle, and would like to know if there is a way to hide the source html div without breaking the result image.
Ex:
This is how is it now
This is how it should look
So, when I apply display:none on the css of the source div, the image result is like this:
And finally here is the code that I have so far
var div_to_hide = $("#mydiv:hidden");
$(function() {
$('span.stars').stars();
});
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
$.fn.stars = function() {
return $(this).each(function() {
var val = parseFloat($(this).html());
val = Math.round(val * 4) / 4;
var size = Math.max(0, (Math.min(5, val))) * 16;
var $span = $('<span />').width(size);
$(this).html($span);
});
}
https://jsfiddle.net/ricardojriosr/6ap9Lx1f/8/
Now the question is how do I made this work showing only the image and not the HTML source. Thanks in advace.

Instead of trying to hide it before, hide (or remove) it after the canvas is rendered.
I'm not sure why var div_to_hide equals $("#mydiv:hidden"); but if you change it to var div_to_hide = $("#mydiv"); then, on line 12, after appending the image, you can run div_to_hide.hide();
And to avoid a flash of the HTML content, you can use some CSS trickery to cover up the original HTML. I made an example here, but you can adjust to fit whatever your actual needs are. https://jsfiddle.net/m5zq2kzn/

I had the same issue.
The solution that worked for me is a css trickery to position the div that I want to hide offscreen:
.offscreen {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
Then use it like this:
html2canvas(document.getElementById("ticket_template"))
.then((canvas) => {
let imgData = canvas.toDataURL('image/png');
});

How to add parameter to image url with JavaScript

I can embed images on my page with specified width and height (like this: <img src="image.php?w=100&h=100">)
I want to load different image sizes depending on device screen width:
100x100 for screen widths lower than 600px and 200x200 in other cases. As I understand php knows nothing about user screen so I have to use JS.
This didn't work:
<img src="image.php?<script>document.write('w=100&h=100')</script>">
That worked:
<script>document.write('<img src="image.php?w=100&h=100">')</script>
Is that a correct way for doing this? Any consequences I should take into consideration?

You can use that code. But I think that bst way is to change src of images on the server side.
function addParams(w, h) {
var img = document.querySelectorAll("img.withParams");
for (var i = 0; i < img.length; i++) {
img[i].src = img[i].src + "?w=" + w + "&h=" + h;
}
}
window.addEventListener("load", function () {
addParams(10, 10);
})
<img class="withParams" src="img.php"/>
<img src="img.php" />
<img class="withParams" src="img.php" />

if-image-height JavaScript statement

I have a grid of several images on my website. Hovering on one of these images will display a label with a name and price. The problem is that some images have a smaller height, and then the label gets too close to the bottom. Now I'm trying to write a JS if-statement in order to decrease the margin-top of that label only if the image-height is less than 200px.
This is how my html looks like:
<div class="fw_preview_wrapper">
<img src="'.$row['imageURL'].'" alt="" class="fw_featured_image" id="product_image" width="540">
<span class="price_tag" id="price_tag"><span class="actual_price">€ '.$row['Price'].'</span>
As you can see, the image URL is variable and comes from a database via php. For the js function, I set id="product_image".
This is the CSS part:
span.price_tag {
top: 86%;
}
As you can see above, there is a margin top set to 86%. This very value needs to be changed to "80%" when an image has a height of less than 200px.
and finally, the JS part:
<script>
var img = document.getElementById('#product_image');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
if(height < 200){
$("span.price_tag").css('top','80%');
}
</script>
It doesn't work. I would appreciate some help. Thanks in advance!

Don't use hash # within param for getElementById:
var img = document.getElementById('product_image');
However you're using jQuery too, seeing your code, why not do just like this:
var img = $('#product_image');
var width = img.width();
var height = img.height();
if(height < 200){
$("span.price_tag").css('top','80%');
}

in javascript you should be using:
var img = document.getElementById('product_image');
# is used in jquery like: var img = $("#product_image")

remove # from the element getting statement , we use # to specify id in Jquery and not in js
try this..
<script type="text/javascript">
var img = document.getElementById('product_image');
var width = img.clientWidth;
var height = img.clientHeight;
if(height < 200)
$("span.price_tag").css('top','80%');
</script>

How can I resize the recaptcha in Greasemonkey?

I want to re size the text from the captcha to be easier to see, with Greasemonkey.
How can I do it?
For example, I have this captcha:
<div id="recaptcha_image" style="width: 300px; height: 57px; ">
<img style="display:block;" height="57" width="300" src="http://www.google.com/recaptcha/api/image?c=03AHJ_VuuqeICMpU36GlHCSchBzERwiDzTH4A1RHobtEpbbSK5lWC47EVkgeuF_ause8bnYTHGhjRr_GFiVMh9e4sZFXIBlv4-vcY7WXNjtBHhVmIl2Z5tqK_CY5hRZjtr-MWDUrBOr7mQE0ZqfU8XeeUeXLM5cxcwEQ">
</div>
I want to change the height="57" and the width="300" from the second line (from the image style) to 85 and 450 respectively.
Changing it into the inspect works correctly, but how can I do to do it always with Greasemonkey?

These userContent.css entries might work:
div#recaptcha_image,
div#recaptcha_image > img {
width: 450px !important;
height: 85px !important;
}

Since this is Greasemonkey, I'm going to assume you're using a reasonably up-to-date version of Firefox. In which case, you might be able to use querySelector:
var query = document.querySelector("#recaptcha_image > img");
if (query) {
query.style.width = "450px !important";
query.style.height = "85px !important";
}
If that doesn't work, you can try setting the img's attributes instead:
var query = document.querySelector("#recaptcha_image > img");
if (query) {
query.setAttribute("width", "450");
query.setAttribute("height", "85");
}
If that doesn't work, you can try setting both the box and the img:
var element = document.getElementById("recaptcha_image");
if (element) {
element.style.width = "450px !important";
element.style.height = "85px !important";
}
var query = element.querySelector("img");
if (query) {
query.setAttribute("width", "450");
query.setAttribute("height", "85");
}

Do:
var img = document.evaluate("//div[#id='recaptcha_image']/img", document, null, 9, null).singleNodeValue;
img.setAttribute('width', '85');
img.setAttribute('height', '450');
If the recaptcha is in an iframe, then #include the iframe's url, and not the parent's url, but note that this'll probably change the size of recaptcha's on every site, so you may want to check that window.top.location for window.top is the desired location.

jQuery find height of an image even if it is not set in the HTML

I have, what I think is, a strange issue. I am running a simple query that finds the largest image on a page. Here is some test data - all images are 32x32 but one is sized to 300x300.
<img src="app/assets/images/icons/blue.png" />
<img src="app/assets/images/icons/error.png"/>
<img src="app/assets/images/icons/info.png" height="300" width="300"/>
If I run a simple query like this:
$('img').each(function(){
console.log($(this).height());
});
I will get 0,0,300 — and not 32,32,300.
Can anyone point me to a better method of finding the size the image is being rendered at?
Thanks.

If the image is "natively" sized, i.e. no width or height are present in the HTML, you'll need to wait for the image to load before you know its size. I use this:
jQuery("img").each(function(){
var img = jQuery(this);
if (img.attr("complete")) {
console.log(img.height());
} else {
img.load(function(){
console.log(img.height());
});
}
});

Make sure you do it after the image is ready in $(img).load(), then it will work. Try JavaScript to verify:
function iLoad(isrc) {
var oImg = new Image();
oImg.src = isrc;
if (oImg.complete) {
window.alert(oImg.src + ' ' + oImg.width + ' x ' + oImg.height);