Wrapping a div around an image - How to make the div behave like the original image

Wrapping a div around an image - How to make the div behave like the original image

Hi everyone! I have this code, which I inject into html pages and run for every image:

  1. var _createImageColorPicker = function(widget) {
  2. // store 2D context in widget for later access
  3. widget.ctx = null;

  5. // rgb
  6. widget.color = [0, 0, 0];

  8. // create additional DOM elements.
  9. widget.$canvas = $('<canvas class="ImageColorPickerCanvas"></canvas>');

  11. // add them to the DOM
  12. widget.element.wrap('<div class="ImageColorPickerWrapper"></div>');
  13. widget.$wrapper = widget.element.parent();
  14. widget.$wrapper.append(widget.$canvas);
  15. widget.ctx = widget.$canvas.get(0).getContext('2d');

  17. // draw the image in the canvas
  18. var img = new Image();
  19. img.src = widget.element.attr("src");
  20. widget.$canvas.attr("width", img.width);
  21. widget.$canvas.attr("height", img.height);
  22. widget.ctx.drawImage(img, 0, 0);

For every image in the page, the code creates a canvas and a div and draws the image inside the canvas. I need the canvas because I need access to the RGB data of the image.

However, there is a drawback to this: the div that has been wrapped around the image has different alignment properties, floating properties and potentially even size than the image, then it messes up the layout of the page.

Is there a way to fix this? I have though of two options:

1) Avoid creating a div: is it possible to get access to the data in the canvas without appending a div to the page?
2) Make the div inherit the css properties (size, floating, etc...) of the image it contains.

I'm a total beginner in jQuery and it would be great if someone could give me a little help about how to do either of these options (or a third one, if there is a better one)

Best

ZapoTeX