精华内容
下载资源
问答
  • 图片URL转换成base64

    千次阅读 2020-06-22 09:54:09
    function imageUrl2Base64(url, callback) { if(url) { let image = new Image(); //解决跨域报错,必须写在赋值给image.src的前面,否则偶尔报错,也可以这样写image.setAttribute('crossOrigin', 'anonymous'...

    回调函数写法(这种写法不好,嵌套太多)。

    测试图片转换
    <script>
    function imageUrl2Base64(url, callback) {
    	if(url) {
    		let image = new Image();
    		//解决跨域报错,必须写在赋值给image.src的前面,否则偶尔报错,也可以这样写image.setAttribute('crossOrigin', 'anonymous');
    		image.crossOrigin = 'anonymous';
    		image.src = url;
    		//等待图片加载完成,转换图片为base64,异步
    		image.onload = function() {
    			let canvas = document.createElement('canvas');
    			canvas.width = image.width;
    			canvas.height = image.height;
    			let ctx = canvas.getContext('2d');
    			ctx.drawImage(image, 0, 0, image.width, image.height);
    			let base64 = canvas.toDataURL('image/png');
    			callback(base64)
    		}
    	}
    }
    
    var url = 'https://zxximage.oss-cn-shenzhen.aliyuncs.com/202002/55ab6298d256a340_c32ce80bb960434da9a733b11e4c66be.jpeg';
    imageUrl2Base64(url, function(base64) {
    	document.getElementById('test').src = base64;
    });
    </script>
    

    改写之后(推荐写法)。

    测试图片转换
    <script>
    function imageUrl2Base64(url) {
    	return new Promise((resolve, reject) => {
    		if(url) {
    			let image = new Image();
    			//解决跨域报错,必须写在赋值给image.src的前面,否则偶尔报错,也可以这样写image.setAttribute('crossOrigin', 'anonymous');
    			image.crossOrigin = 'anonymous';
    			image.src = url;
    			//等待图片加载完成,转换图片为base64,异步
    			image.onload = function() {
    				let canvas = document.createElement('canvas');
    				canvas.width = image.width;
    				canvas.height = image.height;
    				let ctx = canvas.getContext('2d');
    				ctx.drawImage(image, 0, 0, image.width, image.height);
    				let base64 = canvas.toDataURL('image/png');
    				resolve(base64);
    			}
    		}
    	});
    }
    
    var url = 'https://zxximage.oss-cn-shenzhen.aliyuncs.com/202002/55ab6298d256a340_c32ce80bb960434da9a733b11e4c66be.jpeg';
    imageUrl2Base64(url).then((base64) => {
    	document.getElementById('test').src = base64;
    });
    </script>
    
    展开全文
  • 把一个图片URL转换成Base64

    万次阅读 2019-01-31 21:27:09
    @Test public void imageBase64Test() { String imgUrl = "http://bpic.588ku.com//element_origin_min_pic/17/03/03/7bf4480888f35addcf2ce942701c728a.jpg"; String base64 = image2Base64...
      @Test
        public void imageBase64Test() {
            String imgUrl = "http://bpic.588ku.com//element_origin_min_pic/17/03/03/7bf4480888f35addcf2ce942701c728a.jpg";
            String base64 = image2Base64(imgUrl);
    
            byte[] decode = decode(base64);
            System.out.println(base64);
            System.out.println("===================");
            System.out.println(decode.length);
            System.out.println(decodeBuffer(base64));
    
        }
    
        private static String image2Base64(String imgUrl) {
            URL url;
            HttpURLConnection urlConnection = null;
            InputStream inputStream = null;
            ByteArrayOutputStream baos = null;
            try {
                url = new URL(imgUrl);
                urlConnection = ( HttpURLConnection ) url.openConnection();
                urlConnection.connect();
                inputStream = urlConnection.getIn
    展开全文
  • 网络图片url转换成base64

    千次阅读 2020-06-30 14:11:44
    根据图片urlbase64 网上查找的转换方法用的包是sun.misc.BASE64Encoder,需要导jar包,这里换了java.util.Base64,可以直接使用,话不多说,代码如下: import java.io.ByteArrayOutputStream; import java.io....

    根据图片url转base64


    网上查找的转换方法用的包是sun.misc.BASE64Encoder,需要导jar包,这里换成了java.util.Base64,可以直接使用,话不多说,代码如下:

    import java.io.ByteArrayOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.net.HttpURLConnection;
    import java.net.URL;
    import java.util.Base64;
    
    public class imageToBase64Demo {
        
        /**
         *     将网络地址对应的图片转换为base64
         * @param imagePath 网络图片路径                
         * @return res 图片对应的Base64编码
         */
        public static String imageChangeBase64(String imagePath){
            ByteArrayOutputStream outPut = new ByteArrayOutputStream();
            byte[] data = new byte[1024];
            try {
                // 创建URL
                URL url = new URL(imagePath);
                // 创建链接
                HttpURLConnection conn = (HttpURLConnection) url.openConnection();
                conn.setRequestMethod("GET");
                conn.setConnectTimeout(10 * 1000);
    
                if(conn.getResponseCode() != 200) {
                    return "fail";//连接失败/链接失效/图片不存在
                }
                InputStream inStream = conn.getInputStream();
                int len = -1;
                while ((len = inStream.read(data)) != -1) {
                    outPut.write(data, 0, len);
                }
                inStream.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
            // 对字节数组Base64编码
            byte[] encode = Base64.getEncoder().encode(outPut.toByteArray());
            String res = new String(encode);
            return res;
        }
        
        public static void main(String[] args) throws Exception {
    
            // 设置网络图片的url路径
            String imgFilePath = "http://pic.sc.chinaz.com/files/pic/pic9/202006/apic26069.jpg";
            String base64_str = imageChangeBase64(imgFilePath);
            System.out.println(base64_str);
        }
    }
    
    
    展开全文
  • 图片URL转换base64的两种方式

    千次阅读 2020-06-28 17:06:33
    方法一 Blob和FileReader 对象 实现原理: 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”], 使用FileReader 对象接收blob。 getBase64(...function getBase64(imgUrl) {

    方法一 Blob和FileReader 对象

    实现原理:
    使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”],
    使用FileReader 对象接收blob。

    getBase64("https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg")//链接是你的网络图片
    
    function getBase64(imgUrl) {
      window.URL = window.URL || window.webkitURL;
      var xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      // 至关重要
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          var blob = this.response;
          console.log("blob", blob)
          // 至关重要
          let oFileReader = new FileReader();
          oFileReader.onloadend = function (e) {
            // 此处拿到的已经是 base64的图片了
            let base64 = e.target.result;
            console.log("方式一》》》》》》》》》", base64)
          };
          oFileReader.readAsDataURL(blob);
      }
      }
      xhr.send();
    }
    

    FileReader.readAsDataURL(blob);
    参考链接:https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

    该readAsDataURL方法用于读取指定Blob或File的内容。读取操作完成后,loadend触发。那时,该result属性包含了一个base64编码的字符串。

    方法二 canvas.toDataURL()方法

    实现原理:
    使用canvas.toDataURL()方法
    需要解决图片跨域问题 image.crossOrigin = ‘’;
    使用了Jquery库的$.Deferred()方法

    let imgSrc = "https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg";
    
    //width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
    function getBase64Image(img, width, height) {
      var canvas = document.createElement("canvas");
      canvas.width = width ? width : img.width;
      canvas.height = height ? height : img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      var dataURL = canvas.toDataURL();
      return dataURL;
    }
    function getCanvasBase64(img) {
      var image = new Image();
      //至关重要
      image.crossOrigin = '';
      image.src = img;
      //至关重要
      var deferred = $.Deferred();
      if (img) {
        image.onload = function () {
          deferred.resolve(getBase64Image(image));//将base64传给done上传处理
          //document.getElementById("container2").appendChild(image);
        }
        return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
      }
    }
    getCanvasBase64(imgSrc)
      .then(function (base64) {
        // 这里拿到的是转换后的base64地址,可以做其他操作
        console.log("方式二》》》》》》》》》",base64);
      }, function (err) {
        console.log(err);
      });
    

    HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI

    参考链接:
    https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

    参考链接:https://www.jb51.net/article/138809.htm

    展开全文
  • 函数代码如下: getShareImg = () => { ... ... function getBase64Image...最终通过在js中先请求图片,拿到图片的信息,将其转成base64编码,设置到src中.最终解决了此问题 <img src={this.state.shareImgBase64} />
  • 图片urlbase64位,base64位的数据转换成图片,附带工具类
  • java 把PDF转换成BASE64

    2017-12-20 16:16:09
    java 把PDF转换BASE64,java 把PDF转换BASE64,java 把PDF转换BASE64,java 把PDF转换BASE64java 把PDF转换BASE64
  • 根据URL获取网络文件并转换成Base64编码工具类 import com.google.common.base.Strings; import org.apache.commons.codec.binary.Base64; import sun.misc.BASE64Encoder; import java.io.ByteArrayOutputStream;...
  • js 将url图片转换base64

    千次阅读 2020-12-03 16:32:26
    function getBase64(url, callback) { var Img = new Image(), dataURL = ''; Img.src = url + '?v=' + Math.random(); Img.setAttribute('crossOrigin', 'Anonymous'); Img.onload = function() { var canvas...
  • 主要介绍了Javascript将图片的绝对路径转换base64编码的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Java 从网络中读取图片 转换成Base64字符串
  • getBase64Image(img){ debugger; var canvas = document.createElement(“canvas”); $(“canavs”).hide(); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext(“2d”); ...
  • js 把图片url转化成base64

    万次阅读 2019-02-24 21:00:53
    网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的少之又少...
  • 为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http请求。但是也会有一个小缺点,就是图片编码化base64的时候大小...
  • Base64Base64URL加解密

    2020-12-22 11:11:14
    我们都会看到一大堆乱码,因为二进制文件包含很多无法显示和打印的字符,所以,如果要让记事本这样的文本处理软件能处理二进制数据,就需要一个二进制到字符串的转换方法,那么Base64是一种最常见的二进制编码方法。...
  • urlbase64

    千次阅读 2020-09-17 16:15:00
    本地图片转base64编码 private static String ImageToBase64(String imgPath) { // 将图片文件转化为字节数组字符串,并对其进行Base64编码处理 InputStream in = null; byte[] data = null; // 读取图片字节...
  • 但在图片在编辑更换后再次传送,且后端需要file对象接收时,单纯的url将不能满足需求,则需要将url地址转换为file对象。 html部分 <div style="width:400px;height:400px;background: #ccc;margin: 0 auto;margin
  • 附件内为转码工具,包含url转码,unicode 转码等类型,解压密码1024,如果可以的话麻烦给出使用意见幺,
  • React Base64 GUID 在CodePen.io上创建的笔。 原始网址: : 。
  • Android将网络url转换base64

    千次阅读 2018-03-22 23:13:17
    由于页面是与H5交互完成的,所有需要客户端根据返回的URL转换为一个Base64格式的字符串返回给H5端。所以,我们需要借助Google的zxing工具包:在app的build.gradle下添加依赖:compile '...
  • Spring Boot 图片url转换base64字符串

    千次阅读 2020-10-03 22:29:54
    } // ByteArrayOutputStream编码成base64字符串 result = new String(Base64.getEncoder().encode(out.toByteArray())); connection.disconnect(); } catch (Exception e) { e.printStackTrace(); }finally{ if...
  • 1、将图片的url转换成base64 urlTobase64(url) { var that = this var img = new Image() img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾,处理缓存 //支持http跨域图片。需要后端设置图片...
  • Webpack的加载程序,它将文件转换base64 URI。 入门 首先,您需要安装url-loader : $ npm install url-loader --save-dev url-loader工作方式与相似,但是如果文件小于字节限制,则可以返回DataURL。 index....
  • URL图片链接转换成base64

    千次阅读 2019-08-23 09:07:37
    这时将URL图片转换成base64后,用base64渲染img图片,这样就可以完美解决问题 如何将“跨域图片”转换成base64呢?原理很简单,将img绘制canvas,再将canvas转换成base64的img流。 具体代码 t...
  • 主要介绍了Java实现文件和base64流的相互转换功能,涉及Java文件读取及base64 转换相关操作技巧,需要的朋友可以参考下
  • js 根据url 转换图片(base64

    千次阅读 2020-04-13 12:17:43
    function getBase64(url, callback) { var Img = new Image(), dataURL = ''; Img.src = url + '?v=' + Math.random(); Img.setAttribute('crossOrigin', 'Anonymous'); Img.onload = function() { ...
  • php url图转base64编码

    千次阅读 2019-03-08 11:05:18
    * 网络图转base64编码 *@param img图片网址 **/ public function imgToBase64($img = '') { if (!$img) { return false; } $imageInfo = getimagesize($img); $base64 = "" . chunk_split(b...
  • 1、base64 转 blob // 原理:利用URL.createObjectURL为blob对象创建临时的URL base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) { return new Promise((resolve, reject) =>...
  • URL Safe base64base64相互转换

    千次阅读 2020-12-07 14:16:27
    为什么需要base64? ASCII码一共规定了128个字符的编码,这128个符号,范围在[0,127]之间. 其中,[0,31],及127, 33个属于不可打印的控制字符. 在电子邮件传输信息时,有些邮件网关会把[0,31]这些控制字符给悄悄清除. ...
  • 在平时开发的时候,我们在处理文件,尤其是图片的时候,经常会跟base64url、blob(file)这三种形式的内容打交道。 base64格式一般都是以data:image/jpeg;base64,这种类似形式打头的一串很长的字符串。 url一般以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 120,397
精华内容 48,158
关键字:

url转换成base64