使用canvas，getImageData和Web Worker一次对一个图块进行采样

Question

I am attempting to build a simple HTML5 canvas based image processor that takes an image and generates a tiled version of it with each tile being the average color of the underlying image area.

This is easy enough to do outside the context of a Web Worker but I'd like to use a worker so as not to block the ui processing thread. The Uint8ClampedArray form the data takes is giving me a headache with regards to how to process it tile by tile.

Below is a plunk demonstrating what I've done so far and how it's not working.

http://plnkr.co/edit/AiHmLM1lyJGztk8GHrso?p=preview

The relevant code is in worker.js

Here it is:

onmessage = function (e) {
    var i,
        j = 0,
        k = 0,
        data = e.data,
        imageData = data.imageData,
        tileWidth = Math.floor(data.tileWidth),
        tileHeight = Math.floor(data.tileHeight),
        width = imageData.width,
        height = imageData.height,
        tile = [],
        len = imageData.data.length,
        offset,
        processedData = [],
        tempData = [],
        timesLooped = 0,
        tileIncremented = 1;

    function sampleTileData(tileData) {
        var blockSize = 20, // only visit every x pixels
            rgb = {r:0,g:0,b:0},
            i = -4,
            count = 0,
            length = tileData.length;

            while ((i += blockSize * 4) < length) {
                if (tileData[i].r !== 0 && tileData[i].g !== 0 && tileData[i].b !== 0) {
                    ++count;
                    rgb.r += tileData[i].r;
                    rgb.g += tileData[i].g;
                    rgb.b += tileData[i].b;
                }
            }

            // ~~ used to floor values
            rgb.r = ~~(rgb.r/count);
            rgb.g = ~~(rgb.g/count);
            rgb.b = ~~(rgb.b/count);

            processedData.push(rgb);
    }

    top:
    for (; j <= len; j += (width * 4) - (tileWidth * 4), timesLooped++) {

        if (k === (tileWidth * 4) * tileHeight) {
            k = 0;
            offset = timesLooped - 1 < tileHeight ? 4 : 0;
            j = ((tileWidth * 4) * tileIncremented) - offset;
            timesLooped = 0;
            tileIncremented++;
            sampleTileData(tempData);
            tempData = [];
            //console.log('continue "top" loop for new tile');
            continue top;
        }

        for (i = 0; i < tileWidth * 4; i++) {
            k++;
            tempData.push({r: imageData.data[j+i], g: imageData.data[j+i+1], b: imageData.data[j+i+2], a: imageData.data[j+i+3]});
        }

        //console.log('continue "top" loop for new row per tile');

    }

    postMessage(processedData);
};

I'm sure there's a better way of accomplishing what I'm trying to do starting at the labeled for loop. So any alternative methods or suggestions would be much appreciated.

Update:
I've taken a different approach to solving this:

http://jsfiddle.net/TunMn/425/

Close, but no.

I know what the problem is but I have no idea how to go about amending it. Again, any help would be much appreciated.

Answer 1

Approach 1: Manually calculating average per tile

Here is one approach you can try:

• There is only need for reading, update can be done later using HW acceleration
• Use async calls for every row (or tile if the image is very wide)

This gives an accurate result but is slower and depends on CORS restrictions.

Example

You can see the original image for a blink below. This shows the asynchronous approach works as it allows the UI to update while processing the tiles in chunks.

 window.onload = function() { var img = document.querySelector("img"), canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"), w = img.naturalWidth, h = img.naturalHeight, // store average tile colors here: tileColors = []; // draw in image canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0); // MAIN CALL: calculate, when done the callback function will be invoked avgTiles(function() {console.log("done!")}); // The tiling function function avgTiles(callback) { var cols = 8, // number of tiles (make sure it produce integer value rows = 8, // for tw/th below:) tw = (w / cols)|0, // pixel width/height of each tile th = (h / rows)|0, x = 0, y = 0; (function process() { // for async processing var data, len, count, r, g, b, i; while(x < cols) { // get next tile on x axis r = g = b = i = 0; data = ctx.getImageData(x * tw, y * th, tw, th).data; // single tile len = data.length; count = len / 4; while(i < len) { // calc this tile's color average r += data[i++]; // add values for each component g += data[i++]; b += data[i++]; i++ } // store average color to array, no need to write back at this point tileColors.push({ r: (r / count)|0, g: (g / count)|0, b: (b / count)|0 }); x++; // next tile } y++; // next row, but do an async break below: if (y < rows) { x = 0; setTimeout(process, 9); // call it async to allow browser UI to update } else { // draw tiles with average colors, fillRect is faster than setting each pixel: for(y = 0; y < rows; y++) { for(x = 0; x < cols; x++) { var col = tileColors[y * cols + x]; // get stored color ctx.fillStyle = "rgb(" + col.r + "," + col.g + "," + col.b + ")"; ctx.fillRect(x * tw, y * th, tw, th); } } // we're done, invoke callback callback() } })(); // to self-invoke process() } }; 

 <canvas></canvas> <img src="http://i.imgur.com/X7ZrRkn.png" crossOrigin="anonymous"> 

Approach 2: Letting the browser do the job

We can also let the browser do the whole job exploiting interpolation and sampling.

When the browser scales an image down it will calculate the average for each new pixel. If we then turn off linear interpolation when we scale up we will get each of those average pixels as square blocks:

• Scale down image at a ratio producing number of tiles as number of pixels
• Turn off image smoothing
• Scale the small image back up to the desired size

This will be many times faster than the first approach, and you will be able to use CORS-restricted images. Just note it may not be as accurate as the first approach, however, it is possible to increase the accuracy by scaling down the image in several step, each half the size.

Example

 window.onload = function() { var img = document.querySelector("img"), canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"), w = img.naturalWidth, h = img.naturalHeight; // draw in image canvas.width = w; canvas.height = h; // scale down image so number of pixels represent number of tiles, // here use two steps so we get a more accurate result: ctx.drawImage(img, 0, 0, w, h, 0, 0, w*0.5, h*0.5); // 50% ctx.drawImage(canvas, 0, 0, w*0.5, h*0.5, 0, 0, 8, 8); // 8 tiles // turn off image-smoothing ctx.imageSmoothingEnabled = ctx.msImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.webkitImageSmoothingEnabled = false; // scale image back up ctx.drawImage(canvas, 0, 0, 8, 8, 0, 0, w, h); }; 

 <canvas></canvas> <img src="http://i.imgur.com/X7ZrRkn.png" crossOrigin="anonymous">