Question

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

我尝试做的是使用普通图像作为数据源来扭曲它并在另一个画布上绘制。（我需要用图片替换黑白瓷砖）

以下是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); }

然后即使画布也没有创建，萤火虫说根本没有剧本。

感谢任何帮助。

Answer 1

根据评论中的讨论，问题在于跨域策略，因为创建的画布需要从同一域中获取源。

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

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

我使用这种方法取得了不同的成功（并且由于给定的图像不再存在，因此无法对其进行测试。）

用普通的jpg替换canvas中脚本生成的图像

1 个答案: