gpt4 book ai didi

javascript - 使用 html Canvas 和 JS 操作图像上的像素数据

转载 作者:行者123 更新时间:2023-11-28 03:04:22 25 4
gpt4 key购买 nike

好的,所以我尝试在我的机器上拍摄图像并使用 Canvas 和一些 JS 对其进行操作...但是,我不断收到错误消息:

“来自来源‘file://’的图像已被跨来源资源共享策略阻止加载:无效响应。因此不允许访问来源‘null’。”

我想如果我不修改原始图像,只修改图像数据的副本,我就可以了。但是由于某种原因,它仍然不起作用。任何人都知道我应该做什么?这是我目前的代码:

$(document).ready(function() {
var canv = document.getElementById("img_canvas");
var ctx = canv.getContext("2d");
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = "img/meAndTheOcean.jpg";

$(img).load(function() {
ctx.drawImage(img, 0, 0);
var img_data = ctx.getImageData(0,0,canv.width, canv.height);
var pixels = img_data.data;
var npixels = img_data.width * img_data.height;
var cpyPixels = ctx.createImageData(img_data.width, img_data.height);
for (var i = 0; i < npixels; i++){
cpyPixels[i*4] = 255 - pixels[i*4];
cpyPixels[i*4 + 1] = 255 - pixels[i*4 + 1];
cpyPixels[i*4 + 2] = 255 - pixels[i*4 + 2];
}
ctx.putImageData(cpyPixels,0,0);
});
});

最佳答案

您很可能只需双击 html 文件即可打开此页面。而不是在本地服务器上,您可以轻松启动和获取,例如 nodejs 或 wamp。

您无法从文件源加载图像,这会导致图像来源与域来源不同。

这称为 Tainted canvas,更多信息请参见此处:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

这意味着出于安全原因,您不能访问 Canvas 数据。 http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules

关于javascript - 使用 html Canvas 和 JS 操作图像上的像素数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33248083/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com