标签: getimagedata

我使用屏幕外canvas根据某些变量的运行时值动态生成某些图像。在屏幕外画布上绘制图像后，我想获取它并在我的 web 应用程序的多个位置使用它。

策略 1：使用屏幕外画布的toDataURL()方法获取data:包含图像的URI，我可以img在页面中应该显示它的多个元素上以编程方式设置该URI 。

策略二：使用离屏canvas的getImageData()方法获取ImageData实例。用img元素替换canvas元素并调用putImageData()它们。

哪种策略在内存方面更有效？哪个更“地道”？我试图避免重复保存显示图像实例所需的内存。其他建议？

我正在尝试开发一个在Firefox 3中使用javascript中的getImageData的应用程序,但我NS_ERROR_DOM_SECURITY_ERR在getImageData调用上得到一个" ".javascript和图像目前都是由硬盘驱动器提供的,这显然是一种安全违规行为？如果它是实时的,它们都将来自同一个域,所以它不会成为问题,但我怎么能在此期间发展呢？

有没有办法使用getImageData和putImageData来缩放画布.Below是代码片段.

     var c=document.getElementById("myCanvas");
        var c2=document.getElementById("myCanvas2");
        var ctx=c.getContext("2d");
        var ctx2=c2.getContext("2d");
        ctx.fillStyle="red";
        ctx.fillRect(10,10,50,50);

        function copy(){
         var imgData=ctx.getImageData(10,10,50,50);
         ctx2.translate(133.333,0);
         ctx2.scale(0.75,1);
         ctx2.putImageData(imgData,10,70);
        }

我试过这个http://jsbin.com/efixur/1/edit.

谢谢Ajain

我想检测图像的每个像素是否在两种颜色之间的范围内。我使用getImageData获得像素颜色，但现在我不知道它是否在范围内。任何的想法？谢谢

为您提供一系列颜色,并且您希望用其内容填充画布,我知道的最快方式是:

var my_array = /* already have it */;
var img_data = ctx.createImageData(canvas.width, canvas.height);
for (var i=0; i<canvas.width*canvas.height; ++i)
    img_data[i] = my_array[i];
ctx.putImageData(img_data,0,0);

这似乎太慢了,因为我复制整个数组两次!一个让它img_data和另一个把它放在画布上.有没有办法简单地将原件my_array插入元素？

我试图生成一个随机噪音的画布,但我无法承受以60fps生成整个画布的随机像素,所以我最终在内存中使用临时画布生成一个小的64x64图块,然后使用上下文填充重复模式,让浏览器将这些字节推送到屏幕,而不是使用javascript引擎.

它的速度要快得多,即使在全屏幕上,我也可以在iOS设备上获得稳定的60fps,但是我注意到在几分钟之后fps表示会下降直到它变得很慢.

在这个小提琴我没有使用应该限制为60Hz的requestAnimationFrame,而是我使用自定义循环,在我的macbook上它以500Hz左右开始并迅速减速以强调问题.

http://jsfiddle.net/Victornpb/m42NT/2/

function loop(){
    drawNoise();
}


function drawNoise(){
    var context = canvas.getContext("2d");
    var pattern = context.createPattern(generatePattern(), "repeat");
    context.rect(0,0, canvas.width, canvas.height);
    context.fillStyle = pattern;
    context.fill()
}

//create a on memory canvas to generate a tile with 64x64 pixels of noise and return it
function generatePattern(){

    var canvas = document.createElement("canvas");
    canvas.width = 64;
    canvas.height = 64;
    var context = canvas.getContext("2d");

    var image = context.getImageData(0, 0, canvas.width, canvas.height);
    var imageData = image.data; // here we detach the pixels array from DOM …

所以我有一个 javascript/html5 页面，它对图像进行了一些繁重的操作。因为它们很重，我想在一个线程中完成这些，我使用 getImageData().data 将图像数据提取到核心。然后，核心完成所有操作并将生成的像素信息阵列发回。现在，回到主线程，我想将结果放回图像，我通过从图像加载它来创建一个新的 ImageData 对象 (var imgData = getImageData(...)) 然后我想替换数据在 ImageData 对象中，使用我从第二个线程获得的数据。但是 imgData.data = newData 没有做任何事情。除了逐个元素遍历数据数组之外，有没有办法做到这一点？

问题出在handleLineEnd函数中。我撕掉了所有不需要显示问题的线条。

没有这条线：我可以在 ctx 上绘制多个矩形。

使用该线：每个矩形都会被下一个矩形覆盖。

该代码在旧版 Chrome (118.0.5993.71) 中运行良好，而在版本 119.0.6045.106 中则无法运行

function handleLineEnd(evt) {
  {
    startDrawing = false;
    var dummy = ctx.getImageData(3, 3, 5, 5); // problem line
    ctx.drawImage(canvaslayer, 0, 0);
    ctxlayer.clearRect(0, 0, el.width, el.height);
  }
}

function handleLineEnd(evt) {
  {
    startDrawing = false;
    var dummy = ctx.getImageData(3, 3, 5, 5); // problem line
    ctx.drawImage(canvaslayer, 0, 0);
    ctxlayer.clearRect(0, 0, el.width, el.height);
  }
}

var el = document.getElementById("canvasID");
var elcontainer = document.getElementById("containerID");
var ctx = el.getContext('2d');
var startpuntX, startpuntY, …

下面的代码在 Firefox 中运行得很好，但我不明白为什么它在 Webkit 浏览器中不起作用！注意：我使用 jQuery 来选择画布元素。

    (function()
    {
        flipV=function(imageData)
        {
            var n = new Array();
            var d = imageData.data;
        // loop through over row of pixels
            for (var row=0;row<imageData.height;row++)
            {
            // loop over every column
                for (var col=0;col<imageData.width;col++)
                {
                    var si,di,sp,dp;

                // source pixel
                    sp=(imageData.width*row)+col; 

                // destination pixel
                dp=(imageData.width*((imageData.height-1)-row))+col; 

                // source and destination indexes, will always reference the red pixel
                si=sp*4;
                    di=dp*4;

                    n[di]=d[si]; // red
                    n[di+1]=d[si+1]; // green
                    n[di+2]=d[si+2]; // blue
                    n[di+3]=d[si+3]; // alpha
                }
            }
            imageData.data=n;

            return imageData; …

这个问题已经问了很多，但我只是不明白为什么这是发生在我身上。

基本上，我有一个画布和一个图像，当我尝试这样做时：

var canvas = document.getElementById('somecanvas');
var ctx = canvas.getContext('2d');
var someimage = document.createElement('img');
someimage.setAttribute('src', 'img/someimage.png');
someimage.onload = function(){
    ctx.drawImage(someimage, 0, 0, canvas.width, canvas.height);
    data = ctx.getImageData(0,0,canvas.width,canvas.height);
}

我变得难看：

“ 未捕获的DOMException：无法在'CanvasRenderingContext2D'上执行'getImageData'：画布已被跨源数据污染。位于HTMLImageElement.someimage.onload ”

我应该提到的是，我对制图还不是很陌生，对javascript来说更是如此。从文件file：\\运行时是否应该发生这种情况？

我还没有发现任何人和我有完全相同的问题，人们对其他问题的解释与托管图像的服务器有关。但是在这种情况下，它不是托管在服务器上，所以我对它们的工作方式感到困惑。或更确切地说，是行不通的。

所以我一直在用javascript开发一个有趣的在线图像效果程序,用户在图像中输入一个url并点击"enter",在屏幕上绘制图像,然后用户可以在其上运行一些效果,例如g表示灰度,b表示模糊等.

我的问题是控制台打印出:

已通过跨源资源共享策略阻止原点[origin]的重定向加载:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问.

要么:

Uncaught SecurityError:无法在'CanvasRenderingContext2D'上执行'getImageData':画布已被跨源数据污染.

我查看了这个问题的许多答案,并添加了我的chrome浏览器的扩展,它支持跨源资源共享,我的网页运行正常(经过几次重新加载后).

我发现的所有解决方案都需要在chrome中启用跨源资源共享选项,或者使用某种php和ajax调用来启用此选项.因为我在jsbin上编写代码,所以我正在寻找一个可以在纯javascript中完成的解决方案,而且我找不到任何有用的方法.如果您对可行的内容有任何想法,或者没有可能解决方案的消息,那么任何回复都将受到赞赏.

我的代码:

var background, context, image;
var docwidth, docheight;

image = new Image();
image.src = $('#image-src').val();
image.crossOrigin = "anonymous";

docwidth = $(document).outerWidth(true);
docheight = $(document).outerHeight(true);

background = document.getElementById("background");
context = background.getContext("2d");

image.onload = function() {
  background.width = docwidth;
  background.height = docheight;
  context.drawImage(image,0,0,image.width,image.height, 0, 0, docwidth, docheight);
};

function change_image_src(src) {
  image.src = $('#image-src').val();
}

// ... more image effect functions ...

function grayscale() {
  var data = context.getImageData(0, 0, …