该脚本生成图形数据,然后将其作为图像绘制在 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说根本没有脚本。
感谢任何帮助。
最佳答案
根据评论中的讨论,问题在于跨域策略,因为创建的 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_rah2005-d329qyj.jpg";
然后从这样创建的图像构建 Canvas 。
我使用这种方法取得了不同程度的成功(并且无法真正测试它,因为给定的图像不再存在)。
关于javascript - 将 Canvas 内脚本生成的图像替换为常用的 jpeg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24875192/