base64 去掉白边_html转canvas的实现方法，并将canvas的base64字符串上传到七牛云上...

最近做了一个生成海报功能，用户上传图片之后自动生成一张海报，由于海报样式很复杂，使用canvas绘制效率太低了，因此我想用html+css排版，然后将dom转成canvas，所以我找到了一个插件html2canvas，这个插件帮助我们将html转成canvas，不需要我们花时间去绘制了，这样生成的canvas可以转成base64并上传到七牛上面。

html2canvas安装

// Install NPM

npm install --save html2canvas

// Install Yarn

yarn add html2canvas

html2canvas使用

我们先将html写出来，并给要转换的dom父元素一个id=htmlContent

Hello world!

生成canvas

接着写一个html2canvas方法并添加配置,.then里面返回的就是生成的canvas，注意这里html2canvas使用的是Promise语法，更多配置项可以自行查找。

export default {

methods: {

html2canvas () {

let that = this

let opts = {

logging: true, // 启用日志记录以进行调试 (发现加上对去白边有帮助)

allowTaint: true, // 否允许跨源图像污染画布

backgroundColor: null, // 解决生成的图片有白边

useCORS: true // 如果截图的内容里有图片,解决文件跨域问题

}

html2canvas(document.querySelector('#htmlContent'), opts).then((canvas) => {

let url = canvas.toDataURL('image/png')

that.dataURL = url.split(';base64,')[1]

document.querySelector('#img').src = url

})

},

}

}

拿到canvas之后需要转换成base64上传到七牛上面，所以这里使用到了canvas的toDataURL方法去获取base64字符串，注意这里拿到的是';base64,'+字符串，所以需要分割split只要字符串

canvas.toDataURL(_type_, _encoderOptions_)

* `type`可选

图片格式，默认为 `image/png`

* `encoderOptions`可选

在指定图片格式为 `image/jpeg 或` `image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量`。如果超出取值范围