zoukankan      html  css  js  c++  java
  • canvas转img,blob相互转换

     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 } 
  • 相关阅读:
    Ajax基础:3.Json
    Head First Design Patterns State Pattern
    Head First Design Patterns Template Method Pattern
    Articles For CSS Related
    Head First Design Patterns Decorator Pattern
    代码审查工具
    How To Be More Active In A Group
    Head First Design Patterns Factory Method Pattern
    Head First Design Patterns Composite Pattern
    Tech Articles
  • 原文地址:https://www.cnblogs.com/lgx5/p/15172267.html
Copyright © 2011-2022 走看看