如何修复未捕获的DOMException：无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布

Question

我创建了patrick创建的watermark.js的javascript代码，这里是代码

/* 
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * watermark.js - Create watermarked images with Canvas and JS
 *
 * Version: 1 (2011-04-04)
 * Copyright (c) 2011   Patrick Wied ( http://www.patrick-wied.at )
 * This code is licensed under the terms of the MIT LICENSE
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 */

(function(w){
    var wm = (function(w){
        var doc = w.document,
        gcanvas = {},
        gctx = {},
        imgQueue = [],
        className = "watermark",
        watermark = false,
        watermarkPosition = "bottom-right",
        watermarkPath = "logo.png?"+(+(new Date())),
        opacity = (255/(100/50)), // 50%
        initCanvas = function(){
            gcanvas = doc.createElement("canvas");
            gcanvas.style.cssText = "display:none;";
            gctx = gcanvas.getContext("2d");
            doc.body.appendChild(gcanvas);
        },
        initWatermark = function(){
            watermark = new Image();
            watermark.crossOrigin = 'Anonymous';
            watermark.src = "";
            watermark.src = watermarkPath;
            if(opacity != 255){
                if(!watermark.complete)
                    watermark.onload = function(){  
                        applyTransparency();
                    }
                else
                    applyTransparency();


            }else{
                applyWatermarks();
            }

        },
        // function for applying transparency to the watermark
        applyTransparency = function(){
            var w = watermark.width || watermark.offsetWidth,
            h = watermark.height || watermark.offsetHeight;
            setCanvasSize(w, h);
            gctx.drawImage(watermark, 0, 0);

            var image = gctx.getImageData(0, 0, w, h);
            var imageData = image.data,
            length = imageData.length;
            for(var i=3; i < length; i+=4){  
                imageData[i] = (imageData[i]<opacity)?imageData[i]:opacity;
            }
            image.data = imageData;
            gctx.putImageData(image, 0, 0);
            watermark.onload = null;
            watermark.src = "";
            watermark.src = gcanvas.toDataURL();
            // assign img attributes to the transparent watermark
            // because browsers recalculation doesn't work as fast as needed
            watermark.width = w;
            watermark.height = h;
            applyWatermarks();
        },
        configure = function(config){
            if(config["watermark"])
                watermark = config["watermark"];
            if(config["path"])
                watermarkPath = config["path"];
            if(config["position"])
                watermarkPosition = config["position"];
            if(config["opacity"])
                opacity = (255/(100/config["opacity"]));
            if(config["className"])
                className = config["className"];

            initCanvas();
            initWatermark();
        }
        setCanvasSize = function(w, h){
            gcanvas.width = w;
            gcanvas.height = h;
        },
        applyWatermark = function(img){
            img.crossOrigin = "Anonymous";
            gcanvas.width = img.width || img.offsetWidth;
            gcanvas.height = img.height || img.offsetHeight;
            gctx.drawImage(img, 0, 0);
            var position = watermarkPosition,
            x = 0,
            y = 0;
            if(position.indexOf("top")!=-1)
                y = 10;
            else
                y = gcanvas.height-watermark.height-10;

            if(position.indexOf("left")!=-1)
                x = 10;
            else
                x = gcanvas.width-watermark.width-10;


            gctx.drawImage(watermark, x, y);
            img.onload = null;

            img.src = gcanvas.toDataURL();

        },
        applyWatermarks = function(){
            setTimeout(function(){
                var els = doc.getElementsByClassName(className),
                len = els.length;
                while(len--){
                    var img = els[len];
                    if(img.tagName.toUpperCase() != "IMG")
                        continue;

                    if(!img.complete){
                        img.onload = function(){
                            applyWatermark(this);
                        };
                    }else{
                        applyWatermark(img);
                    }
                }
            },10);
        };


        return {
            init: function(config){
                configure(config);
            }
        };
    })(w);
    w.wmark = wm;
})(window);

使用此

调用代码

<script>
var load = false;
window.onload = function(){
if(!load) {
wmark.init({
"position": "bottom-right", 
"opacity": 50, 
"className": "watermark",
"path": "logo-watermark.png"
});
load = true;
}
}
</script>

但是当我尝试加载我的网站以获取所有图像上的水印时，控制台说javascript中有错误

  

未捕获DOMException：无法执行＆＃39; toDataURL＆＃39;上   ＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布。       在applyWatermark（example.com/jscripts/watermark.js:113:22）       在domain.com/jscripts/watermark.js:130:7

我已添加

img.crossOrigin = "Anonymous";

在javascript但没有工作，有人可以帮我解决这个问题吗？