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 } 
  • 相关阅读:
    技术收集
    Entity Framework的扩展库
    暂时收集
    php 处理高并发的思路
    nginx缓存优先级(缓存问题者必看)
    mysql5.5主从配置
    php源码编译常见错误解决方案
    今天开始要改变模式了
    nrpe 在ubuntu上安装遇到的问题
    zendstudio 10下载汉化
  • 原文地址:https://www.cnblogs.com/lgx5/p/15172267.html
Copyright © 2011-2022 走看看