1 // canvas转dataURL:canvas对象、转换格式、图像品质 2 function canvasToDataURL(canvas, format, quality){ 3 return canvas.toDataURL(format||'image/jpeg', quality||1.0); 4 } 5 // DataURL转canvas 6 function dataURLToCanvas(dataurl, cb){ 7 var canvas = document.createElement('CANVAS'); 8 var ctx = canvas.getContext('2d'); 9 var img = new Image(); 10 img.onload = function(){ 11 canvas.width = img.width; 12 canvas.height = img.height; 13 ctx.drawImage(img, 0, 0); 14 cb(canvas); 15 }; 16 img.src = dataurl; 17 } 18 /*-----------------------------------------------------------------------*/ 19 // image转canvas:图片地址 20 function imageToCanvas(src, cb){ 21 var canvas = document.createElement('CANVAS'); 22 var ctx = canvas.getContext('2d'); 23 var img = new Image(); 24 img.src = src; 25 img.onload = function (){ 26 canvas.width = img.width; 27 canvas.height = img.height; 28 ctx.drawImage(img, 0, 0); 29 cb(canvas); 30 }; 31 } 32 // canvas转image 33 function canvasToImage(canvas){ 34 var img = new Image(); 35 img.src = canvas.toDataURL('image/jpeg', 1.0); 36 return img; 37 } 38 /*-----------------------------------------------------------------------*/ 39 // File/Blob对象转DataURL 40 function fileOrBlobToDataURL(obj, cb){ 41 var a = new FileReader(); 42 a.readAsDataURL(obj); 43 a.onload = function (e){ 44 cb(e.target.result); 45 }; 46 } 47 // DataURL转Blob对象 48 function dataURLToBlob(dataurl){ 49 var arr = dataurl.split(','); 50 var mime = arr[0].match(/:(.*?);/)[1]; 51 var bstr = atob(arr[1]); 52 var n = bstr.length; 53 var u8arr = new Uint8Array(n); 54 while(n--){ 55 u8arr[n] = bstr.charCodeAt(n); 56 } 57 return new Blob([u8arr], {type:mime}); 58 } 59 /*-----------------------------------------------------------------------*/ 60 // Blob转image 61 function blobToImage(blob, cb){ 62 fileOrBlobToDataURL(blob, function (dataurl){ 63 var img = new Image(); 64 img.src = dataurl; 65 cb(img); 66 }); 67 } 68 // image转Blob 69 function imageToBlob(src, cb){ 70 imageToCanvas(src, function (canvas){ 71 cb(dataURLToBlob(canvasToDataURL(canvas))); 72 }); 73 } 74 /*-----------------------------------------------------------------------*/ 75 // Blob转canvas 76 function BlobToCanvas(blob, cb){ 77 fileOrBlobToDataURL(blob, function (dataurl){ 78 dataURLToCanvas(dataurl, cb); 79 }); 80 } 81 // canvas转Blob 82 function canvasToBlob(canvas, cb){ 83 cb(dataURLToBlob(canvasToDataURL(canvas))); 84 } 85 /*-----------------------------------------------------------------------*/ 86 // image转dataURL 87 function imageToDataURL(src, cb){ 88 imageToCanvas(src, function (canvas){ 89 cb(canvasToDataURL(canvas)); 90 }); 91 } 92 // dataURL转image,这个不需要转,直接给了src就能用 93 function dataURLToImage(dataurl){ 94 var img = new Image(); 95 img.src = d; 96 return img; 97 }