Javascript 如何使用fabric js从画布获取图像

我正在使用fabric js在图像上添加文本，但问题是我无法从画布下载最终图像。我正在获取base64 url，而prinitng dataUrl未获取图像url。请查找以下代码snipet

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<canvas id="canvas" ></canvas>
<script>
    var canvas = new fabric.Canvas('canvas');
    // load image
    fabric.Image.fromURL('https://pixlr.com/photo/image-editing-2-3-pw.jpg', function (img) {
        img.scaleToWidth(100);
        img.scaleToHeight(100);
        // create text
        var text = new fabric.Text('hello world', {
            left: 70,
            top: 80,
            fontSize: 15,
            fontFamily: 'Arial',
            fill: '#fff',
            backgroundColor:'#08976d',
            borderColor:'#078b64',
            fontWeight:400,
            padding:50
        });

        // add image and text to a group
        var group = new fabric.Group([img, text], {
            left: 0,
            top: 0,
        });
        // add the group to canvas
        canvas.add(group);
    });

    var dataURL = canvas.toDataURL('image/png');
    var imgUrl = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    console.log(dataURL);
</script>

var canvas=newfabric.canvas（'canvas'）；
//加载图像
fabric.Image.fromURL（'https://pixlr.com/photo/image-editing-2-3-pw.jpg，函数（img）{
img.刻度宽度（100）；
仪表刻度高度（100）；
//创建文本
var text=new fabric.text（'hello world'{
左：70，
排名：80，
尺寸：15，
fontFamily：“Arial”，
填写：“#fff”，
背景颜色：“#08976d”，
边框颜色：'#078b64'，
体重：400，
填充：50
});
//向组中添加图像和文本
var group=new fabric.group（[img，text]{
左:0,，
排名：0，
});
//将组添加到画布
canvas.add（组）；
});
var dataURL=canvas.toDataURL（'image/png'）；
var imgUrl=dataURL.replace（/^data:image\/[^；]/，'data:application/octet stream'）；
log（dataURL）；

如果您的主要目的只是下载dataURL文件，那么实际上并不需要图像url。由于映像在任何服务器上都不存在，因此它没有映像url路径。您可以这样做来下载文件

function downloadFile(uri, name) {
  let link = document.createElement("a"); //creates link element
  link.download = name; //sets name of the file
  link.href = uri; //sets the datauri as the data source of the file
  document.body.appendChild(link); //adds it to the dom
  link.click(); //trigger a click event
  document.body.removeChild(link); //removes it from the dom
  delete link; //optional: delete the reference of it from memory
}
downloadFile("data:text/html,HelloWorld!", "helloWorld.txt"); //to call above code

---

如果你想得到一个有文字的图像 您可以实例化一个图像，并使用

canvas.toDataURL（'Image/png'）设置src值，然后您可以等待onload作为下一个示例：

    let img = new Image();
    img.src = canvas.toDataURL('image/png');
    img.onload = function(): void {
       console.log('you have an image with text');
    };

在
函数（img）中尝试{
function能否请您再详细说明一下或共享您的代码我在该图像函数中尝试过，也得到了错误fabric.js:11383未捕获的DomeException:未能在“HtmlCanvaElement”上执行“toDataURL”：可能无法导出受污染的画布编辑可能是因为交叉源问题。只需检查它是否在您的图像中工作源文件夹..拿我的代码来摆弄你会知道我想要图像url而不是文本你想要图像url下载，比如链接？如果你想要的是这样，这可能很有用，问题是toDataUrl返回base64格式如果你想要下载图像，你可以使用链接示例，否则如果你想要显示图像，你可以使用我的示例您希望从画布的dataURL下载图像。因此，只需使用此功能，并将您的dataURL字符串和所需的文件名与扩展名一起放置。我会向您说明这一点，一旦您在fabric.js中编辑图像并想要获得编辑过的图像，您必须使用其dataURL。您将不会获得编辑过的图像的图像url。您还可以播放dataURL图像，如另一个示例所示。