图片转换js (img对象,file对象,base64,canvas对象),以及图片压缩方式

CSDN博客

首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器;有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库;有时候后它还有可能是一块canvas画布,或者是一个Image对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程;

二、解决办法

如上图所示,七个方法,基本覆盖了JS中大部分文件类型的转换与压缩,其中:

1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象,其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数,代码如下:

  1. function urltoImage (url,fn){

2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象,其中 image 参数传入一个Image对象,代码如下:

  1. function imagetoCanvas(image){

  2. var cvs = document.createElement("canvas");

  3. var ctx = cvs.getContext('2d');

  4. cvs.height = image.height;

  5. ctx.drawImage(image, 0, 0, cvs.width, cvs.height);

3、 canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象;其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型,表示图片压缩质量; fn 为回调方法,包含一个 Blob 对象的参数;代码如下:

  1. function canvasResizetoFile(canvas,quality,fn){

  2. canvas.toBlob(function(blob) {

这里的 Blob 对象表示不可变的类似文件对象的原始数据。 Blob 表示不一定是 JavaScript 原生形式的数据。 File 接口基于 Blob ,继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待,其他更具体的用法可以参考MDN文档

4、 canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个 dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型,表示图片压缩质量;代码如下:

  1. methods.canvasResizetoDataURL = function(canvas,quality){

  2. return canvas.toDataURL('image/jpeg',quality);

其中的 toDataURL API可以参考MDN文档

5、 filetoDataURL(file,fn) 会将 File ( Blob )类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File ( Blob )类型文件; fn 为回调方法,包含一个 dataURL 字符串的参数;代码如下:

  1. function filetoDataURL(file,fn){

  2. var reader = new FileReader();

  3. reader.onloadend = function(e){

  4. reader.readAsDataURL(file);

6、 dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法,包含一个 Image 类型文件的参数,代码如下:

  1. function dataURLtoImage(dataurl,fn){

  2. img.onload = function() {

7、 dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象,其中 dataurl 参数传入一个 dataURL 字符串,代码如下:

  1. function dataURLtoFile(dataurl) {

  2. var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

  3. bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

  4. u8arr[n] = bstr.charCodeAt(n);

  5. return new Blob([u8arr], {type:mime});

三、进一步封装

对于常用的将一个 File 对象压缩之后再变为 File 对象,我们可以将上面的方法再封装一下,参考如下代码:

  1. function fileResizetoFile(file,quality,fn){

  2. filetoDataURL (file,function(dataurl){

  3. dataURLtoImage(dataurl,function(image){

  4. canvasResizetoFile(imagetoCanvas(image),quality,fn);

其中, file 参数传入一个 File ( Blob )类型文件; quality 参数传入一个 0-1 的 number 类型,表示图片压缩质量; fn 为回调方法,包含一个 Blob 类型文件的参数。

它使用起来就像下面这样:

  1. var file = document.getElementById('demo').files[0];

  2. fileResizetoFile(file,0.6,function(res){

ps:下面看下JS等比压缩图片的办法

  1. function proDownImage(path,imgObj) { // 等比压缩图片工具

  2. //var proMaxHeight = 185;

  3. image.attachEvent("onreadystatechange",

  4. function() { // 当加载状态改变时执行此方法,因为img的加载有延迟

  5. if (image.readyState == "complete") { // 当加载状态为完全结束时进入

  6. if (image.width > 0 && image.height > 0) {

  7. var ww = proMaxWidth / image.width;

  8. var hh = proMaxHeight / image.height; 

  9. var rate = (ww < hh) ? ww: hh;

  10. alert("imgage width*rate is:" + image.width * rate);

  11. size.width = image.width * rate;

  12. size.height = image.height * rate;

  13. alert("imgage width is:" + image.width);  

  14. size.width = image.width;  

  15. size.height = image.height;   

  16. imgObj.attr("width",size.width);

  17. imgObj.attr("height",size.height);

本文由 黑白世界4648 第一时间收藏到GET,原文来自 → blog.csdn.net

「GetParty」

关注微信号,推送好文章

微信中长按图片即可关注

更多精选文章

评论
微博一键登入