html canvas blob image 污染源

html canvas 被污染

当html中的图片来自于另外一个网站时，canvas被污染，这样，toDataURL和toBlob等函数等都不可以输出了，当canvas被污染的时候怎么做？https://developer.mozilla.org/的解决方案如下图：

canvas 其中的图片来自于另外一个网站，再在四周画一个框，然后输出，正常。

show me the code

代码如下，和官方解决方式不太一样，我们使用下载图片，得到二进制来做这个事情。一样达到效果

    
    Canvas toBlob and download







	function downloadByBlob(blobObj) {
        const link = document.createElement('a');
        link.style.display = 'none';
        const downloadUrl = window.URL.createObjectURL(blobObj);
        link.href = downloadUrl;
        link.download = `test.png`;
        document.body.appendChild(link);
        link.click();
        link.remove();
    };
    function getImageBlob(ctx,url,callback) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob';
            xhr.onload = function () {
                if (parseInt(this.status, 10) === 200) {
                    if (typeof callback === 'function') {
                        callback(ctx,URL.createObjectURL(this.response));
                    }
                }
            };
            xhr.send();
    }
 
    function getImage(ctx, e) {
    const img = new Image();
    img.src = e;
    img.onload = function () {
         ctx.rect(0,0,640,360);  
         ctx.lineWidth = 10;
         ctx.strokeStyle = "red";
         ctx.stroke();
        ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 400);
        canvas.toBlob(
        function (blob) {
           url = URL.createObjectURL(blob);
            downloadByBlob(blob);
        });
        }
    }
 

    var canvas = document.getElementById("canvas");
	    canvas.width = 640;
        canvas.height = 360;
        var context = canvas.getContext('2d');
         getImageBlob(context,'http://192.168.0.129:8089/0.png', 
                 getImage);

        // getImageBlob(context,'http://192.168.0.240:3002/cache/convert/97e2e43c222f86e4e4293f2b6996a51f/0.png', 
        //         getImage);

        // var dImg = document.createElement("img");
        // //dImg.crossOrigin = "*";
        // dImg.src = "http://192.168.0.240:3002/cache/convert/97e2e43c222f86e4e4293f2b6996a51f/0.png"
        // dImg.onload = function(){
        //     //URL.revokeObjectURL(url);
        // dImg.setAttribute("crossOrigin",'Anonymous')
           
        //     console.log("draw over");
        //     context.rect(0,0,640,360);  
        // context.moveTo(10,10);
        // context.lineTo(100,100);
        // context.lineTo(500,100);
        // context.lineWidth = 10;
        // context.strokeStyle = "red";
        // context.stroke();
        // context.drawImage(dImg,0,0,200,400);

        //     canvas.toBlob(
        // function (blob) {
        //     var newImg = document.createElement("img"),
        //         url = URL.createObjectURL(blob);
        //     downloadByBlob(blob);
        //     newImg.onload = function () {
        //         URL.revokeObjectURL(url);
        //     };
 
        //     newImg.src = url;
        //     document.body.appendChild(newImg);
        // });