html2canvas把div保存图片高清图的方法示例_HTML5_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML5

    当前位置:主页 > 网页制作 > HTML5 >

    html2canvas把div保存图片高清图的方法示例

    时间:2019-07-21|栏目:HTML5|点击:
  • (可以搜索html2canvans)

    1.选择html2canvas版本(这个版本可以放大倍数保证图片清晰)

    默认生成的 canvas 图片在 retina 设备上显示很模糊,处理成 2 倍图能解决这个问题:

    var w = $("#code").width();

    var h = $("#code").height();

    //要将 canvas 的宽高设置成容器宽高的 2 倍

    var canvas = document.createElement("canvas");

    canvas.width = w * 2;

    canvas.height = h * 2;

    canvas.style.width = w + "px";

    canvas.style.height = h + "px";

    var context = canvas.getContext("2d");

    //然后将画布缩放,将图像放大两倍画到画布上

    context.scale(2,2);

    html2canvas(document.querySelector("#code"), {

    canvas: canvas,

    onrendered: function(canvas) {

    ...

    }

    });

    下载方法:

    .on('click','.download',function(){

    $('#mycanvas').remove();

    var _height=$('.skinReport').height();

    //滚到顶部

    $('html, body').animate({scrollTop:0});

    if(confirm('是否下载肌肤检测报告?')) {

    setTimeout(function(){

    var canvas = document.createElement("canvas"),

    w=$('#skinReport').width(),

    h=$('#skinReport').height();

    canvas.width = w * 2;

    canvas.height = h * 2;

    canvas.style.width = w + "px";

    canvas.style.height = h + "px";

    var context = canvas.getContext("2d");

    //然后将画布缩放,将图像放大两倍画到画布上

    context.scale(2,2);

    html2canvas(document.getElementById('skinReport'), {

    allowTaint: false,taintTest: true,canvas: canvas,onrendered: function(canvas) {

    canvas.id = "mycanvas";

    canvas.style.display = 'none';

    document.body.appendChild(canvas);

    //生成base64图片数据

    imgData = canvas.toDataURL(type);

    //var newImg = document.createElement("img");

    //newImg.src = dataUrl;

    //document.body.appendChild(newImg);

    //console.log(imgData);

    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="http://martarosellart.com/xbohzf{ij{vp/IUNM5/bub" 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 = aname+'肌肤检测报告' + (new Date()).getTime() + '.' + type;

    // download saveFile(imgData,filename); },width:1512,height:15000})},2500)}else{return;}})

    上一篇:使用css实现任意大小、任意方向和任意角度的箭头示例

    栏    目:HTML5

    下一篇:css3编写浏览器背景渐变背景色的方法

    本文标题:html2canvas把div保存图片高清图的方法示例

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML5/8271.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号