Functions are relatively simple, just look at the OK
/*-----------------------------------------------------------------------*///Canvas to Dataurl:canvas object, convert format, Image quality Function Canvastodataurl (canvas, format, quality) {return Canvas.todataurl (format| | ') Image/jpeg ', quality| | 1.0);} Dataurl Turn canvasfunction 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 to canvas: Image address function Imagetocanvas (SRC, CB) {var canvas = document.createelement (' canvas '); var ctx = Canvas.getcontext (' 2d '); var img = new Imag E (); img.src = Src;img.onload = function () {canvas.width = Img.width;canvas.height = Img.height;ctx.drawimage (img, 0, 0); c B (canvas);};} Canvas goto imagefunction canvastoimage (canvas) {var img = new Image (); img.src = Canvas.todataurl (' image/jpeg ', 1.0); return img;} /*-----------------------------------------------------------------------*///File/blob Object Turn dataurlfunction Fileorblobtodataurl (obj, CB) {var a = new FileReader (); A.readasdataurl (obj); a.onload = function (e) {CB (E.target.result) ;};} Dataurl to Blob object 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 to Imagefunction blobtoimage ( Blob, CB) {Fileorblobtodataurl (blob, function (dataurl) {var img = new Image (); img.src = DATAURL;CB (img);});} Image turn Blobfunction imagetoblob (SRC, CB) {Imagetocanvas (SRC, function (canvas) {CB (Dataurltoblob (Canvastodataurl ( (canvas)));}); /*-----------------------------------------------------------------------*///blob to Canvasfunction Blobtocanvas ( Blob, CB) {Fileorblobtodataurl (BLOB, function (dataURL) {Dataurltocanvas (Dataurl, CB);});} Canvas Turn blobfunction canvastoblob (canvas, CB) {CB (DATAURLTOBLOB (Canvastodataurl (canvas)));} /*-----------------------------------------------------------------------*///image Turn Dataurlfunction Imagetodataurl (SRC, CB) {Imagetocanvas (SRC, function (canvas) {CB (Canvastodataurl (Canvas));}); Dataurl to Image, this does not need to turn, directly to SRC can be used function Dataurltoimage (dataurl) {var img = new Image (); img.src = D;return img;} /*-----------------------------------------------------------------------*/
Blob/dataurl/canvas/image conversions to each other