Blob/DataURL/canvas/image的相互轉(zhuǎn)換

// canvas轉(zhuǎn)dataURL:canvas對象、轉(zhuǎn)換格式、圖像品質(zhì)

function canvasToDataURL(canvas, format, quality){

return canvas.toDataURL(format||'image/jpeg', quality||1.0);

}

// DataURL轉(zhuǎn)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轉(zhuǎn)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轉(zhuǎn)image

function canvasToImage(canvas){

var img = new Image();

img.src = canvas.toDataURL('image/jpeg', 1.0);

return img;

}

/*-----------------------------------------------------------------------*/

// File/Blob對象轉(zhuǎn)DataURL

function fileOrBlobToDataURL(obj, cb){

var a = new FileReader();

a.readAsDataURL(obj);

a.onload = function (e){

cb(e.target.result);

};

}

// DataURL轉(zhuǎn)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轉(zhuǎn)image

function blobToImage(blob, cb){

fileOrBlobToDataURL(blob, function (dataurl){

var img = new Image();

img.src = dataurl;

cb(img);

});

}

// image轉(zhuǎn)Blob

function imageToBlob(src, cb){

imageToCanvas(src, function (canvas){

cb(dataURLToBlob(canvasToDataURL(canvas)));

});

}

/*-----------------------------------------------------------------------*/

// Blob轉(zhuǎn)canvas

function BlobToCanvas(blob, cb){

fileOrBlobToDataURL(blob, function (dataurl){

dataURLToCanvas(dataurl, cb);

});

}

// canvas轉(zhuǎn)Blob

function canvasToBlob(canvas, cb){

cb(dataURLToBlob(canvasToDataURL(canvas)));

}

/*-----------------------------------------------------------------------*/

// image轉(zhuǎn)dataURL

function imageToDataURL(src, cb){

imageToCanvas(src, function (canvas){

cb(canvasToDataURL(canvas));

});

}

// dataURL轉(zhuǎn)image,這個不需要轉(zhuǎn),直接給了src就能用

function dataURLToImage(dataurl){

var img = new Image();

img.src = d;

return img;

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 上網(wǎng)搜索了angularjs裁剪,發(fā)現(xiàn)只有正方形和圓形 http://www.cnblogs.com/smilec...
    四腳蛇閱讀 834評論 0 1
  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標(biāo)簽 ②:HTML5 ...
    GreenHand1閱讀 4,881評論 2 32
  • 一、圖形的組合方式 globalAlpha是一個介于0和1之間的值(包括0和1),用于指定所有繪制的透明度。默認(rèn)值...
    空谷悠閱讀 1,478評論 0 0
  • 在項(xiàng)目中,需要生成海報(bào)。有動態(tài)信息(微信頭像、微信昵稱、上傳圖片(oss鏈接)、二維碼)+ 海報(bào)背景圖生成一張海報(bào)...
    奔跑吧笨笨閱讀 7,952評論 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,817評論 1 45

友情鏈接更多精彩內(nèi)容