Question

我使用fabric进行一些编辑。当我为图像设置路径时，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>

this is the error information

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

1 个答案: