文档章节

DataURL, Blob, File, Image之间的关系与转换

xmqywx
 xmqywx
发布于 2018/10/10 15:18
字数 374
阅读 830
收藏 0

使用前景:

移动端上传拍照图片太大,使用canvas压缩后base64=>blob二进制表单文件=>ajax-POST上传

// canvas转dataURL:canvas对象、转换格式、图像品质
function canvasToDataURL(canvas, format, quality) {
    return canvas.toDataURL(format||'image/jpeg', quality||1.0);
}
// DataURL转canvas
function dataURLToCanvas(dataurl, cb){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function(){
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        cb(canvas);
    };
    img.src = dataurl;
}
// image转canvas:图片地址
function imageToCanvas(src, cb){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = src;
    img.onload = function (){
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        cb(canvas);
    };
}
    // canvas转image
    function canvasToImage(canvas){
        var img = new Image();
        img.src = canvas.toDataURL('image/jpeg', 1.0);
        return img;
    }
    // File/Blob对象转DataURL
    function fileOrBlobToDataURL(obj, cb){
        var a = new FileReader();
        a.readAsDataURL(obj);
        a.onload = function (e){
            cb(e.target.result);
        };
    }
    // DataURL转Blob对象
    function dataURLToBlob(dataurl){
        var arr = dataurl.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
    }
    // Blob转image
    function blobToImage(blob, cb){
        fileOrBlobToDataURL(blob, function (dataurl){
        var img = new Image();
            img.src = dataurl;
            cb(img);
        });
    }
    // image转Blob
    function imageToBlob(src, cb){
        imageToCanvas(src, function (canvas){
            cb(dataURLToBlob(canvasToDataURL(canvas)));
        });
    }
    // Blob转canvas
    function BlobToCanvas(blob, cb){
        fileOrBlobToDataURL(blob, function (dataurl){
            dataURLToCanvas(dataurl, cb);
        });
    }
// canvas转Blob
function canvasToBlob(canvas, cb){
	cb(dataURLToBlob(canvasToDataURL(canvas)));
}
// image转dataURL 
function imageToDataURL(src, cb){
	imageToCanvas(src, function (canvas){
		cb(canvasToDataURL(canvas));
	});
}
// dataURL转image,这个不需要转,直接给了src就能用 
function dataURLToImage(dataurl){
	var img = new Image();
	img.src = d;
	return img;
}

本文转载自:https://blog.csdn.net/hahahhahahahha123456/article/details/80605836

xmqywx
粉丝 11
博文 27
码字总数 9688
作品 0
青岛
程序员
私信 提问
DataURL与File,Blob,canvas对象之间的互相转换的Javascript

canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png');var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);12 File对象转换为dataURL、Blob对象转换为......

豆花饭烧土豆
2016/04/13
205
0
html5对于文件的相关操作

今天在写前端的时候碰到一些问题,现在对于web网页操作文件进一步了解。 主要参照:http://www.cnblogs.com/zichi/p/html5-file-api.html FileList 对象针对表单的 file 控件。当用户通过 fi...

marjey
2016/11/13
37
0
前端图片canvas,file,blob,DataURL等格式转换

最近用到一些图片相关的操作,记录一下笔记。 将file转化成base64 场景: 获取到一个file类型的图片,如果直接在html中预览?这里就是利用html5的新特性,将图片转换为Base64的形式显示出来。...

fengxianqi
2018/07/25
0
0
JavaScript 文件对象详解

在浏览器中操作文件,多数情况下用到的是 对象,从 元素获取,进而继续操作(例如将选择的图片展示在页面上,用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API. 对象继承自...

Mr-dang
2018/06/27
0
0
移动端js模拟截屏生成图片并下载功能的实现方案+踩坑过程

一. 项目中有需求如下: 将营业日报生成图片下载至用户手机保存 二. 踩坑思路: 首先,因为用的是第三方的app(钉钉)内嵌webview开发,所以无法拿到截屏的api(而且需要生成的日报超出一个屏...

小p
2019/01/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android MVP 快速开发框架ZBLibrary

MVP 架构,提供一套开发标准(View,Data,Event)以及模板和工具类并规范代码。封装层级少,简单高效兼容性好。 OKHttp、UIL图片加载、ZXing二维码、沉浸状态栏、下载安装、自动缓存以及各种B...

boonya
6分钟前
3
0
printf的格式很长的论点是什么?

printf函数采用参数类型,例如%d或%i用于signed int 。 但是,我没有看到任何long价值的东西。 #1楼 如果您打算像我一样打印unsigned long long ,请使用: unsigned long long n;printf("...

技术盛宴
12分钟前
19
0
为BlueLake主题增加图片放大效果

fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大、相册浏览、视频弹出层播放等效果。优点有使用简单,支持高度自定义,兼顾触屏、响应式移动端特性,总之使用体验相当好...

CREATE_17
13分钟前
21
0
如何将现有的Git存储库导入另一个?

我在名为XXX的文件夹中有一个Git存储库,还有第二个名为YYY的 Git存储库。 我想将XXX存储库作为名为ZZZ的子目录导入YYY存储库,并将所有XXX的更改历史记录添加到YYY 。 之前的文件夹结构: ...

javail
28分钟前
10
0
JSP-Servlet入门2之JSP运行原理(一)

JSP全名为Java Server Pages,中文名叫java服务器页面,是一种动态页面技术 。实际上JSP是指在HTML中嵌入java脚本语言, 一、 JSP起源 在很多动态网页中,绝大部分内容都是固定不变的,只有局...

橘子_
55分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部