该脚本生成图形数据,然后将其作为图像绘制在画布上,从该图像获取像素数据,使其失真,然后在另一画布上实时显示失真的结果。

我想做的是使用普通图像作为数据源,以使其变形并绘制在另一个画布上。 (我需要用图片替换黑白瓷砖)

这是fiddle

HTML:

    <canvas id="canvas"></canvas>


生成图形数据并将其转换为在画布上绘制的图像的函数:

function initSettings(settings) {
    var firstColorDef = 'black';
    var secondColorDef = 'white';
    var minCountDef = 16;
    firstColor = isColor(settings.firstColor) ? settings.firstColor : firstColorDef;
    secondColor = isColor(settings.secondColor) ? settings.secondColor : secondColorDef;
    minCount = settings.minCount > 0 ? settings.minCount : minCountDef;
    draw = settings.draw !== undefined ? settings.draw : false;
    }


    this.draw = function() {
    var step = Math.min(width, height) / minCount;
        var w = width / step, wf = Math.floor(w);
        var h = height / step, hf = Math.floor(h);
    var stepX = w === wf ? step : width / wf;
        var stepY = h === hf ? step : height / hf;

        for (var y = 0; y < hf; y++) {
        for (var x = 0; x < wf; x++) {
context.fillStyle = (y + x) % 2 === 0 ? firstColor : secondColor;
            context.fillRect(x * stepX, y * stepY, stepX, stepY);
            }
        }
};


如果我尝试将其替换为以下内容:

  var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'http://th01.deviantart.net/fs70/PRE/i/2010/310/1/c/andromeda_nebula_clean_by_rah2005-d329qyj.jpg';
        img.onload = function() { context.drawImage(img, 0, 0); }


然后,甚至不创建画布,萤火虫说根本没有脚本。

任何帮助表示赞赏。

最佳答案

根据评论中的讨论,问题在于跨域策略,因为创建的画布需要来自同一域中的源。

请记住,可以通过以下方式使用CORS来反对它:

var img = new Image();
img.crossOrigin = "Anonymous";
img.src = "http://www.corsproxy.com/th01.deviantart.net/fs70/PRE/i/2010/310/1/c/andromeda_nebula_clean_by_ra‌​h2005-d329qyj.jpg";


然后从这样创建的图像构造画布。

我在这种方法上取得了不同的成功(由于给定的图像不再存在,因此无法进行实际测试)。

10-05 21:04
查看更多