图片Image转换为base64编码的方法
2017-08-29 09:28
771 查看
1、FileReader
通过XMLHttpRequest请求图片Blob数据格式,然后利用FileReader转换为dataURL
请求可以利用 WHATWG fetchJs来实现
优缺点:
某些浏览器缺乏支持
更好的文件压缩
适用其他文件类型
查看支持:
http://caniuse.com/#feat=filereader
http://caniuse.com/#feat=fetch
CORS Image
2、Canvas
新建图片,在画布上实现,然后将canvas对象转变为一个dataURL
支持的inputFormat:
支持的outputFormat:
查看支持:
http://caniuse.com/#feat=canvas
IE10 (IE10 just works with same origin images)
3、从当前文件系统读取,input读取文件后,利用FileReader进行转换
通过XMLHttpRequest请求图片Blob数据格式,然后利用FileReader转换为dataURL
function toDataURL(url, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); } toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) { console.log('RESULT:', dataUrl) })
请求可以利用 WHATWG fetchJs来实现
const toDataURL = url => fetch(url) .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = () => resolve(reader.result) reader.onerror = reject reader.readAsDataURL(blob) })) toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0').then(dataUrl => { console.log('RESULT:', dataUrl) })
优缺点:
某些浏览器缺乏支持
更好的文件压缩
适用其他文件类型
查看支持:
http://caniuse.com/#feat=filereader
http://caniuse.com/#feat=fetch
CORS Image
2、Canvas
新建图片,在画布上实现,然后将canvas对象转变为一个dataURL
function toDataURL(src, callback, outputFormat) { var img = new Image(); img.crossOrigin = 'Anonymous'; // 允许image请求的图片应用到canvas,就像他们在同一个域 img.onload = function() { var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var dataURL; canvas.height = this.naturalHeight; canvas.width = this.naturalWidth; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL(outputFormat); callback(dataURL); }; img.src = src; if (img.complete || img.complete === undefined) { // 确保对缓存的图片也触发img.onload事件 img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; img.src = src; } } toDataURL( 'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) { console.log('RESULT:', dataUrl) } )
支持的inputFormat:
image/png,
image/jpeg,
image/jpg,
image/gif,
image/bmp,
image/tiff,
image/x-icon,
image/svg+xml,
image/webp,
image/xxx
支持的outputFormat:
image/png,
image/jpeg,
image/webp(chrome)
查看支持:
http://caniuse.com/#feat=canvas
IE10 (IE10 just works with same origin images)
3、从当前文件系统读取,input读取文件后,利用FileReader进行转换
function encodeImageFileAsURL(element) { var file = element.files[0]; var reader = new FileReader(); reader.onloadend = function() { console.log('RESULT', reader.result) } reader.readAsDataURL(file); }
<input type="file" onchange="encodeImageFileAsURL(this)" />
相关文章推荐
- 利用PHP将图片转换成base64编码的实现方法
- Java实现base64图片编码数据转换为本地图片的方法
- 利用PHP将图片转换成base64编码的实现方法
- Javascript将图片的绝对路径转换为base64编码的方法
- 利用PHP将图片转换成base64编码的实现方法
- python将图片文件转换成base64编码的方法
- python将图片文件转换成base64编码的方法
- 利用PHP将图片转换成base64编码的实现方法
- iOS7.0及以上图片转换成base64编码的方法(oc)
- 尼玛,终于找到在IE中将图片转换成base64的方法了
- PHP将图片转base64编码以及base64图片转换为图片并保存代码
- 图片上传通过Bitmap转换成Base64编码然后当做请求参数上传
- 图片和base64编码字符串 互相转换,图片和byte数组互相转换
- 利用Cimage将图片编码成Base64——C++方法实现
- Base64编码和图片的互相转换 .
- iOS UIImage图片与base64编码相互转换
- 图片转换成Base64编码集成到html文件
- 图片文件转换为base64编码
- Java 处理图片 base64 编码的相互转换