Konva转换阶段Todataurl()在Chrome浏览器中不起作用，而是在Safari浏览器中工作得很好

Question

我的konva阶段很少，当我尝试转换为image All Stage时 - 在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问题。在这里查看解决方案：

污染的画布可能不会导出

https://developer.mozilla.org/en-us/docs/web/html/cors_enabled_image