zoukankan      html  css  js  c++  java
  • DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    canvas转换为dataURL (从canvas获取dataURL)

    var dataurl = canvas.toDataURL('image/png');

    var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);

    File对象转换为dataURL、Blob对象转换为dataURL

    function readBlobAsDataURL(blob, callback) {
       var a = new FileReader();
       a.onload = function(e) {callback(e.target.result);};
       a.readAsDataURL(blob);
    }
    //example:
    readBlobAsDataURL(blob, function (dataurl){
       console.log(dataurl);
    });
    readBlobAsDataURL(file, function (dataurl){
       console.log(dataurl);
    });
    dataURL转换为Blob对象、dataURL转换为File对象

    File继承于Blob,扩展了一些属性(文件名、修改时间、路径等)。绝大多数场景下,使用Blob对象就可以了。 
    兼容性:Edge浏览器不支持File对象构造函数,也就是Edge里不能new File()。

    function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
    u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
    }
    function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
    u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
    }
    //test:
    var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
    var file = dataURLtoFile('data:text/plain;base64,YWFhYWFhYQ==', 'test.txt');

    dataURL图片数据绘制到canvas
    先构造Image对象,src为dataURL,图片onload之后绘制到canvas

    var img = new Image();
    img.onload = function(){
    canvas.drawImage(img);
    };
    img.src = dataurl;

    File,Blob的图片文件数据绘制到canvas

    还是先转换成一个url,然后构造Image对象,src为dataURL,图片onload之后绘制到canvas

    利用上面的 readBlobAsDataURL 函数,由File,Blob对象得到dataURL格式的url,再参考 dataURL图片数据绘制到canvas

    readBlobAsDataURL(file, function (dataurl){
    var img = new Image();
    img.onload = function(){
    canvas.drawImage(img);
    };
    img.src = dataurl;
    });
    不同的方法用于构造不同类型的url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍,仅以dataURL为例。

    filesystemURL不是指本地文件URL的形式(file:///….), 而是格式类似于 filesystem:http://... 的一种URL,支持沙盒文件系统的浏览器支持(目前仅Chrome)支持。

    Canvas转换为Blob对象并使用Ajax发送

    转换为Blob对象后,可以使用Ajax上传图像文件。

    先从canvas获取dataurl, 再将dataurl转换为Blob对象

    var dataurl = canvas.toDataURL('image/png');
    var blob = dataURLtoBlob(dataurl);
    //使用ajax发送
    var fd = new FormData();
    fd.append("image", blob, "image.png");
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/server', true);
    xhr.send(fd);

  • 相关阅读:
    GIS数据格式:Coverage
    GIS数据格式:Shapefile
    WMS
    openlayer调用geoserver发布的地图实现地图的基本功能
    OpenLayers 项目完整分析——(二)源代码总体结构分析
    geoserver扫盲 openlayers相关
    The connection to adb is down, and a severe error has occured
    Maven创建工程项目如何下载所需要的jar包
    转:Java学习路线图,专为新手定制的Java学习计划建议
    C# Lambda表达式使用累加器例子
  • 原文地址:https://www.cnblogs.com/qiaoxinming/p/9821063.html
Copyright © 2011-2022 走看看