前端截图

阅读数: 2021-04-06

html2canvas前端截图功能

注意该插件无法处理svg, 需要提前处理好svg，把它转成canvas就可以了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid #ccc;
            padding: 25px;
            margin: 25px;
        }

        svg, canvas, img {
            max-width: 100%;
        }
    </style>
</head>
<body>

<div class="box">
    <h1>标题１</h1>
    <svg xmlns="http://www.w3.org/2000/svg" class="chart-container" width="900" height="440">
        <g transform="translate(90, 10)">
            <g transform="translate(0, 302)">
                <path fill="none" stroke="#777" d="M 0 6 V 0 H 779 V 6"/>
            </g>
            <g>
                <line stroke="#2e9ccc" stroke-width="50" transform="translate(253)" x1="0" y1="302" x2="0" y2="14"/>
                <line stroke="#2e9ccc" stroke-width="100" transform="translate(253)" x1="150" y1="302" x2="150"
                      y2="119"/>
            </g>
        </g>
    </svg>
    <img alt="Overview of the Dot Plot (up)" class="img-responsive center-block"
         src="https://beta.bio.cyagen.net/media/alphako_cache_db/gc_dpt_ana/9b29a45b23ed82194b0a3d6f52c8c0e1.svg"/>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/canvg/3.0.7/umd.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.svg.js"></script>-->
<script>
        // 处理svg以支持html2canvas
    	// html2canvas不支持svg，因此需要将svg转canvas
        function handleSVG(dom) {
            var svgElem = dom.querySelectorAll('svg');
            svgElem.forEach(function (node) {
                //获取svg的html代码
                var svg = node.outerHTML.trim();
                //创建一个<canvas>，用于放置转换后的元素
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                //将svg元素转换为canvas元素
                var v = canvg.Canvg.fromString(ctx, svg);
                v.start();
                node.parentNode.replaceChild(canvas, node);
            });
        }

        // 处理跨域图片以支持html2canvas
    	// 不知道为何allowTaint和useCORS和imgObject.crossOrigin='Anonymous'和响应头CORS都配置了还是会出现提示不安全
        function hanldeImg(dom) {
            function getBase64Image(url, width, height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
                var image = new Image();
				// 图片也需要后台设置好CORS跨域响应头，才可以访问。光前端指定是无效的
                image.crossOrigin = 'Anonymous';
                image.src = url;

                return new Promise(function (resolve, reject) {
                    image.onload = function () {
                        var canvas = document.createElement("canvas");
                        canvas.width = width ? width : image.width;
                        canvas.height = height ? height : image.height;
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                        var dataURL = canvas.toDataURL();
                        resolve(dataURL);
                    };
                    image.onerror = function () {
                        reject('图片加载失败');
                    };
                });
            }

            var imgElem = dom.querySelectorAll('img');
            imgElem.forEach(function (node, index) {
                getBase64Image(node.src).then(function (response) {
                    // var img = document.createElement('img');
                    // img.src = response;
                    // node.parentNode.replaceChild(img, node);
                    node.src = response;
                }, function (error) {
                    console.log(error);
                });
            });
        }
    
    	// 固定页面
    	function fixDoc (flag) {
            document.body.scrollTop = 0;
            document.body.scrollLeft = 0;
            document.documentElement.style.overflow = document.body.style.overflow = flag ? 'hidden' : '';
        }

        // 开始截图
        function captureDOM(dom) {
            dom = dom || document.body;
            fixDoc(true);
            
            const hasAuto = dom.className.indexOf('overflow-auto');
            hasAuto && (dom.className = dom.className.replace('overflow-auto', ''))
            
            html2canvas(dom, {
                allowTaint: true,
                useCORS: true,
                // 不加总是会漏掉一些没有截取到（之前用的是clientWidth/offsetWidth和clientHeight/offsetHeight）
                // 发现对于一些横向滚动的元素，需要关闭overflow
                width: dom.scrollWidth + 10,
                height: dom.scrollHeight + 10,
                // 不加滚动条位置会影响截图效果（最好在截图前固定下页面不要滚动）
                // scrollY: 0,
                // scrollX: 0,
                // 配合这个可以让截图完美对齐原来的dom
                // x: dom.getBoundingClientRect().x + 6,
                // y: dom.getBoundingClientRect().y
                // foreignObjectRendering: true,  
                // async: false,
                // scale: 0.8,
                // logging: true,
            }).then(canvas => {
                var base64Image = canvas.toDataURL('image/png');
                var image = document.createElement('img');
                image.src = base64Image;
                // debugger;
                document.body.appendChild(image);
                fixDoc(false);
                hasAuto && (dom.className += 'overflow-auto')
            })
        }


        handleSVG(document);
        hanldeImg(document);
        setTimeout(captureDOM, 3000)
</script>
</body>
</html>

使用html2canvas在前端生成图片遇到问题看下这个文章：

使用html2canvas在前端生成图片

后台保存前端截取的图片

由于前端截取的图片只能在客户端预览和下载，如果需要得到这个图片的网络地址，需要上传图片到服务器保存。这里我使用django报错图片到静态资源目录来获得图片的网络地址。

import uuid
import time
import base64

from django.core.files.storage import default_storage
from django.core.files.base import ContentFile

from account.conf import settings
from tastypie.resources import Resource
from tastypie.utils import trailing_slash


class PublicResource(Resource):
    """ 公共信息 """

    class Meta:
        resource_name = 'public'

    def prepend_urls(self):
        return [
            url(r"^(?P<resource_name>%s)/save-img%s$" % (
                self._meta.resource_name, trailing_slash()),
                self.wrap_view('save_img'), name="api_save_img"),
        ]
    
    def save_img(self, request, **kwargs):
        """
            说明：　截图保存，返回保存后的图片url
            接口：　api/v1/public/save-img
            方法: 　post
            参数：
            :param datas: 图片的base64字符串列表（必填）
            :return [{name: '', url: '', link: ''}]: 保存后的图片的名称和链接等
            """

        self.method_check(request, allowed=['post'])
        # self.init_lang(request)
        data = self.deserialize(request, request.body, format=request.META.get('CONTENT_TYPE', 'application/json'))

        img_list = data.get('datas', [])
        result = []

        for img in img_list:
            format, imgstr = img.split(';base64,')
            ext = format.split('/')[-1]

            # 秒级时间戳 + uuid
            filename = '{}_{}.{}'.format(int(time.time()), uuid.uuid4().hex[:6], ext)
            filepath = os.path.join(settings.MEDIA_ROOT, filename)
            fileurl = os.path.join(settings.MEDIA_URL, filename)
            data = ContentFile(base64.b64decode(imgstr), name=filename)
            default_storage.save(filepath, data)
            result.append({
                "name": filename,
                "url": fileurl,
                # "link": settings.HOMPAGE + fileurl
            })

            return self.create_response(request, result)

如果存在第三方资源，无法自由设置CORS响应头的问题处理

这里使用django转发请求并且添加CORS请求头的方式来绕过图片的跨域限制。

库：django-proxy==1.2.1

# urls.py
from views import my_proxy_view

# views.py
from django.views.decorators.csrf import csrf_exempt
from proxy.views import proxy_view

@csrf_exempt
def my_proxy_view(request, path):
    extra_requests_args = {}
    remoteurl = path
    response = proxy_view(request, remoteurl, extra_requests_args)
    response.__setitem__('Access-Control-Allow-Origin', '*')
    return response

这里通过nginx也可以转发，但是nginx的proxy_pass需要主域，然后通过rewrite来修改路径。感觉灵活性不太好。代码如下：
1
2
3
4
5
# 这里提取host和request_uri就很不方便,所以都是写死的
location /proxy/ {
    rewrite ^/proxy/(.*)$ /$1 break;
    proxy_pass https://www.baidu.com;
}

问题

报错：The image argument is a canvas element with a width or height of 0.

html2canvas加上属性foreignObjectRendering: true, 即是否在浏览器支持的情况下使用ForeignObject渲染（会导致一些问题，如图片为空）。推荐把图片什么都先转成base64, svg转成canvas等等。
报错：
报错：
报错：

参考

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/de3faaff.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！