JS_html2Canvas基础使用

柔情只为你懂 2022-10-08 12:25 281阅读 0赞

先将html转成canvas，再生成图片  
官网地址：[http://html2canvas.hertzen.com/][http_html2canvas.hertzen.com]

# CDN引入使用 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html2canvas</title>
        <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    </head>
    <body>
        <div id="capture" style="padding: 10px; background: #f5da55">
            <h4 style="color: #000; ">Hello world!</h4>
        </div>
    </body>
    </html>
    <script> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) let imageURL = canvas.toDataURL("image/png"); //canvas转base64图片 console.log(imageURL); }); </script>

# vue-cli使用 #

安装html2Canvas依赖

*  npm安装  
    npm install --save html2canvas
 *  yarn安装  
    yarn add html2canvas

<template>
        <div>
            <div id="capture" style="padding: 10px; background: #f5da55">
                <h4 style="color: #000; ">Hello world!</h4>
            </div>
        </div>
    </template>
    <script> import html2canvas from 'html2canvas'; export default { data() { return { } }, created(){ this.gethtml2canvas() }, methods:{ gethtml2canvas(){ setTimeout(() => { html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) let imageURL = canvas.toDataURL("image/png"); //canvas转base64图片 console.log(imageURL); }); }, 1000); } }, components:{ } }; </script>
    <style scoped> </style>

# 实现效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

# 注意： #

1.  因为html是动态生成的，所以最好加上setTimeout延时转换成canvas，不然可能html的dom元素还没加载完。
2.  canvas.toDataURl()该方法是将canvas转成图片，如果html中有跨域请求的图片资源，那么canvas就会报错不支持跨域。所以只好将微信头像先上传到服务器的文件系统，请求图片时，带上允许跨域的响应头：Access-Control-Allow-Origin: \*
3.  要转换成图片的 html，其css样式要有几点注意：  
    亲测不能使用rem为单位定义文字大小、元素宽高等，不然无法显示该元素  
    不能添加background，假如设置背景颜色为红色或者一张背景图，莫名其妙会多出一个元素
4.  canvas.toDataURl()生成的图片是base64的格式data:image/jpeg;base64,/9j/4AAQ…，可以直接作为img标签的src。

但是由于是小程序内嵌H5，且图片资源过大，在某些机型（常见Ios）的微信小程序里面会限流。当生成图片，准备渲染的时候，微信要么会直接白屏，要么就是会弹框提醒：该小程序继续运行会影响微信的使用，强制退出该小程序。  
解决方法：  
可将base64转成二进制流，资源会减小1到1.5倍  
不过在某些安卓国产机型上，不支持长按保存该二进制流图片，所以可以设置仅Ios上转换为二进制图片。

function dataURLtoBlob (data_url) { 
      let arr = data_url.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      let blob = false
      while (n--) { 
        u8arr[n] = bstr.charCodeAt(n)
      }
      try { 
        blob = new Blob([u8arr], {  type: mime })
      } catch (e) { }
      return blob
    }

[http_html2canvas.hertzen.com]: http://html2canvas.hertzen.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221005/5ac9619f1a8c4fad9d4b5bc65f3ee3c2.png