微信小程序生成海报保存图片到相册小测试

test.wxml <canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id="myCanvas" class='canvas' hidden='{{hideme}}'></canvas> <image wx:if="{{tempPath!=''}}" class="viewimg" src="{…

小程序生成海报图片(或者原有的)并下载，&&相册授权&&按钮拉起二次授权

这是自己做小程序生成推广海报,并保存到本地相册的方法,向后台发起请求,返回一个海报图片,下载保存到相册, 如果只是单纯的下载图片代码43行-63行就足够了如果想直接保存到相册,则不要做downFile的处理,直接调用saveImageToPhotoAlbum,线上版本无法保存临时路径的图片具体看代码: //选中轮播图中的一个作为海报背景图.可自行实验,只是自己的总结 bindchange: function(a) { for (var t = this, o = a.detail.curre…

微信小程序生成海报分享：canvas绘制文字溢出如何换行

主要思路: 1.先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串 2.计算另起的行总数,比如总共3行,也就是说将原来的一个长字符串按宽度分成了3行,然后循环绘制出这3行字符串即可. 注意事项: 就是需要 a-- 那里,防止丢失字符的情况,假如不 a-- 的话,那么每换行时就会少一个字. ctx.setFontSize() ctx.fillStyle = "#000"…

小程序生成海报 canvas

前言微信小程序需要生成海报进行朋友圈分享,但是不同的手机会有问题, 然后首先是图片的问题图片在模拟器上没有报错,可是真机测试却什么也没画出来. canvas.drawImage 是不支持网络图片的,只支持本地图片. 所以,任何的网络图片都需要先缓存到本地,(当然上线的时候需要把网络图片的前缀加入白名单里面) 再通过 drawImage 调用存储的本地资源进行绘制, 缓存可以通过 wx.getImageInfo 和 wx.downloadFile 实现 wx.getImageInfo({ s…

小程序生成海报：通过 json 配置方式轻松制作一张海报图

背景由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈.而小程序 Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆 boilerplate code ,而且一不小心还会踩到 Canvas 的各种彩蛋(坑).我想此时你的心情肯定是这样的. 分析想到小程序中有如此大量的生成图片需求,而 Canvas 生成方法又是如此难用和坑爹.那我们就想到可不可…

小程序生成海报demo

效果图: <view class='poste_box' id='canvas-container' style="margin:0 auto;border-radius:16rpx;overflow:hidden;width:690rpx;height:846rpx"> <canvas canvas-id="myCanvas" style="width:690rpx;height:846rpx;"></canvas…

微信小程序例子-保存图片到手机相册

微信小程序例子-保存图片到手机相册 1.关键代码 1)WXML文件 2)JS文件 saveImgToPhotosAlbumTap: function(){ // 图片必须是 https 的 var IMG_URL = 'https://img13.360buyimg.com/n5/jfs/t15574/103/2503735642/354259/239cea20/5aaf4e5cN7ed2aacd.jpg'; wx.downloadFile({ url: IMG_URL, success: fu…