要将html转成图片,要用到html2canvas插件,下载地址https://html2canvas.hertzen.com,具体用法官网文档上有介绍,具体上代码

html:

<div class="card">
  <p>姓名:刘北京</p>
  <p>职业:前端开发工程师</p>
  <p>个人网站:liubeijing.ren</p>
</div><br/>
<a href="">下载名片</a>

css:

.card{
  background:#cccccc;
  display:inline-block;
  padding:10px;
}

页面如下

blob.png

先来看看htmlcanvas具体怎么用:

js:

html2canvas($('.card'),{
  onrendered:function(canvas){
    console.log(canvas);
  }
});

blob.png

可以看到html2canvas已经将你传过去的dom元素内容转化成了canvas了,相当于新生成了一个dom节点,我们可以很随便的将他插入到页面中,但是我们的需求不止如此,我们需要完成点击“下载名片按钮”就将生成canvas变成真正的图片文件,并下载过来

在网上找了一圈,终于有了头绪,原文地址https://www.baidufe.com/item/65c055482d26ec59e27e.html

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

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


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');


3、下载图片

html2canvas($('.card'),{
  onrendered:function(canvas){
    var type = 'png';
    var imgData = canvas.toDataURL(type);
imgData = imgData.replace(_fixType(type),'image/octet-stream');
    $('a').attr({
      'href':imgData,
      'download':'刘北京个人信息.png'
    });
  }
});


代码演示地址:http://codepen.io/cococoder/pen/JbYYpB

疑惑:对替换mime type那一环节不太理解,可能是自己这方面知识不够,有待进一步了解