精华内容
下载资源
问答
  • 图片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>
    
    展开全文
  • 根据图片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

    千次阅读 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.getInputStream();
    
                baos = new ByteArrayOutputStream();
    
                byte[] buffer = new byte[1024];
                int len = 0;
                //使用一个输入流从buffer里把数据读取出来
                while ((len = inputStream.read(buffer)) != -1) {
                    //用输出流往buffer里写入数据,中间参数代表从哪个位置开始读,len代表读取的长度
                    baos.write(buffer, 0, len);
                }
                // 对字节数组Base64编码
                return encode(baos.toByteArray());
    
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                if (inputStream != null) {
                    try {
                        inputStream.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
    
                if (baos != null) {
                    try {
                        baos.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
    
                if (urlConnection != null) {
                     urlConnection.disconnect();
                }
            }
    
            return imgUrl;
        }
    
        private static String encode(byte[] image){
            BASE64Encoder decoder = new BASE64Encoder();
            return replaceEnter(decoder.encode(image));
        }
    
        private static String replaceEnter(String str){
            String reg ="[\n-\r]";
            Pattern p = Pattern.compile(reg);
            Matcher m = p.matcher(str);
            return m.replaceAll("");
        }
    
        /**
         * 字符串转图片
         * @param base64Str
         * @return
         */
        private static byte[] decode(String base64Str){
            byte[] b = null;
            BASE64Decoder decoder = new BASE64Decoder();
            try {
                b = decoder.decodeBuffer(replaceEnter(base64Str));
            } catch (IOException e) {
                e.printStackTrace();
            }
            return b;
        }
    
        private static ByteBuffer decodeBuffer(String base64Str) {
            ByteBuffer buffer = null;
            BASE64Decoder decoder = new BASE64Decoder();
            try {
                buffer = decoder.decodeBufferToByteBuffer(base64Str);
            } catch (IOException e) {
                e.printStackTrace();
            }
           return buffer;
        }

     

    展开全文
  • 函数代码如下: getShareImg = () => { ... ... function getBase64Image...最终通过在js中先请求图片,拿到图片的信息,将其转成base64编码,设置到src中.最终解决了此问题 <img src={this.state.shareImgBase64} />
    函数代码如下:
    getShareImg = () => {
       // var img = "https://example.api.com/shareImg.png";
        var img = "https://example.api.com/shareImg.jpeg";
        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
    
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
            var dataURL = canvas.toDataURL("image/"+ext);
            return dataURL;
        }
        var image = new Image();
        image.crossOrigin = 'use-credentials';
        image.src = img;
        image.onload = () => {
            var base64 = getBase64Image(image);
            console.log(base64);
            this.setState({
                shareImgBase64: base64
            })
        }
    }
    

    其中image.crossOrigin = 'use-credentials';这段代码就是解决跨域携带cookie问题的关键

    后端API:https://example.api.com/shareImg.jpeg

    该API返回的是一个图片,现在要求在微信中弹窗显示此图,并支持长按保存分享等功能

    刚开始是直接<img src="https://example.api.com/shareImg.jpeg"/>

    此时弹窗中时可以展示图片的

    但在微信中长按保存或分享时缺没有反应,点击收藏时提示

    后端接口中尝试了很多方法,修改了response header中的一些参数,和真实图片并无二致,但依然不行

    最终通过在js中先请求图片,拿到图片的信息,将其转成base64编码,设置到src中.最终解决了此问题

    <img src={this.state.shareImgBase64} />

    展开全文
  • URL图片链接转换成base64

    千次阅读 2019-08-23 09:07:37
    这时将URL图片转换成base64后,用base64渲染img图片,这样就可以完美解决问题 如何将“跨域图片”转换成base64呢?原理很简单,将img绘制成canvas,再将canvas转换成base64的img流。 具体代码 t...
  • html5 canvas 加载图片URL转换成base64

    千次阅读 2017-11-18 21:15:39
    html5 canvas 加载图片URL转换成base64
  • 1、将图片的url转换成base64 urlTobase64(url) { var that = this var img = new Image() img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾,处理缓存 //支持http跨域图片。需要后端设置图片...
  • 为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http请求。但是也会有一个小缺点,就是图片编码化base64的时候大小...
  • 根据URL获取网络文件并转换成Base64编码工具类 import com.google.common.base.Strings; import org.apache.commons.codec.binary.Base64; import sun.misc.BASE64Encoder; import java.io.ByteArrayOutputStream;...
  • base64编码介绍base64是一种...为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http请求。但是也会有一个小缺点...
  • 在某些项目中,部分图标需要在打包后根据需求直接...可以通过以下步骤实现保留指定图标引用URL使之不被转换成base64,方便打包后直接替换文件而不用重新打包 1、组件传入基础 URL data () { return { publicP...
  • 我们为什么要把图片转换成base64代码? base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64不惧可读性,所以具有一定的加密功能...
  • 1.先将url对应的图片转成base64 2.再判断base64图片有怎样的旋转偏差,并进行对应的矫正 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit...
  • 刚开始开始参考了两篇文章: ...发现生成的Base64字符串转换为本地图片有如下问题: 很明显只能显示一部分,而且BASE64Encoder报错,找不到jar包,原因是Ba...
  • 生而为人 谁不付出 谁不努力 ...1转换base64编码 function img_base64(){ var imgSrc = img_url; // var imgSrc = "img/1.jpg"; function getBase64(img){//传入图片路径,返回base64 function getBa...
  • * @param sizeLimit:原图大小上限,当图片原图大小超过该值时先将图片大小 设置为该值以下再转换成base64格式,单位kb * @return */ public static String convertImageToBase64(String imageUrl, Integer ...
  • * 网络图片转换到本地并转换成base64位 * @param $url * @return string */ public function imgzhuanhuan($url) { //网络图片路径 // $url='https://img.jinse.com/1435941_s...
  • js 把图片url转化成base64

    万次阅读 2019-02-24 21:00:53
    网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的少之又少...
  • pc端做微信支付后端给的二维码是byte数组格式需转换成base64图片显示 <div id="img"></div> <script type="text/javascript"> var url = "data:image/png;base64,"; var i = "iVBORw0KGgoAAAAN...
  • /** * 将图片转换为base64格式 ... * @param sizeLimit:原图大小上限,当图片原图大小超过该值时先将图片大小 设置为该值以下再转换成base64格式,单位kb * @return */ public static String convertImageToB...
  • 将图片转换Base64 公共js // ext 文件后缀名 export function getUrlBase64(url, ext, callback) { var canvas = document.createElement("canvas"); //创建canvas DOM元素 var ctx = canvas.getContext("2d"); ...
  • 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟...base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrA...
  • 图片urlbase64位,base64位的数据转换成图片,附带工具类
  • function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.onload ...
  • 第一步:将网络图片编码为base64的方法/*** 将网络图片编码为base64** @param url* @return* @throws BusinessException*/public static String encodeImageToBase64(URL url) throws Exception {//将图片文件转化为...
  • <...use yii\helpers\Url; /* @var $this yii\web\View */ /* @var $model backend\models\ActivityInfo */ /* @var $form yii\widgets\ActiveForm */ ?> <div class="activity-info-f

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 302
精华内容 120
关键字:

url转换成base64