1

I have an input element with type=image:

<input type="image" src="some/url/that/generates/new/image">

I want to load that image into a canvas element. Usually I would do:

var img = new Image();
img.onLoad = function () {
   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext('2d');
   ctx.drawImage(img, 0, 0);
};
img.src = inputElement.src;

However, in this case I can not use the src attribute because doing so would generate a new image (the src points to a url that generates a new random image).

Any other ideas how to get to that image once its already loaded? In the chrome devtools I can see the image under the "Sources" tab, so its there...

--- edit

I should have mentioned that the html is not under my control, I am writing a chrome extension and I want to save to that image of the input tag (by attaching it to a post request, that already works. I just dont want to generate a new image by using the src attribute)

kmera
  • 1,725
  • 10
  • 22
  • Have you tried checking the solution in this [SO post (How to add image to canvas)](https://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas)? – MαπμQμαπkγVπ.0 Feb 04 '19 at 07:24
  • @MαπμQμαπkγVπ.0 - That has nothing to do with the question above. – T.J. Crowder Feb 04 '19 at 08:07
  • I assume that the obvious thing `ctx.drawImage(document.getElementById('existingImageTag'), 0, 0)` doesn't work for some reason? – EricLaw Feb 04 '19 at 22:19
  • 1
    @EricLaw unfortunately not, because its an input tag. it produces the following error: `TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.` – kmera Feb 05 '19 at 19:07

0 Answers0