fabric.js canvas.toDataURL()

Question

我用 fabric 做一些事情 editing.when 我为图像设置了路径，canvas.toDataURL() work.but 当我从其他地方获取图像的路径时，它出错了。真不知道为什么会出错，怎么解决。

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

Answer 1

我可以想象问题是 crossOrigin 问题。

加载本地图片时没有任何问题。

当您从另一个 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' });
    });
}

fabric.js canvas.toDataURL()

fabric.js canvas.toDataURL()

canvas

fabricjs