<html>

      <div id="pic" style="margin-left: 500px;position:fixed;opacity:0;"><!-- 隐藏html内容 -->

    <div id="img4Cut">

      <div>${vm.htmlContent}</div>

    </div>

  </div>

  <div id="imgCode" class="imgcode" ></div>

<script>

  <![CDATA[

$(document).ready(function(){

      html2canvas(document.querySelector("#img4Cut")).then(canvas => {

      var img = Canvas2Image.convertToImage(canvas, canvas.width*0.3, canvas.height*0.3);

      $("#imgCode").empty();

      document.querySelector("#imgCode").appendChild(img);

      $("#pic").hide();

    });

  });

]]>

</script>

</html>

canvas2image.js

html2canvas.min.js

java html生成图片html2canvas，Canvas2Image的更多相关文章

  1. 将HTML元素转换成图片供用户下载（html2canvas + canvas2Image）

    这是项目中遇到的一个问题,起初觉得把一个html元素生成图片,提供给用户下载的需求挺容易实现的,毕竟看过一些截图的插件,但是在真正操作中遇到了各种各样的问题,比如移动端上截图显示不清晰,html元素中 ...

  2. java使用代理 html2canvas 截屏 将页面内容生成图片

    1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...

  3. Java代码生成图片验证码

    1.jsp页面显示验证码,src跳转到Controller里的:getImg_validate,reloadImg()作用是点击验证码就会换一张(重新请求getImg_validate) <ul ...

  4. 积跬步，聚小流------java信息生成图片

    需求: 是在做证书的时候碰到的这个问题. 当时需求是能够进行在线打印证书,第一次进行的操作是直接打印html,并且已经排好版(用jqprint插件)进行打印.在打印时碰到了兼容的问题,另外因为背景图片 ...

  5. html2canvas+Canvas2Image分享海报功能踩坑

    首先需要 import html2canvas from 'html2canvas'; import {Canvas2Image} from '../../assets/js/plug/canvas2 ...

  6. java生成生成图片缩略图

    /** * */ package com.fkhwl.fkhserver.core.utils; import java.awt.Image; import java.awt.image.Buffer ...

  7. 用Java实现生成图片验证码

    通过代码实现生成一个随机验证码图片,且生成后自动打开: package day_12_17; import javax.imageio.ImageIO; import java.awt.*; impo ...

  8. java后台生成图片二维码

    controller: /** * 获取登录的验证码 * @param request * @param response */ public void getLoginCode(HttpSessio ...

  9. html2canvas 无法渲染网络图片及本地 解决方案

    使用html2canvas插件可以无法渲染图片的情况 在使用html2canvas的时候.如果元素中还包含网络图片.那么有很大的几率渲染不出来.即时把html2canvas的允许跨域打开也无济于事.这 ...

随机推荐

  1. 【KeepAlive】Http--Keep-Alive及Tcp--Keepalive

    Keep-Alive模式: Http协议采用“请求-应答”模式,当使用普通模式,即非Keep-Alive模式时,每个请求/应答,客户端和服务器都要新建一个连接,完成之后立即断开连接:当使用Keep-A ...

  2. PHP curl_errno函数

    curl_errno — 返回最后一次的错误号 说明 int curl_errno ( resource $ch ) 返回最后一次cURL操作的错误号. 参数 ch 由 curl_init() 返回的 ...

  3. 【LeetCode 73】矩阵置零

    题目链接 [题解] 如果a[i][j]==0. 就把第i行的第一个数字置为0 然后把第j列的第一个数字置为0 最后再处理下每行第一个为0的行.每列第一个为0的列. (第一行和第一列都得用同一个位置处理 ...

  4. linux系统下tomcat应用开机自启动 配置

    linux系统下tomcat应用开机自启动 配置 相对简单的方式是将tomcat添加为系统服务第一步  复制文件将 $Tomcat_Home/bin目录下的 catalina.sh脚本文件复制到目录/ ...

  5. BUUCTF | [CISCN2019 华北赛区 Day2 Web1]Hack World

    id=0 id=1 id=2 id=3 发现结果不一样,尝试 : ">4","=4","<4" : 在自己的环境下验证一下: 爆 ...

  6. 高并发大流量专题---3、前端优化（减少HTTP请求次数）

    高并发大流量专题---3.前端优化(减少HTTP请求次数) 一.总结 一句话总结: 图片地图:使用<map><area></area></map>标签. ...

  7. python input() 与raw_input()

    使用input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的1:纯数字输入 当输入为纯数字时 input返回的是数值类型,如int,float   ...

  8. MySQL &lt; &gt; 等用法

  9. STM32串口USART1的使用方法和程序

    通用同步异步收发器(USART)提供了一种灵活的方法来与使用工业标准NR 异步串行数据格式的外部设备之间进行全双工数据交换. USART利用分数波特率发生器提供宽范围的波特率选择,支持同步单向通信和半 ...

  10. shell脚本——注释（单行注释 多行注释）

    参考 : https://blog.csdn.net/weixin_42167759/article/details/80703570 单行注释 以"#"开头的行就是注释,会被解释 ...