在vue项目中基于html2canvas实现网页保存为图片

html2canvas 可以实如今前端直接对页面进行截屏。其实现思路是html2canvas脚本将页面元素渲染为canvas，经过读取DOM并将不一样的样式应用到这些元素上实现。它不须要服务端的操做，只在前端便可完成。

1、在项目中的使用

1. 安装html2canvas

npm install --save html2canvas
复制代码

2. 在项目中使用

// 在须要使用的页面中先引入html2canvas
 import html2canvas from 'html2canvas'
复制代码

而后在页面中使用，以下：

在template模板中，设置要生成图片的内容，本文中要生成图片的是ref="capture"的div，而后将生成的canvas图片展现在ref="addImage"的div中

<template>
    <div class="content" ref="addImage">
        <div ref="capture" class="image-content">
            <p>html2canvas 可以实如今前端直接对页面进行截屏。</p>
            <p>其实现思路是html2canvas脚本将页面元素渲染为canvas，经过读取DOM并将不一样的样式应用到这些元素上实现。</p>
            <p>它不须要服务端的操做，只在前端便可完成。</p>
        </div>     
          <div @click="generatorImage" class="img-btn">生成图片</div>
    </div>
</template>
复制代码

而后在js文件中，generatorImage方法实现html到图片的转换,此时便可看到页面尾部已经添加了生成的图片内容,也能够对图片转为base64编码并下载到本地。

generatorImage () {
            html2canvas(this.$refs.capture).then(canvas => { 
                 this.$refs.addImage.append(canvas);  
                 let link = document.createElement('a');
                 link.href = canvas.toDataURL();
                 link.setAttribute('download', '图片canvas.png');
                 link.style.display = 'none';
                 document.body.appendChild(link);
                 link.click();
            })
        }
复制代码

2、html2canvas存在跨域资源没法加载

若是要生成图片的dom元素中，包含有跨域资源，好比img标签中的跨域图片,经过上述方法生成的图片中，img的内容是空白的，没法生成，这是由于canvas对于图片资源的同源限制。

解决方法： html2canvas能够设置配置项，来实现图片的加载

1.allowTaint设置成true，便可实现图片的展现

allowTaint为true是容许canvas被污染,一旦画布污染，就没法读取其数据，不能使用画布的toBolb(),toDataURL()或getImageData()方法，不然会出错.

若是咱们只是展现在页面上，不经过js转为文件下载到本地（下载须要调用canvas.toDataURL()方法），则可使用该方法。（页面中右键能够将这张图片无缺的保存到本地）

2.经过服务端设置CORS

解决跨域最经常使用的方法是跨域资源共享，咱们将图片服务器的response header设置

access-control-allow-origin: *，
复制代码

便可解决跨域图片的访问，同时，配合html2canvas的配置项useCORS: true，便可实现canvas图片的转化和下载。 因为咱们本身项目的文件服务器暂时没有设置CORS，因此此处例子采用淘宝的图片

<template>
    <div class="content" ref="addImage">
        <div ref="capture" class="image-content">
            <div class="parent">
             <img src='https://user-gold-cdn.xitu.io/2018/12/18/167c06ce8cf413d1?w=476&h=260&f=webp&s=11552'>
            </div>
            <div class="parent">
                <img src='https://user-gold-cdn.xitu.io/2018/12/18/167c06ce8d058da5?w=140&h=140&f=png&s=563'>
            </div>
            <div class="parent">
                <img src='https://user-gold-cdn.xitu.io/2018/12/18/167c06ce8da5216c?w=160&h=280&f=webp&s=10926'>
            </div>
        </div>     
          <div @click="generatorImage" class="img-btn">生成图片</div>
    </div>
</template>
复制代码

js文件中：

generatorImage () {
            html2canvas(this.$refs.capture,{useCORS: true}).then(canvas => { 
              this.$refs.addImage.append(canvas);
              // 经过a标签下载到本地
                 let link = document.createElement('a');
                 link.href = canvas.toDataURL();
                 link.setAttribute('download', '图片canvas.png');
                 link.style.display = 'none';
                 document.body.appendChild(link);
                 link.click();
            })
        }
复制代码