Develop Reference

Is it possible to scale a drag image

I am doing drag and drop and want to use a different drag image than the default. But I would also like to scale the size of the drag image depending on the size of the element where the drag starts. I have tried doing the following:
<div id="drag-with-image" draggable="true">drag me</div>
<script>
document.getElementById("drag-with-image").addEventListener("dragstart", function(e) {
var img = document.createElement("img");
img.src = "https://www.w3schools.com/css/paris.jpg";
img.style.width = "60px";
img.style.height = "40px";
e.dataTransfer.setDragImage(img, 0, 0);
}, false);
</script>
But the drag image is always displayed as full size.
Is there any way the drag image size can be scaled dynamically?

Yes, it is possible to scale a custom drag image.
The Problem
If you're using setDragImage with an image element, what will be drawn is the image in its intrinsic size (content size before any modification). This means that setting the image size doesn't help. However, as mentioned in MDN Docs, you can also set a drag image to be something else:
If Element is an img element, then set the drag data store bitmap to the element's image (at its intrinsic size); otherwise, set the drag data store bitmap to an image generated from the given element (the exact mechanism for doing so is not currently specified).
Furthermore, it also mentions that the "other elements" can be any visible element or even a <canvas>:
However, if a custom image is desired, the DataTransfer.setDragImage() method can be used to set the custom image to be used. The image will typically be an element but it can also be a or any other visible element.
Solution
To draw an image that is smaller than its intrinsic size and setting it to drag image, you can:
Load the image to an image element
Create a canvas to be drawn with the image
When drawing to the canvas, adjust the width and height of the drawn image accordingly
Here's a working example.
document.getElementById('drag-with-image').addEventListener('dragstart', function(e) {
var img = document.createElement('img')
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
// Setting img src
img.src = 'https://www.w3schools.com/css/paris.jpg'
// Drawing to canvas with a smaller size
canvas.width = img.width * 0.1
canvas.height = img.height * 0.1
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
// Setting drag image with drawn canvas image
e.dataTransfer.setDragImage(canvas, 0, 0)
}, false)
<div id="drag-with-image" draggable="true">drag me</div>

HTML2Canvas Options Syntax

I'm struggling pretty hard with the documentation on the HTML2Canvas script. Specifically the options located here. I've figured out the syntax somewhat by using objects like this: html2canvas(element, {option: value}); but I have no idea what actual values the script is expecting.
My specific goal with this is to have a div that shows on my site that's roughly 1000px x 500px but saves an image double that size. (I want to save a 1920 x 1080 image, but I want the customizable div to fit comfortably on the screen while it's built.)
I'm guessing I need to use a combination of the width, height, scale, windowWidth, and windowHeight options, but I can only figure out the value syntax for width and height. Is anyone out there familiar with this script that can point me in the right direction?

Here is an example from my own website - I grab the contents of a div on the page, then render it to canvas like this:
var target_container = document.getElementById("id_of_div_I_want_to_render_on_canvas");
html2canvas(target_container, {
onrendered: function(canvas) {
var canvas_image = canvas.toDataURL("image/png"), // change output image type here
img = new Image(); // create a new blank image
img.src = canvas_image; // set the canvas_image as the new image's source
img.width = el.offsetWidth; // make the image the same width and height as the target container
img.height = el.offsetHeight;
img.onload = function () {
// do stuff
});
},
width: <set your desired canvas width if you do not use my sizing above for img.width, img.height - e.g. '1000px'>,
height: <set your height e.g. '500px'>
});
For my purposes, the key property is the onrendered callback, which allows you to call a function after render and store the "on the fly" generated canvas in an image.

Download original Canvas even after resizing

Click here to view image
Step1) I am drawing an image of 1920*1080 to canvas1 with the drawImage(image,0,0);
setp2) Now i am taking another logo image and drawing it to another canvas called canvas2 with the drawImage(logo,0,0);
I used fabricjs to for logo drag able and re sizable functionalities.
Step3) Then i am drawing canvas1 & canvas2 to another canvas called canvas3 and downloading it.
In this case everything is fine except image is displaying large(1920*1080). for user experience I have used image resize method to reduce the image and displayed in 900*500 canvas. But when i am downloding i should get the original canvas of 1920*1080 with logo. But i am getting 900*500 with logo.
Can any one help in this regards will be greatful
The resizing code
Here real width & real Height are width & height of background image
function ImageResize(){
var d_canvas = document.getElementById('canvas');
var context = d_canvas.getContext('2d');
var background = document.getElementById('background');
var wrh = realWidth / realHeight;
newWidth = d_canvas.width;
newHeight = newWidth / wrh;
if (newHeight > d_canvas.height) {
newHeight = d_canvas.height;
newWidth = newHeight * wrh;
}
context.drawImage(background,0,0, newWidth , newHeight);
}

Use the extended form of drawImage to scale and reposition the logo over the original background image:
Create a 3rd html5 canvas sized to 1920x1080 and draw your step1-image to the 3rd canvas.
Recalculate the Logo coordinates & sizes provided by FabricJS from 900x500 to 1920x1080:
// pseudo-code
// Given FabricJS's position & size of the logo on a 950x500 stage
// Calc the logo's relative position & size vs a larger background
logoX *= 1920/900;
logoY *= 1080/500;
logoWidth *= 1920/900;
logoHeight *= 1080/500;
Draw the logo onto the 3rd canvas using the recalculated position & size
thirdContext.drawImage(
logoImage,
0,0,logoImage.width,logoImage.height,
logoX,logoY,logoWidth,logoHeight
);
Export the 3rd canvas

Get x and y co-ordinate of image on mouse over

I am trying to get x and y co-ordinate on mouse move event of image
Now there are 2 scenarios which i think is utmost important for getting exact co-ordinates
Note : also i need to put zoomer on image hover
If you want to apply zoomer then image must be displayed in less
height and width div than original width and height
In first scenario, i will display the image as it is without any height and width limitations
But in this scenario i won't be able to apply zoomer as per mentioned in above note
Suppose i have image of pixel 2000x1500 then below code works very smoothly
var mouseMove = function(e) {
var X = Math.round((e.pageX - img.offset().left);
var Y = Math.round((e.pageY - img.offset().top));
};
In second scenario, i will display image in fix width and height div which will be smaller than image width and height
Suppose div width and height is 850x750 and you are displaying image of dimension 2000x1500 in that div
Now to get exact x and y co-ordinate code is
$(document).ready(function() {
$('#competition').on('load', function(e) {
naturalWidth = e.target.naturalWidth;
});
});
var mouseMove = function(e) {
var img = $('#competition'); // div in which image is loaded
// naturalWidth is origional width of image
// img.width() is width of div
ratio = (naturalWidth / img.width());
var X = Math.round((e.pageX - img.offset().left) * ratio);
var Y = Math.round((e.pageY - img.offset().top) * ratio);
};
Now what happens in second scenario is, when i move mouse horizontally, it gives 3 pixel difference after each mouse move event for x co-ordinate like 1 4 7 10 13
But i want to catch every single pixel of image
Any help would be greatly accepted...

Move images rendered on highcharts on resize

I'm adding an image to the lower right hand corner of a chart in the chart loading event using the chartWidth and chartHeight properties to calculate the left / top offsets.
chart.renderer.image('img.png', left, top, 30, 30).add();
When the browser window resizes the chart also resizes, but the image remains fixed at the position set above. When the chart shrinks in width, I'd like to re-position the image based on the new chart width.
Is it possible to move the element using some javascript or do I have to remove it and make the above call again with the new position?

Why not on resize remove the image, then once the chart is done being resized, recalculate the position and add the image back?

I ended up storing a reference to the original width of the chart and the image. Then on resize, I'm shifting the image by the offset of the two widths -
var img, originalWidth;
function chartLoad(chart) {
var top = 100, left = 100;
originalWidth = chart.chartWidth;
img = chart.renderer.image('img.png', left, top, 30, 30).add();
}
function chartResize(e) {
var offset = e.target.chartWidth - originalWidth;
img.translate(offset, 0);
}