码迷,mamicode.com
首页 > Web开发 > 详细

html2canvas-html图片合成-canvas生成图片

时间:2019-08-15 19:39:53      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:https   canvas   app   boolean   with   function   rar   def   specified   

作用

  • html2canvas可以通过纯JS对浏览器端经行截屏,但截图的精确度还有待提高,部分css不可识别,所以在canvas中不能完美呈现原画面样式

支持的浏览器

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Safari 6+

基本语法

 //两个参数:所需要截图的元素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--这个我也不知道是干嘛的

 

 

请服搭务器环境查看

生成后:

html生成canvas canvas.toDataURL 生成base64图片

底部4个小图,由于跨域,2个无法生成,设置允许跨域的图是可以生成的。

 

 

    html2canvas(document.getElementById(‘htmlDom‘), {
        useCORS:true,//设置该属性,图片请求头带Access-Control-Allow-Origin: * 的可以生成,图片请求如有带301跳转,则无法生成
        onrendered: function(canvas) {
            window.can = canvas;
            console.log(canvas);
            $("#tarPic").attr("src",canvas.toDataURL())
            document.body.appendChild(canvas);
            },
    // width: 300,
    // height: 300
    });

 示例代码:https://files.cnblogs.com/files/zhidong123/htmlToCanvas.rar

https://github.com/zhidong10/solutions/tree/master/htmlToCanvas

 

html2canvas-html图片合成-canvas生成图片

标签:https   canvas   app   boolean   with   function   rar   def   specified   

原文地址:https://www.cnblogs.com/zhidong123/p/11359582.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!