HTML5, can I create an Image object from an ImageData object?

Question

I have the function setHighlight for my game that draws an image to an in-memory canvas, highlights any pixels in the ImageData object that aren't an rgba value of [0,0,0,0] to green; however, I want to store this newly created ImageData object in my object, or "class", variable.

I have two object variables, one called parentResource and parentResourceHighlight.

parentResource is the original, unchanged Image object. I want to store the edited ImageData object returned from the setHighlight function in the parentResourceHighlight variable, so it can later be drawn with the drawImage function. How can I do this?

I know I can use putImageData to draw the newly created data, but I need to use drawImage instead. And as for as I know, an ImageData object (which is returned by my function) does not work with it. Is there a way I can use putImageData to draw the image and then copy that from the canvas bitmap into an actual Image or draw-able object?

tl;dr "HTML5, can I create an Image object from an ImageData object?"

Thanks, I hope I made my question clear! If you are confused by any parts, please say so.

score 2 · Accepted Answer · answered Jun 16 '14 at 04:16

You can create an image object from imageData like this:

Create a temp canvas and put the modified imageData on the temp canvas
Use the temp canvas .toDataURL to create an image object
Use drawImage to draw the image object where you need it

A Demo: http://jsfiddle.net/m1erickson/4SW9k/

Example Code:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw a red rect on the canvas
    ctx.fillStyle="red";
    ctx.fillRect(50,50,75,40);

    // get the canvas imageData
    var imageData=ctx.getImageData(0,0,canvas.width,canvas.height);
    var data=imageData.data;

    // replace any red pixels with green pixels
    for(var i=0;i<data.length;i+=4){
        if(data[i]>250){
            data[i]=0;
            data[i+1]=255;
        }
    }

    // clear the canvas
    ctx.clearRect(0,0,canvas.width,canvas.height);

    // create a temporary canvas
    var tempCanvas=document.createElement("canvas");
    var tempCtx=tempCanvas.getContext("2d");

    // set the temp canvas size == the canvas size
    tempCanvas.width=canvas.width;
    tempCanvas.height=canvas.height;

    // put the modified pixels on the temp canvas
    tempCtx.putImageData(imageData,0,0);

    // use the tempCanvas.toDataURL to create an img object
    var img=new Image();
    img.onload=function(){
        // drawImage the img on the canvas
        ctx.drawImage(img,0,0);
    }
    img.src=tempCanvas.toDataURL();

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

It's important to note that certain restrictions apply to the canvas element that do not apply to image elements, so even though a browser would support an image of a certain size, you might not be able to create it with a canvas. For more detail, see: https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element. — Magnus Lind Oxlund, Jan 12 '19 at 21:26

HTML5, can I create an Image object from an ImageData object?

1 Answers1