JavaScript 图片与Base64数据互相转换脚本

图片转换为Base64数据

方法一:非Html 5使用FileReader

使用XMLHttpRequest将图像加载为blob,接着使用FileReader API将其转换为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/00000000000000000000000000000000?d=identicon&f=y', function(dataUrl) {
  console.log('结果:', dataUrl)
})

方法二:Html 5使用Canvas

将图像加载到Image对象中,将其绘制到Canvas上,最后转换为dataURL

function toDataURL(src, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  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.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}

toDataURL(
  'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon&f=y',
  function(dataUrl) {
    console.log('结果:', dataUrl)
  }
)

Base64数据转换为图片

这里是把Base64的字符串转换为Blob ,这样就可以把数据传到一些图片服务器。

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

版权声明:著作权归作者所有。

相关推荐

JavaScript里null与undefined的区别与相似点

初次看,null和undefined看似是一样的,但远非如此。 本文将探讨JavaScript中null和undefined的区别和相似之处。null是什么?有两个你应该理解的null特性:null是空的或不存在的值。null必须显式赋值。将null的值赋给a示例:let a = null; console.log(a); // 输出null un

Shell脚本使用curl命令发送JSON数据

在Linux使用命令行工具curl发送JSON数据需要把content-type设置为“application/json”。-H "Content-Type: application/json 示例curl -H "Content-Type: application/json" -X POST&nb

Kotlin:return与跳转

Kotlin有两种跳转:循环跳转(break与continue)和返回跳转(return)。Labellabel语法:labelName@ label可以放在任何表达式之前,用来标记表达式。如loop@ for (i in 1..100) {     // ... } break和continueb

Swift日期和字符串互相转换(Swift 3/Swift 4)

Swift随着版本的升级,日期类都会有一点变化。所以各个版本的Swift日期和字符串的转换有所不同。Swift 4String转换为Datevar dateString = "2017-11-17" var dateFormatter = DateFormatter() // dateFormat

JavaScript undefined与ReferenceError: xxx is not defined

在JavaScript里,为了简便,判断语句常常这样写:if(abc) {   //do something } 变量未声明假如abc变量没有被声明,但此处会报错:ReferenceError: abc is not defined 变量已声明,为初始化示例修改下变为var abc; if(abc)&nbs