Question

我有几层Konva舞台，当我尝试将所有舞台转换为图像时-在safari浏览器中结果正常，当我在chrome，firefox等中尝试转换舞台时-结果失败。我认为toDataUrl（）方法确实在Safari浏览器中无法在chrome浏览器，firefox浏览器等中正常运行

<button id="save" type="button">save</button>
<div id="container"></div>
<script>
    var width = window.innerWidth;
    var height = window.innerHeight;

    function downloadURI(uri, name) {
        var link = document.createElement('a');
        link.download = name;
        link.href = uri;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        delete link;
    }



    function drawImage(imageObj) {
        var stage = new Konva.Stage({
            container: 'container',
            width: width,
            height: height
        });

        var layer = new Konva.Layer();
        // darth vader
        var darthVaderImg = new Konva.Image({
            image: imageObj,
            x: stage.getWidth() / 2 - 200 / 2,
            y: stage.getHeight() / 2 - 137 / 2,
            width: 200,
            height: 137,
            name: 'myimg',
            draggable: true
        });

        // add cursor styling
        darthVaderImg.on('mouseover', function () {
            document.body.style.cursor = 'pointer';
        });
        darthVaderImg.on('mouseout', function () {
            document.body.style.cursor = 'default';
        });

        layer.add(darthVaderImg);
        stage.add(layer);


        stage.on('click tap', function (e) {
            // if click on empty area - remove all transformers
            if (e.target === stage) {
                stage.find('Transformer').destroy();
                layer.draw();
                return;
            }
            // do nothing if clicked NOT on our rectangles
            if (!e.target.hasName('myimg')) {
                return;
            }
            // remove old transformers
            // TODO: we can skip it if current rect is already selected
            stage.find('Transformer').destroy();

            // create new transformer
            var tr = new Konva.Transformer();
            layer.add(tr);
            tr.attachTo(e.target);
            layer.draw();
        })


        document.getElementById('save').addEventListener(
            'click',
            function () {
                var dataURL = stage.toDataURL({ pixelRatio: 3 });
                downloadURI(dataURL, 'stage.png');
            },
            false
        );


    }



    var imageObj = new Image();
    imageObj.onload = function () {
        drawImage(this);
    };
    imageObj.src = 'https://www.decanterchina.com/assets/images/article/550/136031_decanter-cava-tasting-1.jpg';
</script>

任何可能的原因或解决方案？谢谢！

Answer 1

如果您查看控制台，您将看到一条消息：

Konva警告：无法获取数据URL。无法执行“ toDataURL” 在“ HTMLCanvasElement”上：可能无法导出污染的画布。

您有CORS问题。在这里查看解决方案：

Tainted canvases may not be exported

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

Konva将阶段转换为DataUrl（）在chrome浏览器中不起作用，但在safari浏览器中很好

1 个答案: