javascript中的洪水填充算法实现答案

【问题标题】：Flood Fill Algorithm implementation in java scriptjavascript中的洪水填充算法实现
【发布时间】：2016-07-29 12:25:29
【问题描述】：

我在 java 脚本中的新功能试图通过将图像（草图）从 PC 加载到画布来实现 java 脚本中的洪水填充，但不能如果有人可以帮助我，我将非常感激提前谢谢

【问题讨论】：

只是能够将图像添加到画布这是我的代码 var can = document.getElementById('canvas'); var ctx = can.getContext('2d'); var img = new Image(); img.onload = function() { can.width = img.width; can.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); } img.src = 'zlati-nathalie.jpg';

标签： javascript flood-fill

【解决方案1】：

要在画布上绘制图像，必须先加载 iamge。这是一个如何在画布上绘制的示例：

var img = new Image();
img.onload = function() {
  //draw after loading
  canvas = document.getElementById('case_canvas');
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
}

img.src = "http://i.stack.imgur.com/xgNw7.png";
//^^ this will start loading the image

小提琴：https://jsfiddle.net/pmeb1uhm/1/

请注意：由于安全（跨域策略）限制，您在绘制系统上的图像时可能会遇到问题。您应该会在浏览器开发控制台上看到一个错误。我强烈建议不要更改浏览器的安全设置，而是在 localhost 上运行脚本并使用 localhost 加载图像。

【讨论】：

谢谢它现在对我有用，你能帮我实现洪水填充吗，我将非常感激
现在您必须访问像素数组才能启动算法。如果您不在本地服务器上工作，那么跨源策略可能会导致问题。有很多资源可以开始，例如stackoverflow.com/questions/17714742/…。这里重要的是：你得到一个包含 rows/cols/r,g,b,a 值的数组