Question

我的游戏功能setHighlight将图像绘制到内存中的画布，突出显示ImageData对象中不是[0的rgba值]的所有像素绿色; 0,0,0]但是，我想将这个新创建的ImageData对象存储在我的对象中，或者＆＃34; class＆＃34;，变量。

我有两个对象变量，一个名为 parentResource ， parentResourceHighlight 。

parentResource 是原始的，未更改的Image对象。我想将ImageData函数返回的已编辑setHighlight对象存储在 parentResourceHighlight 变量中，以便以后可以使用drawImage函数绘制。我怎么能这样做？

我知道我可以使用putImageData来绘制新创建的数据，但我需要使用drawImage代替。至于我所知，ImageData对象（由我的函数返回）不适用于它。有没有办法可以使用putImageData绘制图像，然后将其从画布位图复制到实际的Image或可绘制对象中？

tl; dr＆＃34; HTML5，我可以从ImageData对象创建一个Image对象吗？＆＃34;

谢谢，我希望我的问题清楚！如果您对任何部分感到困惑，请说出来。

Answer 1

您可以像这样从imageData创建一个图像对象：

创建临时画布并将修改后的imageData放在临时画布上
使用临时画布.toDataURL创建图像对象
使用drawImage在您需要的地方绘制图像对象

演示：http://jsfiddle.net/m1erickson/4SW9k/

示例代码：

<!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>

HTML5，我可以从ImageData对象创建一个Image对象吗？

1 个答案: