html2canvas生成海报的各种问题

最新推荐文章于 2024-08-20 11:35:04 发布

落花见流水

最新推荐文章于 2024-08-20 11:35:04 发布

阅读量2.8k

点赞数 3

分类专栏：插件文章标签：前端 vue js

本文链接：https://blog.csdn.net/qq_41913971/article/details/107353958

版权

本文详细介绍了在使用html2canvas生成海报时遇到的问题，包括高分屏下的模糊问题、图片模糊问题、canvas图片跨域问题、图片加载问题、iOS兼容性问题以及大图在iOS上不显示的问题，并提供了相应的解决方案和代码示例。

摘要由CSDN通过智能技术生成

（一）官网下载安装

下载：https://html2canvas.hertzen.com/
vue 安装：npm install html2canvas

（二）基础用法

以vue为例子

<div @click="handlePoster()" class="btn">生成海报</div>
<div id="weeklyPoster" ref="weeklyPoster" class="poster">
	<h1>poster content</h1>
	<img class="poster__logo" src="./assets/img/share-logo.png" alt="" crossOrigin="anonymous">
</div>
<div v-if="sharePoster.show" class="poster__save">
	<img class="poster__logo" :src="sharePoster.url" alt="">
</div>

<script>
import html2canvas from 'html2canvas';
data () {
   
	return {
   
		sharePoster: {
    // 海报内容
        	show: false,
            url: '',
            height: 0,
            width: 0
     	},
	}
}
methods: {
   
	handlePoster() {
   
            this.getWeeklyWxCode(()=>{
    // 向获取二维码接口发起请求
                if(!this.sharePoster.url)