毕业论文—使用js将canvas保存为图片文件，并且自定义文件名

最新推荐文章于 2022-12-12 08:45:00 发布

weixin_34343308

最新推荐文章于 2022-12-12 08:45:00 发布

阅读量128

点赞数

原文链接：http://www.cnblogs.com/GoTing/p/6206466.html

版权

该文章引用http://blog.csdn.net/qq547276542/article/details/51906741

1、从canvas中直接提取图片元数据

 
          // 图片导出为 png 格式 
         
          var  
          type =  
          'png' 
          ; 
         
          var  
          imgData = canvas.toDataURL(type);

上面的代码得到的数据格式为：data:image/png;base64,.....

2、将mime-type改为image/octet-stream，强制让浏览器直接download

 
          /** 
         
          * 获取mimeType 
         
          * @param  {String} type the old mime-type 
         
          * @return the new mime-type 
         
          */ 
         
          var  
          _fixType =  
          function 
          (type) { 
         
          type = type.toLowerCase().replace(/jpg/i,  
          'jpeg' 
          ); 
         
          var  
          r = type.match(/png|jpeg|bmp|gif/)[0]; 
         
          return  
          'image/'  
          + r; 
         
          }; 
         
          // 加工image data，替换mime type 
         
          imgData = imgData.replace(_fixType(type), 
          'image/octet-stream' 
          );

上面这个代码得到的数据格式为：data:image/octet-stream;base64,.....

3、图片download到本地

 
          /** 
         
          * 在本地进行文件保存 
         
          * @param  {String} data     要保存到本地的图片数据 
         
          * @param  {String} filename 文件名 
         
          */ 
         
          var  
          saveFile =  
          function 
          (data, filename){ 
         
          var  
          save_link = document.createElementNS( 
          'http://www.w3.org/1999/xhtml' 
          ,  
          'a' 
          ); 
         
          save_link.href = data; 
         
          save_link.download = filename; 
         
          var  
          event = document.createEvent( 
          'MouseEvents' 
          ); 
         
          event.initMouseEvent( 
          'click' 
          ,  
          true 
          ,  
          false 
          , window, 0, 0, 0, 0, 0,  
          false 
          ,  
          false 
          ,  
          false 
          ,  
          false 
          , 0,  
          null 
          ); 
         
          save_link.dispatchEvent(event); 
         
          }; 
         
          // 下载后的问题名 
         
          var  
          filename =  
          'baidufe_'  
          + ( 
          new  
          Date()).getTime() +  
          '.'  
          + type; 
         
          // download 
         
          saveFile(imgData,filename);

转载于:https://www.cnblogs.com/GoTing/p/6206466.html

weixin_34343308

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
毕业论文—使用js将canvas保存为图片文件，并且自定义文件名

该文章引用http://blog.csdn.net/qq547276542/article/details/519067411、从canvas中直接提取图片元数据// 图片导出为 png 格式vartype ='png';varimgData = canvas.toDataURL(type);上面的代码得到的...
复制链接

扫一扫