html2canvas 生成海报图

<html><head>
<title>生成海报图Demo</title>
</head><body>
<div id="poster" style="width: 400px; height: 300px;overflow: hidden;"><h1>海报图标题</h1><img src="https://www.w3school.com.cn/i/html_editor_notepad.gif" style="width:100%;"/>
</div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
<script>
$(function(){html2canvas(document.getElementById('poster')).then(function(canvas) {console.log(canvas.toDataURL());document.body.appendChild(canvas);});
});
</script></body>
</html>

执行效果：

图片跨域

html2canvas 依赖 HTMLCanvasElement，HTMLCanvasElement 存在跨域问题。当 HTMLCanvasElement 跨域时，图片将显示异常。

图片跨域解决办法

参考

html在线编辑器：https://www.w3school.com.cn/tiy/t.asp?f=eg_html_basic
html2canvas官网：https://github.com/niklasvh/html2canvas
html2canvas镜像：https://gitee.com/mirrors/html2canvas
Vue使用html2canvas将页面转化为图片
https://html2canvas.hertzen.com/

前端生成海报图：html2canvas 生成海报图/网页html转图片相关推荐

php html生成海报jpg,html2canvas 生成海报
应用场景移动端H5 分享海报安装html2canvas 插件 npm install --save html2canvas Vue中使用 // 在Vue页面中引入 import html2canv ...
H5 -- （功能）基于html2canvas实现长按网页保存为图片到本地
1.需求:长按页面中的一部分(里面有动态获取的用户昵称.头像及动态生成的二维码),弹出下载框,点击后将这部分保存为图片下载到手机里(如图) 2.分析:由于有动态获取数据,需等DOM元素生成之后,再将这 ...
基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案现有已知能够实现网页保存为图片的方案包括: **方案1:**将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输 ...
tp5.0 生成二维码 + 合并海报图
一. 生成二维码 1.下载phpqrcode类 phpqrcode类库官网下载地址:https://sourceforge.net/projects/phpqrcode/ 2.在tp下extend创建 ...
公众号自动生成海报 python_25个常用Matplotlib图的Python代码(由公众号转载)
所需安装的库 # !pip install brewer2mpl import numpy as np import pandas as pd import matplotlib as mpl imp ...
关于html2canvas生成海报模糊
首先要生成的部分尽量不要用css写背景图,用img做背景图其次是相关配置(虽然感觉作用不大) function createPoster(options) {let canvasWidth = op ...
h5 uniapp html2canvas生成海报,保存到本地功能实现；
html2canvas生成海报,保存到本地功能实现 1. 在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数 2. 组件的使用,伪代码不要直接复制uniapp语法 3. ...
微信小程序Canvas绘制图案（生成海报、朋友圈海报）
现在小程序生成海报是很常见的,例如生成打卡海报.生成文案.生成宣传图.生成推广图等,都是少不了一个技术,就是图片绘制,有些是通过前端Canvas绘制,有些是通过后端绘制,当然前端Canvas绘制是比较 ...
php生成推广二维码海报、合成图片demo
php生成推广二维码海报.合成图片 1.海报背景图.背景图一般存服务器,程序本地读取: 2.推广二维码.可以是二维码图片链接,也可以是字符串图像流.如果自己生成二维码,详见phpqrcode官网,地址 ...

前端生成海报图：html2canvas 生成海报图/网页html转图片

html2canvas 生成海报图

图片跨域

图片跨域解决办法

参考

前端生成海报图：html2canvas 生成海报图/网页html转图片相关推荐

最新文章

热门文章