javascript fabricjs过滤器不会将过滤后的画布返回到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转换为url时它给了我没有过滤器的画布.

我不知道这里有什么不对..

我究竟做错了什么.我想将具有过滤器的画布转换为url

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

需要帮忙

Answer 1

applyFilters是异步的（这就是你renderAll在其中传递回调的原因）。
\n您需要在回调中调用 toDataURL，否则您将在应用过滤器之前导出画布。

\n\n

这是您的代码的粗略改编：

\n\n

\r\n

\r\n

function filter(url, callback) {\r\n  var c = document.createElement(\'canvas\');\r\n  c.id = "canvas_greyscale";\r\n  var canvas = new fabric.Canvas(\'canvas_greyscale\');\r\n  // the applyFilters\' callback\r\n  var onend = function() {\r\n    canvas.renderAll();\r\n    var img = canvas.toDataURL(\'image/png\');\r\n    callback(img);\r\n  }\r\n\r\n  fabric.Image.fromURL(url, function(oImg) {\r\n    canvas.setDimensions({width:oImg.width, height:oImg.height});\r\n\r\n    oImg.filters.push(new fabric.Image.filters.Grayscale())\r\n    // here we pass the export function\r\n    oImg.applyFilters(onend)\r\n    \r\n    canvas.add(oImg)\r\n  }, {\r\n    crossOrigin: "Anonymous"\r\n  })\r\n}\r\n\r\nvar url = \'https://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg\'\r\nfilter(url, function(dataURI) {\r\n  output.src = dataURI;\r\n  original.src = url\r\n})

\r\n

img{ width: 50%}

\r\n

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

\r\n

\r\n

\r\n

\n