Konva 将阶段转换为 DataUrl() 在 chrome 浏览器中不起作用，但在 safari 浏览器中运行良好答案

【问题标题】：Konva converting stage toDataUrl() do not work in chrome browser,but work well in safari browserKonva 将阶段转换为 DataUrl() 在 chrome 浏览器中不起作用，但在 safari 浏览器中运行良好
【发布时间】：2019-02-18 02:51:16
【问题描述】：

我有几层的 Konva 舞台，当我尝试将所有舞台转换为图像时 - 在 safari 浏览器中结果正常，当我尝试在 chrome、firefox 等中转换舞台时 - 结果失败。我认为 toDataUrl() 方法确实在 chrome 浏览器、firefox 浏览器等中不能很好地工作，除了 safari 浏览器

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

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

【问题讨论】：

标签： konvajs

【解决方案1】：

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

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

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

Tainted canvases may not be exported

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

【讨论】：