标签: getimagedata

是否可以在鼠标下方获取RGB值像素？有一个完整的例子吗？这是我到目前为止所拥有的:

<script>
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.src = 'Your URL';

  img.onload = function(){
    ctx.drawImage(img,0,0);


  };

  canvas.onmousemove = function(e) {
        var mouseX, mouseY;

        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
        var c = ctx.getImageData(mouseX, mouseY, 1, 1).data;

        $('#ttip').css({'left':mouseX+20, 'top':mouseY+20}).html(c[0]+'-'+c[1]+'-'+c[2]);
  };
}

</script>

我正在尝试将galery中的照片添加到a ImageView但是我收到此错误:

java.lang.RuntimeException:将结果ResultInfo {who = null,request = 1,result = -1,data = Intent {dat = content:// media/external/images/media/1}}传递给activity {hotMetter. pack/hotMetter.pack.GetPhoto}:java.lang.NullPointerException

这是我的代码:

      Intent intent = new Intent();
      intent.setType("image/*");
      intent.setAction(Intent.ACTION_GET_CONTENT);

      startActivityForResult(Intent.createChooser(intent,"Select Picture"), SELECT_PICTURE);
}
Bitmap bitmap=null;
public void onActivityResult(int requestCode, int resultCode, Intent data)
{

    if (resultCode == Activity.RESULT_OK)
    {
        if (requestCode == SELECT_PICTURE) 
        {
             Uri selectedImageUri = data.getData();           
             selectedImagePath = getPath(selectedImageUri);             
             tv.setText(selectedImagePath);
             img.setImageURI(selectedImageUri); 
         }
    }


 public String getPath(Uri uri) 
    {
        String[] projection = { MediaStore.Images.Media.DATA };
        Cursor cursor = managedQuery(uri, projection, null, …

我的网页上有画布; 我在这个画布中创建了一个新的Image数据,然后我通过myImgData.data []数组修改了一些像素.现在我想缩放此图像并使其更大.我尝试通过缩放上下文但图像仍然很小.是否有可能做到这一点？谢谢

我想在代码中创建一个新的ImageData对象.如果我Uint8ClampedArray想要制作一个图像对象,那么最好的方法是什么？

我想我可以创建一个新的canvas元素,提取它的ImageData并覆盖它的数据属性,但这似乎是一个错误的方法.

如果我可以直接使用ImageData构造函数会很好,但我无法弄清楚如何.

我想知道是否有一种方法可以动态修改/访问html图像中包含的数据,就好像它们是html5 canvas元素一样.使用canvas,你可以在javascript中使用getImageData()和putImageData()访问原始像素数据,但到目前为止我还没有弄清楚如何用图像来做这件事.

我试图使用PDF.js读取整个.pdf文档,然后在单个画布上渲染所有页面.

我的想法:将每个页面渲染到画布上并获取ImageData(context.getImageData()),清除画布做下一页.我将所有ImageDatas存储在一个数组中,一旦所有页面都在那里,我想将数组中的所有ImageDatas放到一个画布上.

var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
    //Prepare some things
    var canvas = document.getElementById('cv');
    var context = canvas.getContext('2d');
    var scale = 1.5;
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
        pdf = _pdf;
        //Render all the pages on a single canvas
        for(var i = 1; i <= pdf.numPages; i ++){
            pdf.getPage(i).then(function getPage(page){
                var viewport = page.getViewport(scale);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                page.render({canvasContext: context, viewport: viewport});
                pages[i-1] = context.getImageData(0, 0, canvas.width, canvas.height);
                context.clearRect(0, 0, canvas.width, canvas.height);
                p.Out("pre-rendered page …

我正在写第一个Chrome扩展程序.我正在尝试使用jQuery和jQuery Image Desaturate插件在http://www.flickr.com上对页面上的图像进行去饱和处理.

我在我的background.html中以编程方式加载我的脚本(以及jQuery和插件):

  // On browser action click, we load jQuery and the desaturate plugin, then 
  // call our own flickrnoir.js to desaturate the photo.
  chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
      chrome.tabs.executeScript(null, {file: "jQuery.desaturate.js" }, function() {
        chrome.tabs.executeScript(null, { file: "flickrnoir.js" });
      })
    });
  });

我在我的Flickr页面中指定了权限manifest.json:

"permissions": [
  "tabs", "http://www.flickr.com/", "http://*.static.flickr.com/"
]

这看起来工作得很好,例如,我可以将Flickr照片页面上所有div的背景添加为红色flickrnoir.js,然后打开Flickr页面并点击我的扩展程序按钮:

$("div").css("background-color", "#ff0000");

...所以,我成功加载了jQuery,它可以成功访问和更改http://*.flickr.com/*页面的DOM元素.

但是,当我尝试使用去饱和插件去饱和图像(或者所有图像,实际上)时,我遇到了安全错误.我的代码:

$("img").desaturate();

...最终以运行此行的jQuery.desaturate插件的代码结束:

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH); …

后台设置

我有一个Web应用程序,处理从一组其他图像创建图像.我选择这样做的方法是通过读取一组图像并将它们放在HTML画布上.然后,我将每个画布作为jpeg导出到第三方API toDataURL,并将其转换为Blob.我面临的问题是,我有很多这些画布都将数据导出为jpg,并且消耗了大量资源.当每个画布尝试调用时,应用程序会变慢并变得无响应toDataURL.

题

我发现调用画布toDataUrl()或者toBlob()可能非常慢,特别是对于大画布尺寸.我想利用Web worker的多线程特性.

首先,我尝试传入canvas对象但是抛出了一个错误.事实证明,对象是一个问题,它们似乎要么被转换为字符串,要么在无法克隆时失败.无论哪种方式,我发现传递上下文的图像数据确实有效.数据以原始RGB值的形式传递,作为Uint8ClampedArray画布上下文的方法getImageData().

Main.js

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var worker = new Worker('myWorker.js');
worker.postMessage({
  image: context.getImageData(0, 0, canvas.width, canvas.height)
});

myWorker.js

this.onmessage = function(e) {
  // GOAL: turn e.data.image into an image blob or dataUrl and return it.
  // e.g. this.postMessage(new Blob([e.data.image.data], {type: 'image/jpg'});
}

我认为归结为知道如何将Uint8ClampedArray包含RGB信息的转换为jpg/png数据.

我认为这可能有用的原因是我认为getImageData只是从画布上下文复制现有的数据结构,因此没有那么昂贵toDataUrl.我在调用类似于下面代码块的内容时捕获了cpu配置文件:

var image = context.getImageData(0, 0, canvas.width, canvas.height)
var …

我正在做一些HTML5游戏,并且在地图开头加载我的精灵时,我使用GetImageData()/循环遍历所有图像/ PutImageData().

这在我的电脑上运行得非常好,然而,在我的手机上,它的速度非常慢.

PC: 5-6 ms
iPhone 4: 300-600 ms
Android HTC Desire S: 2500-3000 ms

我一直在做一些非常基本的基准测试,并且GetImageData和PutImageData都运行得非常快,需要很长时间的是循环内容.

现在,我显然希望手机放慢速度,但1000x听起来有点过分,加载大约需要4分钟,因此我的HTC无法正常工作.此外,游戏中的其他所有内容都以非常合理的速度运行(主要是因为屏幕更小,但仍然,它在手机上的JS工作得非常好)

我在这个处理中所做的基本上是将精灵"变暗"到一定程度.我只是循环遍历所有像素,并将它们乘以值<1.这就是全部.

因为这太慢了......使用Canvas功能(合成,不透明等等)是否有更好的方法来做同样的事情,而不是逐个遍历所有像素？

注意:此图层具有一些100%透明像素,以及一些100%不透明像素.两者都需要保持100%不透明或100%透明.

我想到的事情是行不通的:
1)用新的画布绘制精灵,不透明度较低.这不起作用,因为我需要精灵保持不透明,只是更暗.
2)绘制精灵,并在它们上面画一个半透明的黑色矩形.这会让它们变暗,但它也会使我的透明像素不再透明......

有任何想法吗？

这是我正在使用的代码,以防万一你看到一些非常愚蠢的东西:

function DarkenCanvas(baseImage, ratio) {
    var tmpCanvas = document.createElement("canvas");
    tmpCanvas.width = baseImage.width;
    tmpCanvas.height = baseImage.height;
    var ctx = tmpCanvas.getContext("2d");
    ctx.drawImage(baseImage, 0, 0);

    var pixelData = ctx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height);
    var length = pixelData.data.length;
    for (var i = 0; i < length; i+= 4) {
        pixelData.data[i] = pixelData.data[i] * ratio;
        pixelData.data[i + 1] = …

客户需要帮助提取产品图像主色的程序.

我能够在Javascript中快速实现这一点; 下面的算法仅对图像上的3x3网格的中心正方形进行采样,以便快速估计图像中的T恤颜色.

var image = new Image();
image.onload = function() {
    try {
        // get dominant color by sampling the central square of a 3x3 grid on image
        var dominantColor = getDominantColor();

        // output color
        $("#output").html(dominantColor);
    }
    catch(e) {
        $("#output").html(e);
    }
};
image.src = "sample_image.jpg";

function getDominantColor() {

    // Copy image to canvas
    var canvas = $("<canvas/>")[0];
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);

    // get pixels from the central square of a 3x3 grid
    var imageData …