zoukankan      html  css  js  c++  java
  • canvas生成图片,背景图不显示

    html代码

    <div id="echartsId" style="height:400px;1148px" class="svg-wrap">
                    暂无数据
                </div>

    js代码

      var canvasId = "echartsId";
    
        
        var a = document.createElement('a');
        a.href = document.getElementById(canvasId).getElementsByTagName("canvas")[0].toDataURL();  //将画布内的信息导出为png图片数据
        a.download = "MapByMathArtSys";  //设定下载名称
        a.click(); //点击触发下载

    背景图不显示的问题:

        var canvasId = "echartsId";var ctx = document.getElementById(canvasId).getElementsByTagName("canvas")[0];
      
        var image = new Image();
        image.src = encodeURI("/content/assist/images/watermark/1.png");
        image.onload = function () {
            var div_width = ctx.width;
            var div_height = ctx.height;
            var old_width = image.width;
            var old_height = image.height;
            var scale_x = (div_width - old_width) / 2;
            var scale_y = (div_height - old_height) / 2;
    
    
            ctx.getContext('2d').drawImage(image, scale_x, scale_y);
    
            var a = document.createElement('a');
            a.href = ctx.toDataURL();  //将画布内的信息导出为png图片数据
            a.download = "趋势图";  //设定下载名称
            a.click(); //点击触发下载
        }
    交流扣扣:1328542512
  • 相关阅读:
    WMI介绍
    进程间通信
    回调函数(C/C++)
    漏洞名词介绍
    MD5 详解
    jQuery插件的写法
    node爬虫
    nodejs应用:文件上传
    node开发备注
    node生成自定义命令(yargs/commander)
  • 原文地址:https://www.cnblogs.com/codeDevotee/p/14680340.html
Copyright © 2011-2022 走看看