关闭

canvas导出为图片并用JS下载

552人阅读 评论(0) 收藏 举报
分类:
canvas导出为图片并用JS下载进入全屏
line

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'truefalse, window, 0, 0, 0, 0, 0, falsefalsefalsefalse, 0, null);
    save_link.dispatchEvent(event);
};
   
// 下载后的问题名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData,filename);

例子参见:http://www.baidufe.com/demo/html2canvas.html

0
0
查看评论

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

//图片导出为 png 格式 var type = 'png'; var imgData = canvas.toDataURL(type);/** * 获取mimeType * @param {String} type the old mime-type * @return ...
  • u012246064
  • u012246064
  • 2017-09-19 17:06
  • 799

js导出div为图片

<div id="tbl_exception"> <p style=" color: chartreuse;">你的名字<span style='color:aqua; text-shadow:0 ...
  • u012761229
  • u012761229
  • 2017-10-31 10:33
  • 257

javascript 导出div为图片PNG,div转svg,svg转canvas

关于这个功能需求,目前比较多实现是两种方法: 1、将div相关数据传到后台服务器端,通过服务器语言生成图形,发送至前端下载 2、完全通过前端实现,实现几个转换过程,div为图片PNG,首先div转svg,然后svg转canvas,最后 通过浏览器下载。      优点:...
  • jaylongli
  • jaylongli
  • 2015-12-08 11:42
  • 16325

网页div元素导出成图片 JS+html2canvas

将html的元素转换成图片,并将该图片下载到本地的几种方法。
  • cnyellow930
  • cnyellow930
  • 2017-11-28 01:41
  • 306

浅谈JavaScript和Canvas实现彩色图片转换成黑白图片

1、convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布;彩色图片加载完成后,使用 drawImage 将图片加载到上下文,调用用于完成剩余绘制工作的 ge...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-13 11:35
  • 422

利用html5Canvas将Highchart图表导出图片

需求: 项目中大量用到了highchart图表,出于某些需求,需要将highchart图表导出为图片,以便于生成pdf、word等文档。现有的解决方案: highchart官方提供的导出方式是将图表数据发回其官网服务器,生成图片后返回,正常情况下系统不会允许使用这种方案。 网上找到一种自建导出...
  • lkmtao
  • lkmtao
  • 2015-03-30 17:28
  • 1548

html-canvas转存为图片

有时候,我们绘制好的canvas想存储为本地图片,该怎么做呢?canvas提供了一个重要的方法toDataURL(),这个方法能把画布里的图案转变成base64编码格式的png或者其他格式的图片(根据你传入的mine类型的参数),然后返回
  • lishihong108
  • lishihong108
  • 2016-09-20 17:44
  • 1354

将canvas里头的图画保存成为gif或jpg图象

发信人: Single_Fox (一狐),原信区: ustcbbs标  题: 将canvas里头的图画保存成为gif或jpg图象,how发信站: 中国科大BBS站 (Sun, 25 Apr ...
  • Co_Creating
  • Co_Creating
  • 2008-11-21 10:58
  • 4236

Echarts3之html2canvas下载图表(后续生成PDF)

Echarts提供了下载图表的功能,但是仅仅满足客户端下载到本地,不经过项目本身的后台,对于高度自定义是不能满足的。 首先页面引入html2canvas插件。<script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2ca...
  • zt_fucker
  • zt_fucker
  • 2017-03-13 16:40
  • 1883

js使用canvas绘制高清图片

H5能使用canvas绘制图像,但是有些时候我们需要绘制高清的图片。先介绍下几个定义:什么是devicePixelRatio: window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示...
  • hejunpochen
  • hejunpochen
  • 2016-08-02 13:18
  • 2038