如何保存jtopo中生成得图片(canvas中得图片)

转载 2018年04月17日 14:14:10

这是在使用jtopo(一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包) 有兴趣得可以了解一下(http://www.jtopo.com/)

在开发得过程中有导出canvas中得图片得功能,以下为代码,亲测有效(可直接使用)

//图片导出为 png 格式

var type = 'png';
var imgData = canvas.toDataURL(type);


/**
 * 获取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');
/**
* 在本地进行文件保存
* @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 = 'picture.' + type;
// download
saveFile(imgData,filename);

jtopo实现导出图片

jtopo的功能还是比较全面的. 导出功能也比较简单 就一个函数调用. 基本可以覆盖以前svg原型的功能. jTopo Demo ...
  • laputa73
  • laputa73
  • 2014-03-20 16:00:11
  • 2867

把canvas画布存为图片并保存到web目录下

前端代码: $("#saveimg").click(function() { var c = document.getElementById("canvas"); //得到id为canvas的画布元...
  • qq_19688989
  • qq_19688989
  • 2017-03-27 19:49:42
  • 197

如何将canvas保存为本地图片

canvas提供了一个重要的方法toDataURL(),这个方法能把画布里的图案转变成base64编码格式的png或者其他格式的图片(根据你传入的mine类型的参数),然后返回 Data URL数据。...
  • qq_25600055
  • qq_25600055
  • 2017-09-02 20:44:35
  • 708

用html5的canvas生成图片并保存到后台

借鉴了 这位大神的 http://blog.csdn.net/jcx5083761/article/details/7991558
  • SaYa_of1
  • SaYa_of1
  • 2018-01-04 19:38:52
  • 512

Html5 canvas生成图片,通过java进行保存

找到canvas对象,通过canvas对象的toDataURL获取图片信息var canvas = document.getElementById("vjs-key-frame"); var data...
  • u013659732
  • u013659732
  • 2016-08-02 16:52:43
  • 5202

如何使用js将canvas保存为图片文件,并且可以自定义文件名

1、从canvas中直接提取图片元数据 // 图片导出为 png 格式 var type = 'png'; var imgData = c...
  • qq547276542
  • qq547276542
  • 2016-07-14 10:16:24
  • 14574

Android画布Canvas中保存图片的方…

忙了一周,做图片处理相关,以前接触这方面比较少,边看帖边学习,总结一下: Android中保存图片的方法:  private void save(Bitmap bmp,String strFileNa...
  • chao2010686
  • chao2010686
  • 2015-01-07 15:00:45
  • 729

前台js(canvas)生成图片,通过后台java进行保存

前言: 本来我的目的是要通过前台一个按钮点击后生成一个pdf文件保存到电脑,然后我是用的jspdf做的,但是这玩意(js)只能通过浏览器下载的方式保存到电脑,但是需求是直接保存到本地不通过浏览器下载,...
  • qq_33847794
  • qq_33847794
  • 2017-09-21 13:19:29
  • 1132

web手势库AlloyFinger运用案例:代言海报

  • 2016年09月30日 18:12
  • 155KB
  • 下载

js实现将canvas保存成图片并下载到本地

//图片导出为 png 格式 var type = 'png'; var imgData = canvas.toDataURL(type);/** * 获取mimeType * @param {...
  • u012246064
  • u012246064
  • 2017-09-19 17:06:45
  • 1575
收藏助手
不良信息举报
您举报文章:如何保存jtopo中生成得图片(canvas中得图片)
举报原因:
原因补充:

(最多只允许输入30个字)