html2canvas海报生成

最新推荐文章于 2025-02-27 16:01:40 发布

sani_x

最新推荐文章于 2025-02-27 16:01:40 发布

阅读量557

点赞数 2

分类专栏： javaScript vue 文章标签： vue html2canvas javascript canvas

本文链接：https://blog.youkuaiyun.com/qq_37403179/article/details/116042717

版权

javaScript 同时被 2 个专栏收录

20 篇文章

订阅专栏

vue

16 篇文章

订阅专栏

html2canvas海报生成基础使用

官网：http://html2canvas.hertzen.com/

使用环境：js，vue；

使用方法：

Html：

<div class="poster-container" ref="imageWrapper" style="display: inline-block;">我是海报</div>

<div onclick=”createPoster”>生成海报</div>

<el-button  @click="toImage">生成海报</el-button>

<image:src="imgUrl " />

<img id="posterImg" />

<a id="downloadHref" href="" download=””>下载</a>

//Href , download:来实现下载

Js：

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

.poster-container：已经写好的海报模块节点

function createPoster() {

$('html,body').scrollTop('0px');

var dom = $('.poster-container')

html2canvas(dom[0], {

useCORS: true, //跨域

allowTaint: false,

logging: false,

letterRendering: true,

taintTest: true, //在渲染前测试图片

dpi: window.devicePixelRatio, // window.devicePixelRatio是设备像素比

background: "#fff"

}).then(function(canvas) {

生成成功后获取图片地址输出显示

var imgUrl = canvas.toDataURL('image/png');

document.getElementById('posterImg').setAttribute('src', imgUrl);

document.getElementById('downloadHref').setAttribute('download', imgUrl);

document.getElementById('downloadHref').setAttribute('href', imgUrl);

})

}

Vue：

npm install --save html2canvas

yarn add html2canvas

getImage() {

        html2canvas(this.$refs.imageWrapper).then(canvas => {

          let dataURL = canvas.toDataURL("image/png");

          this.imgUrl = dataURL;

        });

      }