js通过图片url获取图片base64编码

方法1：直接返回图片编码

参数url：图片的路径；
参数imgType：图片类型默认image/png；
方法返回值：图片base64编码

function getBase64ImageUrl(url, imgType) {if(!imgType){imgType="image/png";}var img=new Image(); img.src= url;img.crossOrigin="anonymous";var xhr = new XMLHttpRequest();//通过下面两次同步请求获取同一个图片，如果请求成功来猜测上面的图片已经异步加载完成for(var i=0;i<2;i++){xhr.open('GET', url, false);xhr.send(null);}var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");  ctx.drawImage(img, 0, 0);var dataURL = canvas.toDataURL(imgType);return dataURL;
}

方法2：回调方法获取

参数url：图片的路径；
参数callBack：回调函数；回调函数的参数只有一个为：图片base64编码；
参数imgType：图片类型默认image/png；
方法返回值：无返回值；

function getBase64ImageUrl(url, callBack, imgType) {if(!imgType){imgType="image/png";}var img=new Image(); img.src= url;img.crossOrigin="anonymous";img.onload=function(){var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");  ctx.drawImage(img, 0, 0);var dataURL = canvas.toDataURL(imgType);callBack(dataURL);}
}

方法3：回调方法获取

参数url：图片的路径；
参数callBack：回调函数；回调函数的参数只有一个为：图片base64编码；
参数imgType：图片类型默认image/png；
方法返回值：无返回值；

function getBase64ImageUrl(url,callBack,imgType){if(!imgType){imgType="image/png";}var xhr = new XMLHttpRequest();xhr.responseType="arraybuffer";xhr.open('GET', url, true);xhr.onload=function(){var result=xhr.response;var file = new File([result], "foo."+imgType.match(/\/([A-Za-z]+)/)[1], {type: imgType,});var reader = new FileReader();reader.onload = function(evt) {callBack(evt.target.result);};reader.readAsDataURL(file)}xhr.send(null);
}

注意：以上两种方法获取的图片base64编码并不是纯净的，实际上是"data:image/png;base64,"+图片base64编码;其中image/png;也可能是其他图片类型，如有需要请自行截掉前面部分"data:image/png;base64,"；

个人建议使用方法2和方法3获取；

js通过图片url获取图片base64编码相关推荐

根据图片URL获取图片的尺寸【Swift语言实现】
import UIKit extension UIImage { /// 获取网络图片尺寸 /// /// - Parameter url: 网络图片链接 /// - Returns: 图片尺寸siz ...
Swift －根据图片URL获取图片的大小
该方法在swift3以后会报大量的错,博主会在近期针对swift3.0进行更正在swift3.0中,可以下载下来后再用,方法有多种,殊途同归,都是要先下载的,这里提供两种: 方法1:var urlS ...
php 验证网络图片尺寸,通过url获取图片尺寸的几种方法：JS和php
首先是js的方法,通过new一个Image对象,设置src属性,并监听complete和onload事件,图片加载完成后输出图片的宽度和高度 function checkPicurl(url){ va ...
iOS根据图片url获取尺寸
可以在UIImage的分类中加入下面的代码,并且引入系统的ImageIO.framework /**根据图片的url获取尺寸@param URL url@return CGSize*/ + (CGSi ...
[js] 写一个方法获取图片的方向
[js] 写一个方法获取图片的方向 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
python将图片转换成二进制文本_python将图片文件转换成base64编码的方法
本文实例讲述了python将图片文件转换成base64编码的方法.分享给大家供大家参考.具体实现方法如下: import base64f=open(r'c:\jb51.gif','rb') #二进制方 ...
Python 图片数据MYSQL存取(BASE64编码解码)
Python 图片数据MYSQL存取(BASE64编码解码) 1.相关python代码 #-*- coding:utf-8 -*-import pymysql import sys import ba ...
python下载图片并保存_Python从URL获取图片、读取图片格式并保存到本地
前言从网络上下载图片的时候,我们不一定能从URL中获取图片格式. 所以,从图片本身获取图片格式,是比较通用而且方便的方法了. 但是,PIL一般都是从文件读取图片数据,那么如何从requests.co ...
Android通过网络URL获取图片并显示
1.布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:to ...
java url安全的base64编码_URL安全的Base64编码
Base64编码可用于在HTTP环境下传递较长的标识信息.在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式.此时,采用Base64编码不仅比较简短,同时也具有不可 ...

js通过图片url获取图片base64编码

js通过图片url获取图片base64编码相关推荐

最新文章

热门文章