FabricJS不能过滤器应用到大型图像由于“最大纹理尺寸”我试图使用过滤器,尺寸(5168X3448)的图像。可能有些帮助我解决这个问题?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
</head>
<body>
<button id="color">Apply color</button>
<canvas id="c" width=500 height=500></canvas>
</body>
</html>
<script>
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('driver.png', function (img) {
img.set({
scaleX: 0.1,
scaleY: 0.1,
})
canvas.add(img);
var filter = new fabric.Image.filters.BlendColor({
color: 'red',
mode: 'multiply'
});
img.filters.push(filter);
img.applyFilters();
canvas.renderAll();
}, {
crossOrigin: 'null'
});
</script>
你可以为你的画布这样设置更高的最大纹理尺寸:fabric.textureSize = 5168
。
要知道,虽然你可以使用这样一个较大的值时与硬件的支持遇到的问题。官方Fabric.js文件指出,4096 textureSize
是一个相当安全的限制,所以最好你要尽量保持低于您的图片,以避免硬件问题。