该脚本生成图形数据,然后将其作为图像绘制在画布上,从该图像获取像素数据,使其失真,然后在另一画布上实时显示失真的结果。
我想做的是使用普通图像作为数据源,以使其变形并绘制在另一个画布上。 (我需要用图片替换黑白瓷砖)
这是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_rah2005-d329qyj.jpg";
然后从这样创建的图像构造画布。
我在这种方法上取得了不同的成功(由于给定的图像不再存在,因此无法进行实际测试)。