学习使用html2canvas生成渐变色背景图片

全部代码
html2canvas官网
生成图片的下载

全部代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>生成渐变色背景图片</title>
</head><style>#grad1 {width: 750px;padding: 32px;margin: 50px auto;background: linear-gradient(180deg, #D24A3C 0%, #B52A61 100%);}p {margin: 0px;}h2 {color: #ffffff;font-size: 40px;line-height: 80px;margin: 0px;}h3 {color: #ffffff;font-size: 35px;line-height: 70px;margin: 0px;}.bill_content {border: 1px solid;border-color: #E8E5DC;color: #ffffff;font-size: 30px;padding-left: 32px;padding-right: 32px;line-height: 60px;margin: 0px;}</style><script src="./js/html2canvas1.4.1.js"></script><script>function taskScreenshort() {html2canvas(document.getElementById("grad1"), {allowTaint: true}).then(canvas => {document.getElementById("item").setAttribute('src', canvas.toDataURL());})}
</script><body><div id="grad1"><div class="bill_content"><div style="height: 60px"></div><h2>www.qipa250.com</h2><p>奇葩天地网</p><div style="height: 30px"></div></div>
</div><input type="button" value="点我生成图片" onclick="taskScreenshort()"/><div style=" width: 750px;padding: 32px;margin: 50px auto;"><img id="item"/>
</div></body>
</html>

html2canvas官网

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

js文件下载下来保存就好了

生成图片的下载

点击截图按钮，会在按钮下方显示一张图片，右键另存为本地即可

学习使用html2canvas生成渐变色背景图片相关推荐

html5自动打印图片,html2canvas生成清晰的图片实现打印代码示例
本篇文章小编给大家分享一下html2canvas生成清晰的图片实现打印代码示例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 基本用法处理模糊问题细节问题-压缩base ...
C# 后台背景图片拼接图片与文字，文字图片生成与背景图片合成
标题C# 后台背景图片拼接图片与文字,文字图片生成与背景图片合成最近有个需求是将生成的邀请码与背景图片合成成为新的图片,查找了一些资料后又整理了一遍,查到了一个群主的帖子,虽然代码略微有点问题,地 ...
html设置渐变色背景图片,css中渐变色作为背景图来使用总结
qt中使用样式设置渐变色背景setStyleSheet()函数设置背景的前期是设置的窗口控件有父窗口ui.widget->setStyleSheet("background-color ...
渐变色---背景图片
总结: 渐变是用于创建一个表示两种或多种颜色线性/径向渐变的图片,是特别的image类型,只能用于image可以使用的地方 1.产生的原因: 使用图片会增加HTTP请求次数并增大了页面体积,导致延长页 ...
php 创建透明png,php生成透明背景图片实例
例子,php生成背景图片的代码. 复制代码代码示例: //透明背景图片 header('content-type:text/html;charset=gbk'); $safess = $_get[s ...
在VS2013环境下MFC学习：给对话框添加背景图片
步骤1 添加资源先右击工程名.rc(我的是PlaneDiag_Demo_MFC),再点击"添加资源" 步骤2 导入BMP图像进入"添加资源"界面后,点击资源 ...
MATLAB旋转后生成透明背景图片
1.读入图片 2.旋转图片 3.改变背景颜色 4.抠图 I = imread('0.png');%读取图片 for i=1:1:90I_rotating = imrotate(I,i*-1,'bili ...
Html2canvas——生成画布时图片显示空白
问题:用html2canvas生成画布图片,再转成pdf.生成图片时内容结构里的图片显示空白. 解决: 首先服务器设置图片允许跨域,如阿里云腾讯云配置跨域规则.其次图片设置crossOrigin=&q ...
Python生成透明背景图片
转载请注明出处:http://blog.csdn.net/jinixin/article/details/79115782 关于画图,Python不乏许多优秀的第三方库能支持操作图片,比如Matplo ...

学习使用html2canvas生成渐变色背景图片

学习使用html2canvas生成渐变色背景图片

全部代码

html2canvas官网

生成图片的下载

学习使用html2canvas生成渐变色背景图片相关推荐

最新文章

热门文章