最近接到一个需求,微信中用户上传图片生成海报.这个需求比较常规,实现思路也比较简单,通过利用用户的input输入,对所上传的图片进行处理,最后通过第三方库html2canvas合成对应的图片即可.思路虽然简单,但是在实现的过程中会遇到各种各样的小问题,现在就将遇到的问题进行一次总结. 1.iphone以及部分android机型通过摄像头拍摄的照片被旋转了90度 原因:由于目前的手机拍照基本都在2M以上,而ios中只要超过2M图片就会自动旋转.拍照后直接取出来的UIimage(用UIImagePi

最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canvas项目适配全屏问题 问题描述:由于canvas的width和height只能设置px值,不支持rem单位,所以想在移动设备屏幕分辨率繁杂的情况下达到canvas铺满全屏的效果很困难. 解决方法:通过js获取到手机屏幕的clientWidth值,赋给canvas,以此来达到适配全屏的效果: var

马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公司代言,于是就有了技术部前端开发人员即本人为公司来开发这个主题代言活动页面. 开发要求: 1.用户可以从手机相册上传图片或拍照上传图片: 2.用户可以输入为公司代言的地点,如:我在:上海: 3.将用户输入的代言地点及活动二维码生成一张图片供用户保存到手机,以方便发送朋友圈或好友. 功能实现: 1.使用H5的i

一 . 效果 这是借用女神照生成的分享的海报,图片来自网络. 新增了poster组件和更新图片自适应 二 . 准备 准备两张图片连接,最好是自己开发账号验证的https图片链接. 三 . 实现思路 其实就是canvas实现方式,首先要就是定义一个canvas容器,把容器放在中间,图片也要动态计算大小居中,显示下面的文字和二维码也是要根据容器动态去改变,这就是大概的实现思路. 四 . 实现代码 利用微信小程序canvas生成海报分享图片,这个生成图片排版和适配不同尺寸的手机是一个难点,特别是图片适

虽然之前也做过类似的生成海报的项目,但是这个项目我又网上查找了一下,发现一个插件挺好用的  html2canvas.js http://html2canvas.hertzen.com/这里可以下载这个插件 用起来很方面 优先引入这个js <script type="text/javascript" src="js/html2canvas.min.js"></script>然后需要定义canvas容器,编写你需要生成的html <canv

小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2)tip: canvas 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级.(在手机上canvas在最上层无法隐藏)解决方法: canvas外加一框view 设置样式:style="width:0;height:0;overflow: hidden;opacity:

  HTML <template> <view class="content"> <view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()"> <view class="flex_column"> <view class="backgroundCo

绘制canvas内容 首先,需要写一个canvas标签,给canvas-id命名为shareBox <canvas canvas-id="shareBox"></canvas> 其次,我们就要根据需求(效果图如下)在canvas上面绘制内容了,我这里canvas指的是红框里面的内容 然后开始绘制内容啦,先定义一个绘制内容的方法:drawImage drawImage() { //绘制canvas图片 var that = this; console.log(th

有个挺好用的插件能很好地实现vue生成海报图,虽然有一定的限制,但基本需求还是能实现的 1.安装 npm i vue-canvas-poster --save 2.全局配置 // or Global Install import Vue from 'vue' import vueCanvasPoster from 'vue-canvas-poster' Vue.use(vueCanvasPoster) 或者按需引入 import vueCanvasPoster from 'vue-canvas-

fastposter海报生成器是一款快速开发海报的工具.只需上传一张背景图,在对应的位置放上组件(文字.图片.二维.头像)即可生成海报. 点击代码直接生成各种语言的调用代码,方便快速开发. 现已服务众多电商类项⽬,多个项⽬有52W+⽤户,通过多年⽣产环境的考验,稳定可靠.广泛应用于各类电商.分销系统.电商海报.电商主图等海报生成和制作场景. 特别感谢大家的鼓励.捐赠和支持,开源不易.希望能够一直坚持. 社区版 v2.10.0 发布 更改开源协议为 MIT 升级依赖 Pillow==9.3.0 升

今天简单地说下微信小程序的转发功能,为什么要简单的说下呢,因为主要讲的就是转发给好友或者群组,还有一种是分享到朋友圈,这种就比较复杂一点了,先稍微透漏一点,分享到朋友圈主要是两种方法,一种是后台直接生成海报图,一种是前端通过canvas生成海报.以后有机会再详细说,好了,言归正传继续说我们的转发好友. 首先介绍一个微信小程序的API:onShareAppMessage(options) 在 Page 中定义 onShareAppMessage 函数,设置该页面的转发信息. 只有定义了此事件处理函

1 效果 静态站点: blog.makergyt.com 备用链接: github.blog.makergyt.com 小程序: 语雀:<MakerGYT blog> 2 需求分析 2.1 做 专注于写markdown文档,或者说专注于内容. 一端书写,多端同步:小程序.静态站点 快速的静态托管.持续集成.页面资源加载 2.2 不做 不需要满足随时随地写文章,因为随时随地写的大部分是随笔.记录一类的帖子,若要呈现出来,必然要经过整理. 不需要自定义主题风格,博客就主体业务类型(除了评论.点赞.

距离WordPress版微信小程序上一个版本的发布过去了一个月了.在此间,我的工作有些变化,加上正在开发新版本,目前开源版的完善和升级稍稍有些滞后. 虽然这个版本是3.0版,期间有个过渡的2.8版,不过功能上目前没有大的改动了.3.0版本最大的更新在于加入了文章海报(即分享微信朋友圈的卡片)的功能.小程序一直无法分享到朋友圈,估计这个功能微信短期内不会放出来,但这个需求一直是有的,把小程序的二维码图片转到朋友圈,成为微信小程序转到微信朋友圈一种曲折实现的方法,虽然实现的路径有些长,但总比没有办法

# News #### 项目介绍微信小程序项目涉及功能 https://gitee.com/richard1015/News https://github.com/richard1015/News 高仿Readhub小程序 1.仿wx.showActionSheet组件, 因为wx.showActionSheet组件不可以调用分享,so自己手动实现 2.canvas文章内容自动换行,内边距功能实现 3.canvas动态生成图片功能 4.canvas 自动适配 5.文章左右滑动查看功能 6.can

qq小程序发布了,作为第一批体验者 .还是发现了和微信小程序很多不同的地方. 最新的小程序我这里都是用Taro开发的,体验较为不错.数据管理用的是redux.JS用的ES6加async等. 微信小程序已经上线稳定跑了很久.也解决了遇到的很多问题. 由于使用taro开发,可以直接将代码打包到QQ小程序里面.但在QQ小程序出现了很多问题. 1.flex布局问题. 在微信里一般我都这么去写 <Text className='p'> 粉丝<Text className='num'>{inv

项目里使用到用canvas生成海报,在toDataURL报了这个错误Tainted canvases may not be exported. 原因就在于使用了跨域的图片,所以说是被污染的画布.解决方案如下1]为image请求添加跨域 var image = new Image() image.setAttribute("crossOrigin",'Anonymous') image.src = src 但也许有可能服务器不让你跨域请求图片(也不知道为啥),那么用到方案22]通过把请求

摘要:初略算了算大概有20天没有写博客了,原本是打算1月1号元旦那天写一个年终总结的,博客园里大佬们都在总结过去,迎接将来,看得我热血沸腾,想想自己也工作快2年了,去年都没有去总结一下,今年势必要总结一番了,但是工作任务有点紧,就把这件事搁置起来了,只好推到来年收假去写一篇总结性的博客了,说起写博客,还是我的一个室友推荐我来写的,当时就觉得上班任务都做不完,哪有时间来写博客,后来发现自己有问题就去找别人的博客来解决,就想着自己也写博客,把自己不知道或者有经验的记录下来,一方面以后遇到同样的问题可

在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作--预览旋转合成> 这次有时间就实现一个功能稍微多点的海报. 一.概要 第一屏 第二屏 第三屏 总共有三屏,第一屏是选择图片,第二屏是合成图片,第三屏是显示结果图,可保存分享朋友圈. 页面内容不是很多,分析起来也比较简单. 1)每一屏的左右边距相同,上边距各不相同. 2)屏幕内的元素,大部分是居中,有些特

在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的地方,还是请各位指教了:-). 为了做出一张让人满意分享页,页面上的数据有些当然是需要动态展示的,具体展示效果如下图(部分内容不便展示,见谅): 下面说下需要用到的工具,就两个: 1.能动态生成二维码的插件qrcode  2.canvas画布 因为小编用的vue框架具体引入为: import qrc

基于mpvue实现的1080*1900小程序海报 html   <canvas class="canvas" :style="'width:'+windowWidth+'px;height:'+windowWidth/(1080/1900)+'px;'" canvas-id="firstCanvas"></canvas>    js const windowWidth = this.windowWidth const fi