fabricjs不应用过滤器和大小是不正确的
问题描述:
我有这样的脚本:fabricjs不应用过滤器和大小是不正确的
export function filter(url) {
var c = document.createElement('canvas')
c.id = "canvas_greyscale"
var canvas = new fabric.Canvas('canvas_greyscale')
fabric.Image.fromURL(url, function(oImg) {
canvas.height = oImg.height
canvas.width = oImg.width
oImg.filters.push(new fabric.Image.filters.Grayscale())
oImg.applyFilters(canvas.renderAll.bind(canvas))
canvas.add(oImg)
var img = canvas.toDataURL('image/png')
console.log(img)
return img
}, {crossOrigin: "Anonymous"})
}
在这里,我将grayscale
过滤的图像,我想给图像转换成URL。
我得到了完美的网址,但图像的大小是不正确的。 我只得到图像的左上部分,也没有过滤器。
这里可能有什么问题。从文档中我得到了这种应用过滤器的方法。
谢谢
答
唯一的问题我可以看到是这两行代码:
canvas.setHeight(oImg.height);
canvas.setWidth(oImg.width);
我改变了你的例子来渲染结果的图像,看看下面的可运行的代码段:
canvas.height = oImg.height
canvas.width = oImg.width
应该是:
canvas.setHeight(oImg.height);
canvas.setWidth(oImg.width);
而且,由于applyFilters
是异步的,我在回调中移动了你的toDataUrl。
(function filter(url) {
var c = document.createElement('canvas')
c.id = "canvas_greyscale"
var canvas = new fabric.Canvas(c.id)
fabric.Image.fromURL(url, function(oImg) {
oImg.width = 100;
oImg.height = 100;
canvas.setHeight(oImg.height);
canvas.setWidth(oImg.width);
oImg.filters.push(new fabric.Image.filters.Grayscale())
oImg.applyFilters(
function(){
canvas.add(oImg);
var img = canvas.toDataURL();
$('#myimg')[0].src = img;
}
);
}, {
crossOrigin: "Anonymous"
})
})('http://i.imgur.com/fHyEMsl.jpg');
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='myimg' />