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);
    });
  • 相关阅读:
    1016: 写出来吧
    从硬件工程师转到纯软件开发,回顾那些岁月
    用大白话聊聊JavaSE -- 自定义注解入门
    数组中的一些常用方法总结
    js中的隐式转换
    开源OSS.Social微信项目进阶介绍
    .Net开源oss项目进度更新(含小程序接口)
    windows下部署免费ssl证书(letsencrypt)
    完成OSS.Http底层HttpClient重构封装 支持标准库
    谈javascript变量声明
  • 原文地址:https://www.cnblogs.com/nanyang520/p/11236737.html
Copyright © 2011-2022 走看看