精华内容
参与话题
问答
  • html2canvas

    2018-07-22 16:12:12
    我现在上传的是html2canvas,0.5版本的。刚好达到效果。如果版本太高的用不了,用0.5版本刚刚好稳定
  • 如何使用JS截取HTML页面为图片呢,下面为大家介绍一款JS截图插件html2canvas.js html2canvas.js 能够实现在用户浏览器端直接对整个或部分页面进行截屏。 html2canvas.js可以将当页面渲染成一个Canvas图片,通过读取...
  • html2canvas.zip

    2019-10-08 16:45:28
    保存HTML为图片的js,html2canvas.js/html2canvas.min.js/html2canvas.svg.js/html2canvas.svg.min.js
  • html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。
  • html2canvas.js

    2017-09-01 20:42:57
    html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 ...
  • html2canvas案例

    2017-02-09 11:07:23
    解决html2canvas截图模糊的问题
  • html2canvas在IOS13.4和13.6系统中调用失败,ios14版本没问题,就该版本不行,需要改用该版本才可以
  • html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。
  • html2Canvas演示

    2016-12-14 17:57:01
    html2Canvas可以截取网页中的整体或者某部分,然后输出为图片
  • html2canvas示例

    2017-05-25 15:54:27
    微信图片生成插件,页面截图插件 html2canvas,截图失真 问题的解决方案
  • html2canvas:http://html2canvas.hertzen.com/ <div id="canvasImg"> ... ... ... </div> 引入html2canvas.js就不在多说了,直接使用。 html2canvas(document.querySelector("#capture")).then...

    html2canvas:http://html2canvas.hertzen.com/

    <div id="canvasImg">
    	...
    	...
    	...
    </div>
    

    引入html2canvas.js就不在多说了,直接使用。

    html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas)	//在body中,把html生成的图片放在body下。
        var image = canvas.toDataURL("image/png"); //将canvas转换成base64
        ...
        ...
    });
    

    最后,如果我的笔记对您有帮助,请给我一个赞~ 谢谢!

    展开全文
  • html2canvashtml2canvas生成海报

    千次阅读 2018-12-03 15:45:13
    html2canvas生成海报 html2canvas官网: http://html2canvas.hertzen.com/?utm_source=caibaojian.com &amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;...

    html2canvas生成海报

    html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。

    它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

    html2canvas可以通过获取HTML的某个元素,然后生成Canvas,能让用户保存为图片。

    基本语法

    html2canvas(element, options);
    
    html2canvas(document.body, {
      onrendered: function(canvas) {
        var url = canvas.toDataURL();//图片地址
        document.body.appendChild(canvas);
      },
      width: 300,
      height: 300
    });
    

    或者使用ES6的promise

    //两个参数:所需要截图的元素id,截图后要执行的函数, canvas为截图后返回的最后一个canvas
     html2canvas(document.getElementById('id')).then(function(canvas) {document.body.appendChild(canvas);});
    

    可用参数

    参数名称 类型 默认值 描述
    allowTaint boolean false Whether to allow cross-origin images to taint the canvas—允许跨域
    background string #fff Canvas background color, if none is specified in DOM. Set undefined for transparent—canvas的背景颜色,如果没有设定默认透明
    height number null Define the heigt of the canvas in pixels. If null, renders with full height of the window.—canvas高度设定
    letterRendering boolean false Whether to render each letter seperately. Necessary if letter-spacing is used.—在设置了字间距的时候有用
    logging boolean false Whether to log events in the console.—在console.log()中输出信息
    proxy string undefined Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won’t be loaded.—代理地址
    taintTest boolean true Whether to test each image if it taints the canvas before drawing them—是否在渲染前测试图片
    timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.—图片加载延迟,默认延迟为0,单位毫秒
    width number null Define the width of the canvas in pixels. If null, renders with full width of the window.—canvas宽度
    useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy–这个我也不知道是干嘛的

    html2canvas官网下载js:
    http://html2canvas.hertzen.com/?utm_source=caibaojian.com

    jQuery下载:
    http://jquery.com/download/

    jQuery的API使用文档:
    http://jquery.cuishifeng.cn/


    以下是自己的代码:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    	<meta name="apple-mobile-web-app-capable" content="yes">
    	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    	<title>html2canvas生成海报</title>
    	<script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript" src="js/html2canvas.js"></script>
    </head>
    <body>
    	<div>
    		<input type="button" value="截图" onclick="takeScreenshot()">
    		<input type="button" value="保存图片" onclick="save()">
    	</div>
    	<div id="view" style="width: 100%; background:#eee;padding: 20px;margin: 10px 0">
    		<p>图片不见了</p>
    		<img class="bg"style="height: 300px;width: 100%" src="http://img.aworld.cn/o_1csndcipj18p61e8sgtg19l31bgfl.jpg" alt="图片不见了">
    	    <h4 style="color: #000; ">Hello world!</h4>
    	</div>
    
    <script type="text/javascript">
    	function takeScreenshot() {
    		//两个参数:所需要截图的元素id,截图后要执行的函数, canvas为截图后返回的最后一个canvas
    		html2canvas(document.getElementById('view'), {
    			useCORS: true
    		}).then(function(canvas) {
    			document.body.appendChild(canvas);
    			$(document).find('canvas').attr('id', 'mycanvas');
    		});
    	}
    	function save() {
    		var canvas = document.getElementById("mycanvas"); //获取canvas
    		var data = canvas.toDataURL('image/png');
    		console.log(data)
    
    	}
    </script>
    </body>
    
    </html>
    

    代码实现如下图:

    在这里插入图片描述


    html2canvas的使用,可详细查看参数

    展开全文
  • html2canvas,这是一个非常著名的从浏览器网页截图的...使用html2canvashtml2canvas的使用非常简单,简单到只需要传入一个DOM元素,然后通过回调拿到canvas:在实际使用的时候,有两个注意点:1.html2canvas通过解析...

    html2canvas,这是一个非常著名的从浏览器网页截图的开源库,使用很方便,功能也很强大。这

    转换代码到图片使用

    html2canvas,这是一个非常著名的从浏览器网页截图的开源库,使用很方便,功能也很强大。

    使用html2canvas

    html2canvas的使用非常简单,简单到只需要传入一个DOM元素,然后通过回调拿到canvas:

    在实际使用的时候,有两个注意点:

    1.html2canvas通过解析元素实际的样式来生成canvas图片内容,因此它对元素实际的布局和视觉显示有要求。如果要完整截图,最好将元素从文档流中独立出来(例如position:absolute)

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

    varw=$("#code").width();

    varh=$("#code").height();//要将canvas的宽高设置成容器宽高的2倍

    varcanvas=document.createElement("canvas");

    canvas.width=w*2;

    canvas.height=h*2;

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

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

    varcontext=canvas.getContext("2d");//然后将画布缩放,将图像放大两倍画到画布上

    context.scale(2,2);

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

    canvas:canvas,

    onrendered:function(canvas)

    {...

    }

    });

    使用html2canvas的实际案例

    1.html代码结构

    html2canvas的使用非常简单,简单到只需要传入一个DOM元素,然后通过回调拿到canvas

    html2canvas的使用非常简单,简单到只需要传入一个DOM元素,然后通过回调拿到canvas

    2.js代码结构

    varstr=$('#html2canvas');

    //console.log(str);

    html2canvas([str.get(0)],{

    onrendered:function(canvas){

    varimage=canvas.toDataURL("image/png");

    varpHtml="";

    $('#html2canvas').html(pHtml);

    }

    });

    展开全文
  • 解决html2canvas图片模糊问题,必须使用此版本
  • html2canvas html截图插件图片放大清晰度解决方案,支持任意放大倍数,解决原插件图片偏移问题1.首先引入html2canvas.js html2canvas 0.5.0-beta4 最新版即可必要步骤1:修改插件的源码: (修改的地方有两处)1. 代码...

    html2canvas html截图插件图片放大清晰度解决方案,支持任意放大倍数,解决原插件图片偏移问题

    1.首先引入html2canvas.js html2canvas 0.5.0-beta4 最新版即可

    必要步骤1:修改插件的源码: (修改的地方有两处)

    1. 代码第 999 行 renderWindow 的方法中 修改判断条件 增加一个options.scale存在的条件:

    源码:

    if (options.type === "view") {

    canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});

    } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {

    canvas = renderer.canvas;

    } else {

    canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});

    }

    改为:

    if (options.type === "view") {

    canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});

    } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement) {

    canvas = renderer.canvas;

    }else if(options.scale && options.canvas !=null){

    log("放大canvas",options.canvas);

    var scale = options.scale || 1;

    canvas = crop(renderer.canvas, {width: bounds.width * scale, height:bounds.height * scale, top: bounds.top *scale, left: bounds.left *scale, x: 0, y: 0});

    }

    else {

    canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});

    }

    2. 代码第 943 行 html2canvas 的方法中 修改width,height:

    源码:

    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {

    if (typeof(options.onrendered) === "function") {

    log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");

    options.onrendered(canvas);

    }

    return canvas;

    });

    改为:

    width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;

    height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;

    return renderDocument(node.ownerDocument, options, width, height, index).then(function(canvas) {

    if (typeof(options.onrendered) === "function") {

    log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");

    options.onrendered(canvas);

    }

    return canvas;

    });

    2.使用方式

    var shareContent = document.getElementById("shareContent");//需要截图的包裹的(原生的)DOM 对象

    var width = shareContent.offsetWidth; //获取dom 宽度

    var height = shareContent.offsetHeight; //获取dom 高度

    var canvas = document.createElement("canvas"); //创建一个canvas节点

    var scale = 2; //定义任意放大倍数 支持小数

    canvas.width = width * scale; //定义canvas 宽度 * 缩放

    canvas.height = height * scale; //定义canvas高度 *缩放

    canvas.getContext("2d").scale(scale,scale); //获取context,设置scale

    var opts = {

    scale:scale, // 添加的scale 参数

    canvas:canvas, //自定义 canvas

    logging: true, //日志开关

    width:width, //dom 原始宽度

    height:height //dom 原始高度

    };

    html2canvas(shareContent, opts).then(function (canvas) {

    //如果想要生成图片 引入canvas2Image.js 下载地址:

    //https://github.com/hongru/canvas2image/blob/master/canvas2image.js

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

    console.log(img);

    });

    2017.1.7 优化插件使用的方式,并附上demo (插件的改动还是按照上面的操作流程)

    (修复插件的使用方式上存在截图不完整的bug)

    以下我总结了一些注意事项,在代码中注释了,仅供参考。

    付:完整使用的demo ,如下:

    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    html2Canvas demo

    document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';

    body,

    html,

    div,

    p,

    ul,

    li,

    a,

    img,

    span,

    button,

    header,

    footer,

    section {

    padding: 0;

    margin: 0;

    }

    *, :before, :after {

    -webkit-tap-highlight-color: transparent;

    -webkit-user-select: none;

    outline: none;

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    }

    ::-webkit-scrollbar {

    width: 0;

    opacity: 0;

    }

    button{

    font-family: simsun,"microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;

    }

    body {

    font-family: "microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;

    color: #000;

    background-color: #f5f5f5;

    -webkit-overflow-scrolling: touch;

    }

    .share-container {

    padding-top: 0.72rem;

    width: 2.35rem;

    margin: 0 auto;

    }

    .share-content {

    padding-top: 0.72rem;

    height:3rem;

    background-color: blue;

    border-radius: 5px;

    width: 100%;

    }

    .text{

    font-size: 0.36rem;

    color: #f2f2f2;

    }

    .btn-share {

    width: 64%;

    height: 0.89rem;

    background-color: #3baaff;

    border-radius: 0.89rem;

    border: 1px solid #3baaff;

    color: white;

    font-size: 0.36rem;

    margin: 0.75rem 0 0.67rem;

    }

    .btn-share:active{

    background-color: #1b96c8;

    }

    截 图

    //定义查找元素方法

    function $(selector) {

    return document.querySelector(selector);

    }

    var main = {

    init:function(){

    main.setListener();

    },

    //设置监听事件

    setListener:function(){

    var btnShare = document.getElementById("btnShare");

    btnShare.onclick = function(){

    main.html2Canvas();

    }

    },

    //获取像素密度

    getPixelRatio:function(context){

    var backingStore = context.backingStorePixelRatio ||

    context.webkitBackingStorePixelRatio ||

    context.mozBackingStorePixelRatio ||

    context.msBackingStorePixelRatio ||

    context.oBackingStorePixelRatio ||

    context.backingStorePixelRatio || 1;

    return (window.devicePixelRatio || 1) / backingStore;

    },

    //绘制dom 元素,生成截图canvas

    html2Canvas: function () {

    var shareContent = $("#shareContent");// 需要绘制的部分的 (原生)dom 对象 ,注意容器的宽度不要使用百分比,使用固定宽度,避免缩放问题

    var width = shareContent.offsetWidth; // 获取(原生)dom 宽度

    var height = shareContent.offsetHeight; // 获取(原生)dom 高

    var offsetTop = shareContent.offsetTop; //元素距离顶部的偏移量

    var canvas = document.createElement('canvas'); //创建canvas 对象

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

    var scaleBy = main.getPixelRatio(context); //获取像素密度的方法 (也可以采用自定义缩放比例)

    canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度,居中,所以没有偏移

    canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题,由于顶部有个距离所以要加上顶部的距离,解决图像高度偏移问题

    context.scale(scaleBy, scaleBy);

    var opts = {

    allowTaint:true,//允许加载跨域的图片

    tainttest:true, //检测每张图片都已经加载完成

    scale:scaleBy, // 添加的scale 参数

    canvas:canvas, //自定义 canvas

    logging: true, //日志开关,发布的时候记得改成false

    width:width, //dom 原始宽度

    height:height //dom 原始高度

    };

    html2canvas(shareContent, opts).then(function (canvas) {

    console.log("html2canvas");

    var body = document.getElementsByTagName("body");

    body[0].appendChild(canvas);

    });

    }

    };

    //最后运行代码

    main.init();

    运行上面的demo 前有以下 注意点:

    前面的内容没看过,没下载过html2canvas.js 没按照插件改过说明操作的先改好再说

    注意元素的样式的使用:

    外层元素width 不能使用百分比 ,避免导致图片与文字间缩放比例问题

    错误使用方式如

    .container {

    width:50%;

    margin: 0 auto;

    }

    需要改成如:

    .container {

    width:300px;

    margin: 0 auto;

    }

    有疑问请在下方留言,可以在群里讨论和交流 QQ群:172270493,欢迎加入哦

    展开全文
  • // import html2canvas from "html2canvas"; // 当前vue文件引入html2canvas// components: {html2canvas}// 点击保存图片justDoIt() {var that = this;if (navigator.userAgent.indexOf("Html5Plus") >= 0) {...

空空如也

1 2 3 4 5 ... 20
收藏数 9,935
精华内容 3,974
关键字:

html2canvas