javascript - Fabric JS:超大图像的性能(20mb+)
问题描述
我正在使用 Fabric JS 来处理非常大的图像(20mb+)。我发现与使用标准 Canvas API 相比,Fabric 在处理画布中的大图像时要慢得多。
下面的代码片段有两个输入按钮,一个用于使用标准 Canvas API 将图像添加到画布,另一个使用 Fabric JS。每个方法还将使用toDataUrl()
. 每个方法还记录 3 次:开始时间、img.onload 函数完成的时间和toDataUrl()
完成的时间。
这是一张比较我针对不同图像大小测试的导入+导出时间的表格: 500kb 到 50mb 照片的导入时间
这是一个图表,显示了 Fabric 导入 + 导出时间与 Canvas API 的性能:graph
问题:
- 为什么在画布上导入和导出大图像时,Fabric 的性能比 Canvas API 慢得多?
- 使用大图像时有没有办法提高 Fabric 的性能?
- 我的测试用例是否准确地代表了 Fabric 的性能?
// Standard Import
function handleFiles(e) {
var t0 = performance.now();
console.log('Standard Import')
console.log('Start Time: ', Math.round(t0/1000))
var promise = new Promise(function(resolve) {
var URL = window.webkitURL || window.URL;
var ctx = document.getElementById('canvas').getContext('2d');
canvas = document.getElementById('canvas');
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
resolve("done")
};
img.src = url;
});
promise.then(function(result) {
var t1 = performance.now()
console.log('Done img.onload() Elapsed Time: ', Math.round(t1 - t0)/1000);
var dataURL = canvas.toDataURL('image/png')
return
}).then(function(result){
t2 = performance.now()
console.log('Done canvas.ToDataURL() Elapsed Time: ', Math.round(t2 - t0)/1000)
return
});
}
// Fabric Import
function handleFilesFabric(e) {
var t0 = performance.now();
console.log('Fabric Import')
console.log('Start Time: ', Math.round(t0/1000))
var promise = new Promise(function(resolve) {
var canvas = new fabric.Canvas('canvas');
var reader = new FileReader();
reader.onload = function (event){
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
var image = new fabric.Image(imgObj);
canvas.setHeight(imgObj.height);
canvas.setWidth(imgObj.width);
canvas.add(image);
canvas.renderAll();
canvas.forEachObject(function(object){
object.selectable = false;
});
resolve("done")
}
}
reader.readAsDataURL(e.target.files[0]);
});
promise.then(function(result) {
var t1 = performance.now()
console.log('Done img.onload() Elapsed Time: ', Math.round(t1 - t0)/1000);
var dataURL = canvas.toDataURL('image/png')
return
}).then(function(result){
t2 = performance.now()
console.log('Done canvas.ToDataURL() Elapsed Time: ', Math.round(t2 - t0)/1000)
return
});
}
window.onload = function() {
// Standard Import
var input = document.getElementById('input');
input.addEventListener('change', handleFiles, false);
// Fabric Import
var input2 = document.getElementById('input2');
input2.addEventListener('change', handleFilesFabric, false);
};
canvas {
border: 2px solid;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Upload & Display Image w/ Canvas</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.min.js"></script>
</head>
<body>
<h1> Upload & Display Image</h1>
<canvas width="400" height="400" id="canvas"></canvas>
<br>
<b>Standard Add Image</b><br>
<input type="file" id="input"/>
<br>
<b>Fabric Add Image</b><br>
<input type="file" id="input2"/>
<script src="js/index.js"></script>
</body>
</html>
解决方案
为了更公平,我对代码进行了一些重构:加载图像的方式相同,并且两个事件在两个不同的画布上依次运行。
还要删除对这个测试没有意义的额外的 fabricJS 功能。我认为对于更大的图像,差异现在应该更低,您可以尝试使用大图像的片段吗?
顺便说一句,您无法将文件中的 URL.createObjectUrl 与 dataUrl 上的文件阅读器进行比较。只是不公平。createObjectUrl 在内存中创建对您上传的文件的引用。
ReadAsDataUrl 读取文件,在 base64 中编码,创建一个字符串对象,然后浏览器必须再次读取该字符串,从 base64 解码。
不同之处也可能在于fabricJS 使用drawImage 和9 args 绘制图像,而您使用的是3 args 版本。
// Standard Import
fabric.Object.prototype.objectCaching = false;
function handleFiles(e) {
var t0 = performance.now();
var promise = new Promise(function(resolve) {
var URL = window.webkitURL || window.URL;
var ctx = document.getElementById('canvas').getContext('2d');
canvas = document.getElementById('canvas');
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
console.log('Standard Import')
console.log('Start Time: ', Math.round(t0/1000))
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
resolve("done")
};
img.src = url;
});
promise.then(function(result) {
var t1 = performance.now()
console.log('Done img.onload() Elapsed Time: ', Math.round(t1 - t0)/1000);
var dataURL = canvas.toDataURL('image/png')
return
}).then(function(result){
t2 = performance.now()
console.log('Done canvas.ToDataURL() Elapsed Time: ', Math.round(t2 - t0)/1000)
return
});
}
// Fabric Import
function handleFilesFabric(e) {
var t0 = performance.now();
var canvas = new fabric.StaticCanvas('canvas2', {enableRetinaScaling: false, renderOnAddRemove: false });
var promise = new Promise(function(resolve) {
var reader = new FileReader();
var URL = window.webkitURL || window.URL;
var url = URL.createObjectURL(e.target.files[0]);
var imgObj = new Image();
imgObj.onload = function () {
console.log('Fabric Import')
console.log('Start Time: ', Math.round(t0/1000))
var image = new fabric.Image(imgObj);
canvas.setDimensions({ width: imgObj.width, height: imgObj.height});
canvas.add(image);
resolve("done")
}
imgObj.src = url;
});
promise.then(function(result) {
var t1 = performance.now()
console.log('Done img.onload() Elapsed Time: ', Math.round(t1 - t0)/1000);
canvas.renderAll();
var dataURL = canvas.lowerCanvasEl.toDataURL('image/png')
return
}).then(function(result){
t2 = performance.now()
console.log('Done canvas.ToDataURL() Elapsed Time: ', Math.round(t2 - t0)/1000)
return
});
}
window.onload = function() {
// Standard Import
var input = document.getElementById('input');
input.addEventListener('change', handleFiles, false);
input.addEventListener('change', handleFilesFabric, false);
};
canvas {
border: 2px solid;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Upload & Display Image w/ Canvas</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.min.js"></script>
</head>
<body>
<h1> Upload & Display Image</h1>
<canvas width="400" height="400" id="canvas"></canvas>
<canvas width="400" height="400" id="canvas2"></canvas>
<br>
<b>Standard Add Image</b><br>
<input type="file" id="input"/>
<br>
</body>
</html>
推荐阅读
- python - 安装了 pytest 但在 bash 中运行 `pytest` 返回 `not found`
- c++ - 考虑到危险,为什么项目使用 -I include 开关?
- xslt - XSLT 1.0 循环遍历同一父节点的不同子节点
- amazon-dynamodb-dax - DynamoDB DAX 和高可用性
- c++ - /clang:-1: Xcode 上的链接器命令失败,退出代码为 1(使用 -v 查看调用)
- machine-learning - 机器学习中的图像预处理
- javascript - 在 React 中使用 JS ES6 承诺的问题 - TypeError: Cannot read property 'then' of undefined
- javascript - 如何在客户端从 mongodb 获取数据?
- c - 使用双下划线时启用编译器警告
- python - 使用 tensorflow 加载 LSUN 数据集