Chrome изменение расширения http-заголовка может получить изображение, но не может обработать фоновое изображение - PullRequest
Новая
       53

Chrome изменение расширения http-заголовка может получить изображение, но не может обработать фоновое изображение

0 голосов
/ 30 мая 2020

В разработке надо судить по цвету картинки. Таким образом, холст используется, но при обработке он столкнется с междоменными проблемами,

Я решаю это, изменяя заголовок http, но этот метод полезен для тегов изображений, но для фонового изображения он будет быть недействительным.

У вас есть хорошие решения?

Я знаю, что извлечение URL-адреса фонового изображения, а затем создание нового изображения должно решить эту проблему.

Я хотел бы спросить, есть ли лучший и более удобный способ?

В html

<div id='imgwiki'>this is wrong, because use background-image</div>

<img id="imgb" src="https://ssl.gstatic.com/images/icons/material/system_gm/2x/content_copy_black_24dp.png" alt="imgb"> this is always ok. because it is a img tag

В моем контенте. js

var img=document.getElementById("imgwiki");
img=img.computedStyleMap().get("background-image");
img.crossOrigin="Anonymous";
var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
ctx.drawImage(img,0,0);
var data=ctx.getImageData(0,0,canvas.width,canvas.height).data; //here cross-domain

В моем фоне. js

chrome.webRequest.onHeadersReceived.addListener(
    function(details) {
        luoism.log({details}, details.url);
        return {responseHeaders: [...details.responseHeaders,{name: "Access-Control-Allow-Origin",value: "*"}]};
    },
    {urls: ['<all_urls>']},   // filters
    ['blocking','responseHeaders','extraHeaders']   // extraInfoSpec
);

@ wOxxOm, на самом деле этот код в порядке, но мне нужно более точное решение: 


        !async function getcssimage(e) {

            var stylestr=e.computedStyleMap().get('background-image').toString();

            //get url
            var url='',ur=/url\("([^)"]+)/,x=false;
            if(!ur.test(stylestr)) return false;
            url=ur.exec(stylestr);
            url=url[1];

            //deal mix http & https 
            url=luoism.config.ishttps? url.replace(/^https*/,'https'):url;

            //from background-image url to <img> tag
            function makeimg(url) {
                return new Promise(resolve => {
                    let img=new Image();
                    img.addEventListener("load",e => {
                        resolve(e.currentTarget);
                    });
                    img.onerror=e => {
                        let t=e.currentTarget;
                        t.onerror="";
                        t.style.display='none';
                        e.stopPropagation();
                        e.preventDefault();
                        resolve(false);
                    };
                    img.crossOrigin="anonymous";
                    img.src=url; 
                });
            }


     // deal this <img>, anything is ok
            var img=await makeimg(url);
            var canvas=document.createElement('canvas');
            var ctx=canvas.getContext('2d');
            luoism.log('消息begin',img.toString(),{img});
            ctx.drawImage(img,0,0);
            var data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
            return x;
        }(img);
...