Question

我有一个类似的脚本：

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过滤器应用于图片，我想将该图片转换为网址。

我正在完美地获取网址，但图片的大小并不合适。我只得到图像的顶部，也没有过滤器。

这里可能有什么问题。从文档中我得到了这种方法来应用过滤器。

谢谢

Answer 1

我能看到的唯一问题是这两行代码：

canvas.setHeight(oImg.height);
canvas.setWidth(oImg.width);

我更改了您的示例以在图片中呈现结果，请查看下面的runnable片段：

canvas.height = oImg.height
canvas.width = oImg.width

应该是：

canvas.setHeight(oImg.height);
canvas.setWidth(oImg.width);

并且，由于applyFilters是异步的，我在回调中移动了toDataUrl。

＆＃13;

(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');

＆＃13;

<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' />

＆＃13;

fabricjs不应用过滤器和尺寸是不合适的

1 个答案: