我的游戏中有setHighlight函数，它将图像绘制到内存画布中，突出显示ImageData对象中不是rgba值[0,0,0,0]到绿色的任何像素;但是，我想将这个新创建的ImageData对象存储在我的对象或"类"变量中。
我有两个对象变量，一个叫做parentResource和parentResourceHighlight。
parentResource是原始的、未改变的Image对象。我想将从setHighlight函数返回的编辑后的ImageData对象存储在parentResourceHighlight变量中，以便稍后可以使用drawImage函数绘制。我该怎么做呢?
我知道我可以使用putImageData来绘制新创建的数据，但我需要使用drawImage来代替。据我所知，ImageData对象(由我的函数返回)不能与它一起工作。是否有一种方法，我可以使用putImageData绘制图像，然后从画布位图复制到实际的Image或可绘制的对象?
tl;dr "HTML5，我可以从ImageData对象创建一个图像对象吗?"
谢谢，我希望我把我的问题讲清楚了!如果你对任何部分感到困惑，请说出来你可以像这样从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>