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

cpupro 发布于2019-08-05 10:28 / 2170人阅读

摘要：所以决定完善这篇文章的内容以下我总结了一些注意事项，在代码中注释了，仅供参考。

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

Author:youzebin (2016.12.6)
插件下载地址：https://github.com/niklasvh/h...

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 ,如下：




    
    
    
    
    
    html2Canvas demo
    
    



    
        
              
                  文字，图片等内容

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

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

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

错误使用方式如  
 .container {
       width:50%;
       margin: 0 auto;
 }

需要改成如：

 .container {
       width:300px;
       margin: 0 auto;
 }

完整demo下载地址 github: https://github.com/omwteam/ht...
觉得好用就点个赞呗

服务器托管混合云 html图片放大插件 js插件图片放大 html图片放大碰到图片放大html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55825.html

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

摘要：所以决定完善这篇文章的内容以下我总结了一些注意事项，在代码中注释了，仅供参考。 html2canvas html截图插件图片放大清晰度解决方案，支持任意放大倍数，解决原插件图片偏移问题 Author:youzebin (2016.12.6)插件下载地址：https://github.com/niklasvh/h... 1.首先引入html2canvas.js html2canvas 0...

zsy888 2019-08-22 10:47 评论0 收藏0
一步一步搭建前端监控系统：如何将网页截图上报？

摘要：目前已经在运行的线上前端监控系统代码和讲解都放在这篇文章里监控系统介绍及代码用户对前端程序员来说，就是一个黑匣子。摘要：通过录屏或者截图，快速复现BUG场景。作者：一步一个脚印一个坑原文：搭建前端监控系统（备选）Js截图上报篇 Fundebug经授权转载，版权归原作者所有。 PS：本文关于Fundebug录屏功能的内容有些不准确的地方，比如录屏并非通过截图实现的，录屏插件...

Martin91 2019-08-26 10:21 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

zhaochunqi 2019-08-01 17:43 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

GHOST_349178 2019-08-21 16:51 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

Galence 2019-08-30 15:53 评论0 收藏0