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 }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤