canvas使用toDataUrl()报错

最新推荐文章于 2024-03-13 09:43:29 发布

泥猴桃

最新推荐文章于 2024-03-13 09:43:29 发布

阅读量7.5k

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/shi851051279/article/details/80437119

版权

canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

页面要做一个截图的功能，本地生成了一张图片，然后转成canvas，再从canvas变成png，但是canvas.toDataUrl()一直报错：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

代码如下：

var url = DOMURL.createObjectURL(svg);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight*1.25;
        cacheImg(url,function(){
            ctx.drawImage(this , 0 , 0);
            var image = canvas.toDataURL("image/png").replace("image/png", 'image/octet-stream');
            DOMURL.revokeObjectURL(url);
        });

        function cacheImg(url , callback){
            var img = new Image()
            img.setAttribute('crossOrigin', 'Anonymous');
            //img.crossOrigin = "Anonymous";  //或者加这行代码
            img.src = url;
            img.onload = function() {
                callback.call(img)
            }
        }