html canvas blob image 污染源

最新推荐文章于 2024-03-15 09:32:27 发布

qianbo_insist

最新推荐文章于 2024-03-15 09:32:27 发布

阅读量455

点赞数

分类专栏： http协议前端技术 html 文章标签： html canvas 污染源 toDataURL toBlob

本文链接：https://blog.csdn.net/qianbo042311/article/details/119114703

版权

http协议同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

前端技术

9 篇文章 0 订阅

订阅专栏

html canvas 被污染

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

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

show me the code

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas toBlob and download</title>
</head>
<body>
<!-- <img src ="http://192.168.0.129:8089/0.png" />  -->
<canvas id="canvas"></canvas>

</body>
<script>
	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);
        // });
</script>
</html>

qianbo_insist

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
html canvas blob image 污染源

html canvas 被污染当html中的图片来自于另外一个网站时，canvas被污染，这样，toDataURL和toBlob等函数等都不可以输出了，当canvas被污染的时候怎么做？https://developer.mozilla.org/的解决方案如下图：canvas 其中的图片来自于另外一个网站，再在四周画一个框，然后输出，正常。show me the code代码如下，和官方解决方式不太一样，我们使用下载图片，得到二进制来做这个事情。一样达到效果<!DOCTYPE html&
复制链接

扫一扫