Javascript HTML5，我可以从ImageData对象创建图像对象吗？
我为我的游戏提供了函数Javascript HTML5，我可以从ImageData对象创建图像对象吗？,javascript,html5-canvas,Javascript,Html5 Canvas,我为我的游戏提供了函数setHighlight，可以将图像绘制到内存画布上，突出显示ImageData对象中的所有像素，这些像素的rgba值不是[0,0,0,0]到绿色；但是，我想将这个新创建的ImageData对象存储在我的对象或“class”变量中 我有两个对象变量，一个叫做parentResource和parentResourceHighlight parentResource是原始的、未更改的Image对象。我想将从setHighlight函数返回的已编辑的ImageData对象存储在p
setHighlightImageDataImageDataImagesetHighlightImageDatadrawImageputImageDatadrawImageImageDataputImageDataimage谢谢，我希望我把问题说清楚！如果您对任何部分感到困惑，请这样说。您可以从imageData创建图像对象，如下所示：
- 创建临时画布并将修改后的imageData放置在临时画布上
- 使用临时canvas.toDataURL创建图像对象
- 使用drawImage在需要的位置绘制图像对象
<!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>
正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//在画布上绘制一个红色矩形
ctx.fillStyle=“红色”；
ctx.fillRect（50,50,75,40）；
//获取画布图像数据
var imageData=ctx.getImageData（0,0，canvas.width，canvas.height）；
var数据=imageData.data；
//将任何红色像素替换为绿色像素
对于（变量i=0；i250）{
数据[i]=0；
数据[i+1]=255；
}
}
//清理画布
clearRect（0,0，canvas.width，canvas.height）；
//创建临时画布
var tempCanvas=document.createElement（“画布”）；
var tempCtx=tempCanvas.getContext（“2d”）；
//设置临时画布大小==画布大小
tempCanvas.width=canvas.width；
tempCanvas.height=canvas.height；
//将修改后的像素放在临时画布上
tempCtx.putImageData（imageData，0,0）；
//使用tempCanvas.toDataURL创建img对象
var img=新图像（）；
img.onload=函数（）{
//在画布上绘制img图像
ctx.drawImage（img，0,0）；
}
img.src=tempCanvas.toDataURL（）；
}); // end$（函数（）{}）；