zoukankan      html  css  js  c++  java
  • js获取url参数、图片转本地base64跨域问题

    获取url参数是经常需要用的一个方法,url上的参数可以让我们的程序执行更灵活。

    图片转本地也是很实用的,因为海报合成通常只支持本地。

    下面我们来看看这些功能的实现:

    获取所有参数,采用split拆分法:

    var strs;
    function GetRequest () {
    var url = location.search;//获取url中“?”符后的字符串
    var theRequest = new Object();
    if (url.indexOf('?') != -1) {
    var str = url.substr(1);
    strs = str.split('&');
    for (var i = 0;i < strs.length; i++) {
    theRequest[strs[i].split('=')[0]] = decodeURI(str[i].split(('=')[1]);
    }
    }
    return theRequest;
    }

    获取指定参数名的值:

    //获取url参数
    function getQueryString(name){
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        };
        return null;
     }
    
    var id = getQueryString("id") * 1;

    图片转本地64:还是跨域的话,可能有些浏览器同一个图片地址只加载一次,你可以尝试转之前在图片链接后面加?v=1这种方式,跟服务器更新代码文件清缓存一个原理

    var getBase64ByUrl = function(src, callback, outputFormat) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', src, true);
    
        xhr.responseType = 'arraybuffer';
    
        xhr.onload = function(e) {
          if (xhr.status == 200) {
            var uInt8Array = new Uint8Array(xhr.response);
            var i = uInt8Array.length;
            var binaryString = new Array(i);
            while (i--) {
              binaryString[i] = String.fromCharCode(uInt8Array[i]);
            }
            var data = binaryString.join('');
            var base64 = window.btoa(data);
            var dataUrl = "data:" + (outputFormat || "image/png") + ";base64," + base64;
            callback.call(this, dataUrl);
          }
        };
    
        xhr.send();
      }
    
    
    getBase64ByUrl("外链图片地址", function(url) {
      $('.img').attr('src', url);
    });
  • 相关阅读:
    wait waitpid
    达梦备份还原
    sigprocmask阻塞信号
    sigaction信号处理
    dd命令
    linux系统启动过程
    cpio建立、还原备份档
    configure详解
    Git入门基础教程
    一篇文章了解Github和Git教程
  • 原文地址:https://www.cnblogs.com/nanyang520/p/11236737.html
Copyright © 2011-2022 走看看