效果图(源码下载地址在文章底部)

html源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成海报</title>
<style type="text/css">
* {outline: 0;padding: 0;margin: 0;border: 0;
}
html, body {width: 100%;height: 100%
}body {margin: 0px;width:100%;height:100%;font-family: "华文细黑";background: url("pc/xingkong.jpg") no-repeat;background-size: 100% 100%;background-repeat: no-repeat;background-attachment: fixed;"
}.upm-setting_header_img {margin-top: 180px;margin-left: 60px;padding: 0;display: block;width: 10.33333rem;height: 10.33333rem;border-radius: 1.33333rem;margin-right: 0.32rem;
}
.upm-setting_header_img2 {margin-top: 0px;margin-left: 40px;padding: 0;display: block;width: 10.33333rem;height: 10.33333rem;border-radius: 1.33333rem;margin-right: 0.32rem;
}.uname {margin: 1px;margin-top: 60px;margin-left: 650px;font-size: 30px;display: block;color: white;
}.uname0 {margin: 1px;margin-top: 60px;margin-left: 450px;font-size: 40px;display: block;color: white;
}.uname2 {margin: 1px;margin-left: 28px;font-size: 50px;display: block;color: white;
}
.uname3 {margin: 1px;margin-left: 28px;font-size: 40px;display: block;color: white;
}.qianduanwz2 {margin: 1px;margin-left: 28px;font-size: 40px;display: block;
}
.qianduanwz {height: 200px;width: 100%;position: fixed;top: 0;
}.footer {height: 200px;width: 100%;position: fixed;bottom: 0;
}
.share{width:70%;height:120px;border-radius:100px;position: fixed;bottom: 0;margin-left:140px;margin-top: 0px;font-size: 60px;background-color:skyblue;
}
.imgDiv{width: 100%;height: 100%;
/*     display: table-cell; */text-align: center;vertical-align: middle;}
/*  color: #fff; */
</style>
</head>
<body><div class="haibao" id="haibao"><div class="wenzi" id="wenzi"><div class="qianduanwz" id="qianduanwz"><div id="left" style="width:70%;float:left;"><p class="uname3">扫码查看运势<p /><p class="uname3">扫码领取口罩<p /></div><div id="right" style="width:30%;float:left;"><img src="pc/erwei.jpg" class="upm-setting_header_img2"></div></div><div class="qianduanwz2" style="visibility:hidden"><p class="uname2">yy<p /></div><div class="qianduanwz2" style="visibility:hidden"><p class="uname2">yy<p /></div><div class="qianduanwz2" style="visibility:hidden"><p class="uname2">yy<p /></div><div class="qianduanwz2" style="visibility:hidden"><p class="uname2">yy<p /></div><div class="qianduanwz2" style="margin-left:300px"><p class="uname2">您的鼠年预言<p /></div><div class="qianduanwz2" style="visibility:hidden"><p class="uname2">yy<p /></div><div class="qianduanwz2" style="margin-left:300px"><p class="uname2" id="fateTitle">缺失的日记<p /></div><div class="qianduanwz2"><p class="uname2" id="fateContent0"><p /></div><div class="qianduanwz2"><p class="uname2" id="fateContent1"><p /></div><div class="qianduanwz2"><p class="uname2" id="fateContent2"><p /></div><div class="qianduanwz2"><p class="uname2" id="fateContent3"><p /></div><div class="qianduanwz2"><p class="uname2" id="fateContent4"><p /></div></div><div class="footer" id="footer"><input type="button"  id="share" class="share" onclick="share()" value="分享到朋友圈"/></div></div>
</body>
<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script>
var str="重要的日历缺失了一部分,被遗忘的月份将会被胜大地吊唁,去享受这幕间休息时间,出发时可往东去,一定遇到等待你的人";
var strs = str.split(',');
var i=0;
var j=0;
window.onload=function typing(){var pname = "fateContent"+j;//获取divvar mydiv=document.getElementById(pname);mydiv.innerHTML+=strs[j].charAt(i);i++;var id=setTimeout(typing,200);if(i==(strs[j].length)){j++;if(j==strs.length&&i==(strs[j-1].length)){clearTimeout(id);}i=0;}   }
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var scale = 4;
canvas.width = 70 * scale;
canvas.height = 70 * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {dpi: window.devicePixelRatio * 4,scale: scale, // 添加的scale 参数canvas: canvas, //自定义 canvas// logging: true, //日志开关，便于查看html2canvas的内部执行流程width: 70, //dom 原始宽度height: 70,useCORS: true // 【重要】开启跨域配置};
function share(){$("#qianduanwz").remove();$("#share").remove();$("#footer").append("<div id='left' style='width:70%;float:left;'><p class='uname3'>扫码查看运势<p /><p class='uname3'>扫码领取口罩<p /></div><div id='right' style='width:30%;float:left;'><img src='pc/fate.png' class='upm-setting_header_img2'></div>");
var copyDom = document.body; //要保存的dom
var width = copyDom.offsetWidth; //dom宽
var height = copyDom.offsetHeight; //dom高
var scale = 2; //放大倍数
new html2canvas(document.body, {dpi: window.devicePixelRatio * 2,scale: scale,width: width,heigth: height,useCORS: true // 【重要】开启跨域配置
}).then(function (canvas) { //1.0.0版本的有then方法//返回图片dataURL，参数：图片格式和清晰度(0-1)
//     var dataURL = canvas.toDataURL("image/png", 1.0);let oImg = new Image();
//     oImg.src = canvas.toDataURL();var dataURL = canvas.toDataURL("image/png", 1.0);$("#haibao").remove();$(document.body).css("background-image","url('pc/car1.jpg')");
//     document.body.append(oImg); $(document.body).append("<div class='imgDiv'><img src='"+dataURL+"'  alt='命运卡片' style='width:90%;height:90%'/></div>");
});
}</script>
</html>

需要引入的js文件：

<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>

手机在线演示：

源码下载：https://xson.cc/?page=1

html生成海报图片相关推荐

uniapp中自定义生成海报图片
uniapp中自定义生成海报图片效果示例图效果示例图 ##代码块 <template><view class="cardPoster-wrap">< ...
php 制作生成海报图片合成文字合成上传到OSS
要上传到OSS的话需要先安装OSS composer require aliyuncs/oss-sdk-php 不啰嗦,直接贴代码(自己公司项目已上线保证可用) (注:多张图片就再代码的$confi ...
前端生成海报图片（html2canvas偏移坑）
好久没写博客了,今天必须立刻马上现在写一个,记录一下悲惨的两天进坑旅程! 业务需求: 大佬要求前端生成一个海报图片,用户在微信内长按图片可以进行分享,并且海报内要有分享二维码. 嗯?前端生成海报?图片 ...
使用java Graphics2D生成海报图片
前言:最近做的一个项目需要给商户提供生成海报的功能.本来想着用前端canvas来实现,用户自己去托拉拽,生成想要的图片,可视化比较好.后来需求是要在后端生成固定格式的海报图片,只是商户信息发生改变.所 ...
小程序中如何实现编辑海报内容并生成海报图片（拖动那种）
开始找到了下面这个博客: 转自胜天一子半博客地址:https://blog.csdn.net/qq_37942845/article/details/80169907 在项目中遇到了一个需要编辑海 ...
uni-app如何生成海报图片
项目场景: 在uni-app中,通过点击邀请分享海报的方式,可以展示不同的海报,并通过扫描海报上的二维码来实现用户之间的关系绑定,从而实现分销功能: 每次生成的海报样式都可能不同,可以根据后台配置的宽 ...
vue中实现生成海报图片html2canvas详细教程
该插件详细配置文档地址建议谷歌浏览器打开,因为翻译的比较准确实现效果如图所示 1.安装插件 npm install --save html2canvas 2.将要生成图片的区域用大的元素包裹起来例如 ...
微信小程序合成海报_微信小程序 canvas生成海报图片模糊问题
一.制作正常显示海报,生成二倍海报隐藏代码如下 {{sendName}} 保存图片 /*css*/ .btn { width: 300rpx; height: 90rpx; line-height: ...
微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果上代码 <style&g ...

html生成海报图片

html生成海报图片

效果图(源码下载地址在文章底部)

html源码：

需要引入的js文件：

手机在线演示：

源码下载：https://xson.cc/?page=1

html生成海报图片相关推荐

最新文章

热门文章