时间戳

首页 > 解决方案 > 如何使用fabric js从画布中获取图像

javascript - 如何使用fabric js从画布中获取图像

问题描述

我正在使用fabric js在图像上添加文本，但问题是我无法从画布下载最终图像。我在打印dataUrl时获取base64 url​​但没有获取图像URL。请找到下面的代码片段。

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

标签： javascriptfabricjs

解决方案

如果您的主要目的只是下载 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

推荐阅读