html5-canvas 相关问题

我想使用纯JavaScript从图像中获取像素的颜色。我写了这个脚本，但它不起作用：我想使用纯 JavaScript 从图像中获取像素的颜色。我写了这个脚本，但它不起作用： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Get Pixel</title> <script type='text/javascript'> window.onload = function() { var canvas = document.createElement("canvas"); var pic = new Image(); pic.src = 'https://i.stack.imgur.com/uuFFg.png'; pic.onload = function() { canvas.width = pic.width; canvas.height = pic.height; var ctx = canvas.getContext("2d"); ctx.drawImage(pic, 0, 0);} var c = canvas.getContext('2d'); var p = c.getImageData(7, 7, 1, 1).data; var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2]; document.getElementById("output").innerHTML = hex; } </script> </head> <body> <div id="output"></div> </body> </html> 如何更改代码，他会正确工作吗？例如图片“”，结果应为 RGB = 255, 255, 255。您的代码本身几乎（见下文）是正确的，但不幸的是，当您使用来自页面本身之外的其他来源的图像时，由于CORS（安全功能），必须满足某些标准才能使其正常工作。您不能直接使用其他来源的图像。他们所在的服务器需要设置接受-*标头以允许这样做。如果不是，您的 getImageData 和 toDataURL 将为空白（引发您可以在控制台中看到的安全错误）。如果您无权修改服务器，解决此问题的唯一方法是使用您自己的服务器作为图像代理 (http://myServer/getImage.cgi|php|aspx...?http/otherServer/img) 正如评论中指出的，始终设置 src after onload，这样你就确定 onload 已初始化。 var pic = new Image(); pic.onload = function() { /* funky stuff here */ }; pic.src = 'http://i.imgur.com/hvGAPwJ.png'; //Last 如果正确缩进脚本，错误会变得更加明显： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Get Pixel</title> <script type='text/javascript'> window.onload = function() { var canvas = document.createElement("canvas"); var pic = new Image(); pic.src = 'http://i.imgur.com/hvGAPwJ.png'; pic.onload = function() { canvas.width = pic.width; canvas.height = pic.height; var ctx = canvas.getContext("2d"); ctx.drawImage(pic, 0, 0); } var c = canvas.getContext('2d'); var p = c.getImageData(7, 7, 1, 1).data; var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2]; document.getElementById("output").innerHTML = hex; } </script> </head> <body> <div id="output"></div> </body> </html> 您正在对图像的加载事件设置一个函数，但在更新 div 的内容之前不等待它发生。除了设置 pic.src 之外，您还应该移动 pic.onload 函数中的所有内容： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Get Pixel</title> <script type='text/javascript'> window.onload = function() { var canvas = document.createElement("canvas"); var pic = new Image(); pic.src = 'http://i.imgur.com/hvGAPwJ.png'; pic.onload = function() { canvas.width = pic.width; canvas.height = pic.height; var ctx = canvas.getContext("2d"); ctx.drawImage(pic, 0, 0); var c = canvas.getContext('2d'); var p = c.getImageData(7, 7, 1, 1).data; var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2]; document.getElementById("output").innerHTML = hex; } } </script> </head> <body> <div id="output"></div> </body> </html> 现在的问题只是跨源限制。要解决跨源限制，您可以添加此行： pic.crossOrigin = "Anonymous"; 定义图片变量后。但在某些情况下可能不起作用。没用:( 我保存并在firefox下运行并没有显示图片： <pre> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Get Pixel</title> <script type='text/javascript'> window.onload = function() { var canvas = document.createElement("canvas"); var pic = new Image(); pic.crossOrigin = "Anonymous"; pic.src = '1.jpg'; pic.onload = function() { canvas.width = pic.width; canvas.height = pic.height; var ctx = canvas.getContext("2d"); ctx.drawImage(pic, 0, 0); var c = canvas.getContext('2d'); var p = c.getImageData(7, 7, 1, 1).data; var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2]; document.getElementById("output").innerHTML = hex; } } </script> </head> <body> <div id="output"></div> </body> </html> </pre>

javascript html5-canvas

回答 4 投票 0

Fabric.Path 对象的 object.path 在 Fabric js 中缩放或更改位置时不会给出更新的路径

我在我的项目中使用 Fabric js。我有一个用例，我希望一个对象沿着其他织物对象的边界进行动画处理。类似于 Power Point 中的运动路径。为了实现这一点，我

javascript html5-canvas fabricjs

回答 2 投票 0

向画布中的覆盖图像添加透明边框轮廓

我正在开发一个项目，在 HTML Canvas 上叠加图像并为其添加圆角和阴影。但是，我面临一个问题，即

javascript html canvas graphics html5-canvas

回答 1 投票 0

在 OpenLayers 中，如何在渲染后函数中考虑旋转？

我正在尝试画一个“由内而外”的圆圈。也就是说，用除圆形区域之外的颜色填充画布。我拿了这个例子并做了一些修改；我能够做我想做的事...