CODEWITHSUNDEEP
javascripthtml5-canvas
Justin
Justin

Reputation: 410

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

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.

Upvotes: 2

Views: 4660

Answers (1)

markE
markE

Reputation: 105035

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>

Upvotes: 2

Related Questions