javascript fabricjs 过滤器不将过滤后的 Canvas 返回到 url

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) {
        c.height = oImg.height
        c.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"})
}

这里我的 Canvas 是用灰度滤镜渲染的。它没有问题，但是当我尝试将 Canvas 转换为 url 时，它给我的是没有过滤器的 Canvas 。

我不知道这里出了什么问题..

我做错了什么。我想将具有过滤器的 Canvas 转换为 url

var img = canvas.toDataURL('image/png') 给我没有过滤器的图像

需要帮助

Answer 1

applyFilters 是异步的(这就是为什么要在其中传递 renderAll 回调)。
您需要在其回调中调用 toDataURL，否则您将在应用过滤器之前导出 Canvas 。

这是对您的代码的粗略改编:

function filter(url, callback) {
  var c = document.createElement('canvas');
  c.id = "canvas_greyscale";
  var canvas = new fabric.Canvas('canvas_greyscale');
  // the applyFilters' callback
  var onend = function() {
    canvas.renderAll();
    var img = canvas.toDataURL('image/png');
    callback(img);
  }

  fabric.Image.fromURL(url, function(oImg) {
    canvas.setDimensions({width:oImg.width, height:oImg.height});

    oImg.filters.push(new fabric.Image.filters.Grayscale())
    // here we pass the export function
    oImg.applyFilters(onend)
    
    canvas.add(oImg)
  }, {
    crossOrigin: "Anonymous"
  })
}

var url = 'https://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg'
filter(url, function(dataURI) {
  output.src = dataURI;
  original.src = url
})

img{ width: 50%}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.js"></script>
<img id="output"><br>
original Image: © Andrew Dunn CC-By-SA 2.0 <br>
<img id="original">