如何在fabric.js中克隆画布以实现放大镜
如何在fabric.js中克隆画布以实现放大镜
提问于 2016-08-26 10:51:18
我正试图在Fabric.js中实现一个放大镜。我实现了一些这里，它在直接使用图像时工作得很好，但不幸的是，我有一个画布，所以我必须首先调用canvas.toDataURL()来创建一个映像，然后使用它进行克隆：fabric.util.object.clone(img)，它会消耗大量内存。
我们能直接克隆一个画布吗，比如：fabric.util.object.clone(canvas);
下面是一个示例代码：
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
lens = fabric.util.object.clone(img);
lens.set({
width: scale * originalWidth,
height: scale * originalHeight,
clipTo: function(ctx) {
ctx.arc(-this.left + x - this.width / 2, -this.top + y - this.height / 2, radius, 0, Math.PI * 2, true);
}
});
canvas.add(lens);
});回答 1
Stack Overflow用户
发布于 2016-08-27 05:20:37
您可以像这样克隆FabricJS画布：
- 克隆输入到FabricJS中的画布元素。
- 使用
drawImage将FabricJS画布内容绘制到克隆的画布上
示例：
// get a reference to the canvas element you gave to FabricJS
var c=document.getElementById('c');
// clone that canvas with "cloneNode"
var clonedCanvas=c.cloneNode();
// draw the contents of the Fabric canvas onto the cloned canvas
clonedCanvas.getContext('2d').drawImage(c);但是您可以使用画布作为图像源来创建fabric.Image，所以我认为您可以直接从Fabric画布本身创建一个图像。
未经测试：
var img=fabric.Image(document.getElementById('c'));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39164540
复制相关文章
相似问题
腾讯云开发者
