fabric.js canvas.toDataURL()答案

【问题标题】：fabric.js canvas.toDataURL()fabric.js canvas.toDataURL()
【发布时间】：2017-03-18 22:22:05
【问题描述】：

我使用织物进行一些编辑。当我为图像设置路径时，canvas.toDataURL() 工作。但是当我从其他地方获取图像路径时，它出错了。我真的不知道为什么会出错以及如何解决。

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <input type="file" id="uploadFile" onchange="uploadImg()" name="xfile"/>
    <button onclick="addLocalImg()">localImg</button>
    <button onclick="produceImg()">toImg</button>
</body>
<script type="text/javascript">
    var canvas = new fabric.Canvas('canvas');
    var imgPath;
    function uploadImg() {
        var formData = new FormData();
        var name = $("input").val();
        formData.append("file", $("#uploadFile")[0].files[0]);
        formData.append("name", name);
        $.ajax({
            url: server+"/file/fileUp",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                console.log("uploading...");
            },
            success: function (responseStr) {
                if (responseStr.code === 200) {
                    imgPath = responseStr.daoResult.path;
                    console.log("success" + responseStr);
                    imgShow(imgPath);
                } else {
                    alert('failed');
                }
            },
            error: function (responseStr) {
                console.log("error");
            }
        });
    }
    function imgShow(imgPath){
        var imgSrc = server + '/file/' + imgPath;
        var imgEl = $('<img />');
        imgEl.attr('src',imgSrc).load(function(){
            new fabric.Image.fromURL(imgSrc,function(oImg){
                canvas.add(oImg);
            })
        })
    }
    function addLocalImg(){
        var imgSrcPath = '../img/img1.jpg';
        var imgEl = $('<img />');
        imgEl.attr('src',imgSrcPath).load(function(){
            new fabric.Image.fromURL(imgSrcPath,function(oImg){
                canvas.add(oImg);
            })
        })
    }
    function produceImg(){
        var str = canvas.toDataURL();
        var imgstr = $('<img />');
        imgstr.attr('src',str).load(function(){
            $('body').append(imgstr);
        })
    }
</script>

【问题讨论】：

将图像加载到您的服务器并使用相同的域。

标签： canvas fabricjs

【解决方案1】：

我可以想象问题是跨域问题。

当您加载本地图像时，您没有任何问题。

当您从不同的server 加载图像时，您必须指定正确的 crossOrigin 值。在大多数情况下，anonymous 的值是可以的（如果服务器以这种方式配置）。

function imgShow(imgPath){
    var imgSrc = server + '/file/' + imgPath;
    var imgEl = $('<img />');
    imgEl.attr('src',imgSrc).load(function(){
        new fabric.Image.fromURL(imgSrc,function(oImg){
            canvas.add(oImg);
        }, { crossOrigin: 'anonymous' });
    });
}

【讨论】：

非常感谢。这一定是一个很好的答案。但是当我设置一个 backgroundImage 时，它仍然会出错。那么你能告诉我下一步该怎么做吗？
再次感谢您！我已经解决了这个问题。背景也向右走。