Javascript Fabric.js似乎仅限于2048纹理大小,尽管使用了WebGL
我正在设置一个应用程序,允许用户上传一幅图像并进行一些小的修改(缩放、亮度、旋转等)。我遇到了亮度调整的问题,Fabric.js只是重新绘制了图像的2048 x 2048部分,而不是整个图像。这是尽管最大纹理大小为16384 我上传的图像很大(5400 x 3600),但这是故意的。现在甚至手机都有高分辨率的摄像头,所以我需要为用户上传大图像做好准备 我发现,如果在加载图像后立即将其随机调整0.5的大小,那么亮度调整就可以正常工作。这并不是世界末日,但我需要知道在收到任何图像后,要调整图像的大小有多远。那么,有没有一种方法可以计算当前的纹理大小,然后将其调整到我可以确定Fabric.js能够处理的大小?我认为当前的纹理大小可能是图像像素宽度或高度中较大的一个,但肯定有问题,因为我当前的图像将为5400,远低于最大值16384(将其大小调整一半将使其降至2700,仍高于2048,但这实际上是可行的) 关于如何:Javascript Fabric.js似乎仅限于2048纹理大小,尽管使用了WebGL,javascript,fabricjs,Javascript,Fabricjs,我正在设置一个应用程序,允许用户上传一幅图像并进行一些小的修改(缩放、亮度、旋转等)。我遇到了亮度调整的问题,Fabric.js只是重新绘制了图像的2048 x 2048部分,而不是整个图像。这是尽管最大纹理大小为16384 我上传的图像很大(5400 x 3600),但这是故意的。现在甚至手机都有高分辨率的摄像头,所以我需要为用户上传大图像做好准备 我发现,如果在加载图像后立即将其随机调整0.5的大小,那么亮度调整就可以正常工作。这并不是世界末日,但我需要知道在收到任何图像后,要调整图像的大小
var FabricCanvas = new fabric.Canvas('FabricCanvas');
// image file upload handler
jQuery(".FabricPhotoUpload").on("change", function( event_change ) {
var reader = new FileReader();
reader.onload = function ( event_onload ) {
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
var FabricImage = new fabric.Image(imgObj);
FabricImage.set({ angle: 0, top: 0, left: 0 });
fabric.filterBackend = fabric.initFilterBackend();
if ( fabric.isWebglSupported() ) {
fabric.textureSize = fabric.maxTextureSize;
}
FabricCanvas.add(FabricImage);
FabricCanvas.renderAll();
}
}
reader.readAsDataURL( event_change.target.files[0] );
event_change.target.value = "";
});
// using jQueryUI for the brightness slider
window.FabricSliderMax_Bright = 50;
jQuery( ".FabricBrightness" ).slider({
slide: function( event, ui ) {
var NewBrightness = ui.value / window.FabricSliderMax_Bright;
// for now I'm assuming FabricImage.filters[0] is the brightness filter
if ( typeof( FabricImage.filters[0] ) == "undefined" ) {
FabricImage.filters[0] = new fabric.Image.filters.Brightness({ brightness: NewBrightness });
} else {
FabricImage.filters[0].brightness = NewBrightness;
}
FabricImage.applyFilters();
FabricCanvas.renderAll();
},
max: window.FabricSliderMax_Bright,
min: -50,
value: 1
});
我也在玩maxTextureSize。 我还没有确定是否有有效的方法[预先]确定所有平台的硬件限制,但您可以直接设置
if (fabric.isWebglSupported()) fabric.textureSize = 65536;
我怀疑它肯定需要至少是mod4(每像素4字节)。。。但增量是否可以小于1k,我还没有确定