h5移动端生成海报，图文结合

小程序 canvas生成海报

效果图：大背景和红圈圈为canvas生成；

1.css部分

  <style>body, html, div, img, p {margin: 0;padding: 0;}.poster {width: 15rem;height: 22.5rem;position: fixed;top: 2rem;left: 50%;margin-left: -7.5rem;}.save_poster {margin-top: 0.5rem;text-align: center;font-size: 0.85rem;color: #333333;}.poster_img {display: block;width: 15rem;height: 22.5rem;}.poster_container {width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: #E5E5E5;display: none;}</style>

2.js部分

<script>var code_model = '<div id="qrcode" style="position: fixed;opacity: 0;"></div>',//放置二维码的隐藏域canvas_model = '<canvas width="600" height="900" style="position: fixed;opacity:0;" id="myCanvas"></canvas>',//放置canvas的隐藏域poster_model = '<div class="poster_container"><div class="poster"><img src="" alt="" class="poster_img"><p class="save_poster">长按保存图片至手机相册</p><p style="margin-top: 0.5rem" class="aaaa"></p></div></div>';//poster_model为我们最终看到效果图$("body").append(code_model, canvas_model, poster_model);$.ajax({url: "/Tmp/hb50",data: {id: id},success: function (res) {$.hideLoading();if (res.e = "9999") {if (!res.data.is_buy) {location.href = res.data.jump_url;return false;}$(".poster").show();var data_base = res.data.poster_info;//生成二维码链接http://code.ciaoca.com/javascript/qrcode/new QRCode('qrcode', {text: data_base.url,width: 100,height: 100,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H});var c = document.getElementById("myCanvas"), cxt = c.getContext("2d");var img = new Image(), imgUrl, personName = data_base.name;img.crossOrigin = 'anonymous';//跨域问题img.src = data_base.image;img.onload = function () {//图片加载为异步加载，确定加载完毕后调用drawImage()cxt.drawImage(img, 0, 0);//9个参数(图像地址，X轴起点，Y轴起点，原图宽，原图高，左边距，上边距，需要宽，需要高)cxt.save();//剪裁问题。与restore()配合使用。剪裁后我们的canvas操作都集中在圆形区域内console.log("save");//所以操作前对画布进行保存，裁剪完毕后恢复restore()cxt.beginPath();cxt.arc(100, 580, 46, 0, 2 * Math.PI, true);//http://www.runoob.com/tags/canvas-arc.htmlcxt.strokeStyle = '#fff';cxt.stroke();cxt.clip();var img_head = new Image();img_head.crossOrigin = 'anonymous';//跨域问题var avatar_height = data_base.avatar_height, avatar_width = data_base.avatar_width;img_head.src = data_base.avatar;img_head.onload = function () {//可能遇到安卓端img.onload方法不调用问题，也不报错 。可能是：后台调取微信头像直接返回给前端，// 存在跨域问题（几遍后台请求头也处理了跨域）。可以拉回微信头像后经自己服务器处理下再返给前端cxt.drawImage(img_head, 0, 0, avatar_height, avatar_width, 54, 534, 92, 92);cxt.restore();var img_code = new Image();img_code.crossOrigin = 'anonymous';cxt.lineWidth = "4";cxt.strokeStyle = '#FFF';cxt.rect(460, 766, 80, 80);cxt.stroke();setTimeout(function () {//IOS端不加延迟会出问题，有人说是toDataURL问题img_code.src = $("#qrcode").find("img").attr("src");img_code.onload = function () {cxt.drawImage(img_code, 0, 0, 100, 100, 460, 766, 80, 80);cxt.font = '21px Arial';cxt.fillStyle = "#000";cxt.fillText(personName, 250, 558);imgUrl = c.toDataURL("image/png", 1);$(".poster_img").attr("src", imgUrl);$(".poster_container").show();};}, 0);};};} else {$.toast(res.m, "text");}}});
</script>

h5移动端生成海报，图文结合相关推荐

h5 uniapp html2canvas生成海报,保存到本地功能实现；
html2canvas生成海报,保存到本地功能实现 1. 在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数 2. 组件的使用,伪代码不要直接复制uniapp语法 3. ...
.net 后端生成海报
以前项目中生成海报都是前端生成(html2canvas)但由于前端生成有各种各样的限制如图片跨域,浏览器兼容等问题.老板就想网站中生成海报用回服务端生成海报的方式.直接通过链接就可以输出海报~~~~ ...
uniapp中，H5端使用html2canvas生成海报
项目中H5需要实现canvas生成海报,于是用了html2canvas,中间各种BUG,其中跨域问题一直没有处理好,后台服务器设置了支持跨域也不可以.最后解决方案是,把网络图片全部转成base64展示 ...
uni-app app端用highcharts绘制图表，并生成海报保存到手机相册
uni-app 打包app后 highcharts图表绘制不成功,不支持该方法,所以就考虑在app中嵌入webview h5页面,实现图表的绘制. 首先引用安装highcharts,封装成一个组件 n ...
uniapp app端使用html2canvas和renderjs实现生成海报图
uniapp app端使用html2canvas和renderjs实现生成海报图原本app端是无法使用html2canvas的因为,app端不支持浏览器js. 不过我在uniapp里面看到了rend ...
vue项目之H5 app 生成海报功能
一.需求本次[世纪盛典]活动,分为三期,每期都有海报相关的工作内容. 海报带有动态的个人信息.头像.证书编号及二维码等. 本次活动需要在微信h5.小程序.app里面正常启动. 二.经过网上查找使用 ...
uniapp之小程序端生成分享海报（带自定义参数的二维码）
内容需求: 小程序端生成一个海报,海报内容包括当前授权账号的头像,当前授权账号的邀请码,一张特定图片,分享页面的带对应参数的小程序二维码:生成的海报需要保存到本地功能方法: 1.前端用canvas绘 ...
使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框与 Carousel 走马灯组件实现
使用 iview 实现PC端生成推广海报与二维码并下载的功能,基于iview Modal 对话框与 Carousel 走马灯组件实现前言:最近在对公司网页进行改版的时候遇到一个问题,需要在PC端实 ...
H5二维码海报生成保存相关问题记录
H5二维码海报生成保存相关问题记录最近在开发H5页面中遇到二维码生成保存并下载到系统相册中的问题.问题大致分为:生成海报不全,未按照H5页面的显示进行海报保存,图片模糊等相关问题. 使用技术:qrc ...

h5移动端生成海报，图文结合

h5移动端生成海报，图文结合相关推荐

最新文章

热门文章