javascript - 将 Canvas 内脚本生成的图像替换为常用的 jpeg

Question

该脚本生成图形数据，然后将其作为图像绘制在 Canvas 上，从该图像中获取像素数据，对其进行扭曲，然后在另一个 Canvas 上实时显示扭曲的结果。

我想做的是使用普通图像作为数据源来扭曲它并在另一个 Canvas 上绘制。 (我需要用图片替换黑白瓷砖)

这是fiddle

HTML:

    <canvas id="canvas"></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); }

然后连 Canvas 都没有创建，firebug说根本没有脚本。

感谢任何帮助。

Answer 1

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

请记住，您可以尝试通过使用 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";

然后从这样创建的图像构建 Canvas 。

我使用这种方法取得了不同程度的成功(并且无法真正测试它，因为给定的图像不再存在)。