如何跨域访问在线图片实现base64转换？

Question

油猴脚本获取鼠标处的图片链接data.target.src，可能是微博的图片、百度的图片等，找到在线图片转换base64函数，需要跨域访问

https://www.cnblogs.com/daysm...

油猴子中添加了// @grant GM_xmlhttpRequest

    const copyImage = function(argumentArr, data) {
        var base64URL = ajax(data.target.src,
        function(dataUrl) {
            console.log('结果:', dataUrl)
            return dataUrl;
            }
        )
    }

    //在线图片转换base64
    function toDataURL(src, callback, outputFormat) {
        var img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function() {
            var canvas = document.createElement('CANVAS');
            var ctx = canvas.getContext('2d');
            var dataURL;
            canvas.height = this.naturalHeight;
            canvas.width = this.naturalWidth;
            ctx.drawImage(this, 0, 0);
            dataURL = canvas.toDataURL(outputFormat);
            callback(dataURL);
        };
        img.src = src;
        if (img.complete || img.complete === undefined) {
            img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
            img.src = src;
        }
    }

    // ajax 跨域访问公共方法
    function ajax(url, text, element, method, data, headers) {
        if (!!!method)
            method = 'GET';
        // >>>因为Tampermonkey跨域访问(a.com)时会自动携带对应域名(a.com)的对应cookie
        // 不会携带当前域名的cookie
        // 所以，GM_xmlhttpRequest【不存在】cookie跨域访问安全性问题
        // 以下设置默认headers不起作用<<<
        url += text;
        if (!!!headers)
            headers = { 'cookie': '' };
        GM_xmlhttpRequest({
            method: method,
            url: url,
            headers: headers,
            data: data,
            onload: function (res) {
                toDataURL(res.responseText, element);
            },
            onerror: function (res) {
                displaycontainer("连接失败",element);
            }
        });
    }

Answer 1

跨域时，如果资源服务器不允许的话，前端是不能获取到该资源的，也是为了安全考虑，可以尝试做一层代理，但有些服务器也会做防爬处理。

canvas 中的图片可能来自一些第三方网站。在资源服务器不允许的情况下，使用跨域的图片绘制时会污染画布，这是出于安全考虑。在“被污染”的画布中调用 toBlob() toDataURL() getImageData() 会抛出安全警告。

Answer 2

img.crossOrigin = 'Anonymous';
改为
img.crossOrigin = '*';
如果服务器做了拦截就没办法了

Answer 3

找到一个特别的解决办法啦，创建一个防止缓存的地址
http://t.zoukankan.com/golovi...

let image = new Image()
image.src = this.networkImg + '?v=' + Math.random()
image.crossOrigin = "*"