mpvue 微信小程序canvas生成海报

效果

贴代码 html

<template><!--index.wxml--><view class="posterWrap"><canvas canvas-id="posterCanvas" class="myCanvas"></canvas><div class="fixed_container"><div class="fixed_inner"><div @click="handleShowImg"><img src="../../../static/images/haibao.png" alt /><span>发送给朋友</span></div><div @click="handleSave"><img src="../../../static/images/weixin.png" alt /><span>保存名片</span></div></div></div></view>
</template>

贴代码 js

<script>
export default {//index.js//获取应用实例data() {return {InfoSync: {}};},onLoad() {const InfoSync = wx.getSystemInfoSync();this.InfoSync = InfoSync;let bili = InfoSync.windowWidth / 375 * 1;const ctx = wx.createCanvasContext("posterCanvas");this.saveThe("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575527967726&di=172dcdd5a6f6b3a92a17d670793a6a50&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201303%2F10%2F20130310192450_S8HG8.thumb.700_0.jpeg",path => {ctx.drawImage(path, 0, 0, 310 * bili, 435 * bili); //ctx.drawImage（图片路径，距离画布左边，距离画布右边，图片宽，图片高）ctx.save(); // 保存当前绘画ctx.setTextAlign("center"); // 文字居中 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部）ctx.setFillStyle("#111"); // 文字颜色：fffctx.setFontSize(16); // 文字字号ctx.fillText("刘亦菲", 155 * bili, 164 * bili); //名字 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部）ctx.setFontSize(21); // 文字字号ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 222.5 * bili);ctx.setFillStyle("#895908"); // 文字颜色：895908ctx.setTextAlign("center"); // 文字居中ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 221.5 * bili);ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 221.5 * bili);ctx.setFontSize(14); // 文字字号ctx.setTextAlign("left"); // 文字居中ctx.setFillStyle("#111"); // 文字颜色：fffctx.fillText("生日：1990-01-01", 90 * bili, 256 * bili);ctx.fillText("电话：9090980", 90 * bili, 284 * bili);ctx.setFillStyle("#111"); // 文字颜色：111ctx.setTextAlign("left"); // 文字居中ctx.setFontSize(17); // 文字字号ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);ctx.setFillStyle("#828282"); // 文字颜色：828282ctx.setFontSize(14); // 文字字号ctx.fillText("写一次不加粗", 140 * bili, 376.5 * bili);ctx.setFillStyle("#B0B0B0"); // 文字颜色：B0B0B0ctx.setFontSize(11); // 文字字号ctx.fillText("小字体", 140 * bili, 398 * bili);ctx.save();//圆形头像框ctx.setStrokeStyle("rgba(0,0,0,0)");ctx.arc(155 * bili, 94 * bili, 45 * bili, 0, 2 * Math.PI);ctx.fill();//二维码this.saveThe("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575528227860&di=f644289e83c18cf73d44e76dec4c1246&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h395%2F20180109%2F0ae9-fyqnici9075376.jpg",path => {ctx.drawImage(path, 30.5 * bili, 320 * bili, 93 * bili, 93 * bili);ctx.save();//头像this.saveThe("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575528093128&di=a92d8586763a982f233df10d358b8136&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F16%2F20160216165321_eTASf.jpeg",path => {ctx.clip();ctx.drawImage(path,110 * bili,47.5 * bili,90 * bili,90 * bili);ctx.save();ctx.stroke();ctx.draw();});});});},methods: {// 小程序需要将图片下载下来，然后才能绘制到画布上saveThe(url, callback) {wx.getImageInfo({src: url, //服务器返回的图片地址success: res => {callback(res.path);},fail: function(res) {}});},// 点击保存时，将画布生成海报handleSave() {var that = this;wx.showLoading({title: "正在保存...",mask: true});wx.getSetting({success(res) {if (res.authSetting["scope.writePhotosAlbum"]) {that.saveImg();} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {wx.authorize({scope: "scope.writePhotosAlbum",success() {that.saveImg();},fail() {wx.hideLoading();wx.showToast({title: "您没有授权，无法保存到相册",icon: "none"});}});} else {wx.openSetting({success(res) {if (res.authSetting["scope.writePhotosAlbum"]) {that.saveImg();} else {wx.showToast({title: "您没有授权，无法保存到相册",icon: "none"});}}});}},fail: err => {wx.hideLoading();wx.showToast({title: "出现了错误，请稍后再试",icon: "none"});}});},saveImg() {// 按照设备比例去计算图片和画布尺寸let bili = this.InfoSync.windowWidth / 375 * 1;wx.canvasToTempFilePath({x: 0,y: 0,width: 310 * bili,height: 435 * bili,destWidth: 310 * bili * this.InfoSync.pixelRatio,destHeight: 435 * bili * this.InfoSync.pixelRatio,fileType: "png",quality: 1,canvasId: "posterCanvas",success: function(res) {wx.hideLoading();var tempFilePath = res.tempFilePath;// 需要权限wx.saveImageToPhotosAlbum({filePath: tempFilePath,success(res) {wx.showModal({content: "图片已保存到相册，赶紧晒一下吧~",showCancel: false,confirmText: "好的",confirmColor: "#333"});},fail: function(res) {wx.hideLoading();wx.showToast({title: "没有相册权限",icon: "none",duration: 2000});}});},fail: err => {wx.hideLoading();wx.showToast({title: "出现了错误，请稍后再试",icon: "none"});}});},// 发送给朋友，以图片的方式，先生成临时图片地址，然后调用微信api显示转发handleShowImg() {let bili = this.InfoSync.windowWidth / 375 * 1;wx.canvasToTempFilePath({x: 0,y: 0,width: 310 * bili,height: 435 * bili,destWidth: 310 * bili * this.InfoSync.pixelRatio,destHeight: 435 * bili * this.InfoSync.pixelRatio,fileType: "png",quality: 1,canvasId: "posterCanvas",success: function(res) {wx.hideLoading();wx.previewImage({urls: [res.tempFilePath],current: res.tempFilePath});},fail: err => {wx.hideLoading();wx.showToast({title: "出现了错误，请稍后再试",icon: "none"});}});}}
};
</script>

贴代码 css

<style scoped>
.posterWrap {min-height: 100%;padding-top: 40px;background-color: #f1f1f1;
}.myCanvas {width: 310px;height: 435px;margin: 0 auto;background: #fff;
}.fixed_container {position: fixed;bottom: 0;width: 100%;z-index: 1000;
}.fixed_inner {display: flex;justify-content: space-between;border-top: 1rpx solid #e5e5e5;padding: 20rpx 32rpx;background: #ffffff;align-items: center;
}
.fixed_inner div {display: flex;align-items: center;justify-content: center;color: #fff;border-radius: 5rpx;width: 330rpx;height: 76rpx;line-height: 76rpx;text-align: center;background: -webkit-linear-gradient(left, #27caac, #02ba8e);background: -o-linear-gradient(right, #27caac, #02ba8e);background: -moz-linear-gradient(right, #27caac, #02ba8e);background: linear-gradient(to right, #27caac, #02ba8e); /* 标准的语法 */
}
.fixed_inner div:last-child {background: -webkit-linear-gradient(left, #ff7179, #ff6459);background: -o-linear-gradient(right, #ff7179, #ff6459);background: -moz-linear-gradient(right, #ff7179, #ff6459);background: linear-gradient(to right, #ff7179, #ff6459);
}
.fixed_inner div img {width: 42rpx;height: 32rpx;margin-right: 11rpx;
}
</style>

全部都有注释，自己看
github 地址 demo

mpvue 微信小程序canvas生成海报相关推荐

微信小程序 —— canvas生成海报图与分享
整体思路获取手机屏幕大小去依据设计尺寸比例调整 -wx.getSystemInfo 网络图片.base64图片保存到到本地临时文件路径 canvas绘制图片 - wx.createCanvasCon ...
微信小程序合成海报_微信小程序 canvas生成海报图片模糊问题
一.制作正常显示海报,生成二倍海报隐藏代码如下 {{sendName}} 保存图片 /*css*/ .btn { width: 300rpx; height: 90rpx; line-height: ...
微信小程序分享生成海报
本文转自:微信小程序实现生成海报并且保存本地 - 张正-博客园 - 博客园 html: <view><image src="{{img}}" class='bgI ...
小程序canvas生成海报字体在背景图下方
小程序canvas生成海报字体在背景图下方图片是异步加载可以放在回调里设置字体也可以延迟放置如果还有更好的方法可以留言
小程序canvas生成海报
小程序canvas生成海报,画布转图片后可直接保存图片到系统相册: 海报素材使用图片宽750px: 注: 画布转图片时参数destWidth 值须 * dpr 否则IOS测试生成的图片是模糊的: . ...
uniapp微信小程序canvas生成简单海报并下载
今天项目接到个任务,就是手写canvas海报,并能下载图片.百度了很多海报组件,都不尽人意.萌生了自己手写海报的想法. 话不多说先贴文档 uni-app官网其实该文档和微信小程序类似最终效果,微信 ...
微信小程序实现生成海报并且保存本地
首先使用微信小程序提供的canvasapi将第二张图显示的海报画出来然后调用保存本地的接口 wx.saveImageToPhotosAlbum({})将图片保存在本地相册中首先我们需要在页面上创建 ...
小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
微信小程序 canvas 合成海报
1.先百度了解canvas相关文档: 2.了解微信小程序授权登录与授权登录下保存图片权限问题: 3.canvas标签属性不能是display:none: <canvas class=" ...

mpvue 微信小程序canvas生成海报

mpvue 微信小程序canvas生成海报

效果

mpvue 微信小程序canvas生成海报相关推荐

最新文章

热门文章