小程序canvan画布，现两张图片合成一张，并保存到本地

微信小程序合成照片应用canvas把他们绘制到一张图上保存到本地相册然后点击分享

自定义一个组件

components/canvas.js里

// components/canvas/canvas.js
const app = getApp()
Component({/*** 组件的属性列表*/properties: {scene: {type: String,value: ''}},/*** 组件的初始数据 */data: {pixelRatio: 2,programCode: '',count: 0,spinning: false,loadingFlag: false, // 是否重新加载图片image:''},// 在组件完全初始化完毕、进入页面节点树后attached () {wx.nextTick(() => {this.getFile() // 获取小程序码和头像的临时文件})},/*** 组件的方法列表*/methods: {getFile () {// 请求接口 获取头像和小程序码的临时文件if (!this.data.loadingFlag) {this.initData()}},writeCanvas () {let that = thisconst ctx = wx.createCanvasContext('myCanvas', that)let canvasW = that.data.canvasWlet canvasH = that.data.canvasHlet bgImgPath = that.data.image //背景图片(在这里换图片)let programCode = that.data.erweima // 小程序码(在这里换图片)// 画大背景 单位是 px 不是 rpxctx.drawImage(bgImgPath, 0, 0, canvasW, canvasH)// 保存上下文ctx.save()// 恢复画布ctx.restore()// 画小程序码ctx.drawImage(programCode, that.computedPercent(85), that.computedPercent(165), that.computedPercent(117), that.computedPercent(117))ctx.draw(true, () => {that.setData({spinning: false})})},// 初始化数据initData () {let that = this// 获取设备宽度，计算canvas宽高wx.getSystemInfo({success: function(res) {let canvasW = Math.round(res.screenWidth *0.978)let canvasH = canvasW * 1.929that.setData({pixelRatio: res.pixelRatio, // 图片像素比canvasW,canvasH})that.writeCanvas() // 暂时在此执行}})},// 保存图片save () {let that = thiswx.canvasToTempFilePath({x: 0, // 起点横坐标y: 0, // 起点纵坐标width: that.data.canvasW, // canvas 当前的宽height: that.data.canvasH, // canvas 当前的高destWidth: that.data.canvasW * that.data.pixelRatio, // canvas 当前的宽 * 设备像素比destHeight: that.data.canvasH * that.data.pixelRatio, // canvas 当前的高 * 设备像素比canvasId: 'myCanvas',success: function (res) {console.log(res)//调取小程序当中获取图片wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.showToast({title: '图片保存成功！',icon: 'none'})},fail: function (res) {console.log(res)if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {that.doAuth()}}})},fail: function (res) {console.log(res)}}, this)},// 获取授权doAuth () {wx.showModal({title: '获取授权',content: '您是否同意重新授权保存图片',cancelText: '不同意',confirmText: '同意',confirmColor: '#21c0ae',success: function(res) {if (res.confirm) { // 点击确认wx.openSetting({success(settingdata) {if (settingdata.authSetting["scope.writePhotosAlbum"]) {console.log("获取权限成功，再次点击图片保存到相册")} else {console.log("获取权限失败")}},fail: function (res) {console.log(res)}})}}})},/*** 计算比例* @param {String} value 像素（二倍图量出来的要除2）*/computedPercent (value) {let currentWidth = this.data.canvasWlet oldWidth = 288return Math.floor(value * currentWidth / oldWidth)}},created: function () {let that = thislet image = wx.getStorageSync('images')var erweima =wx.getStorageSync('erweima')that.setData({image:image,erweima:erweima})},
})

components/canvas.wxml里

<!--components/canvas/canvas.wxml-->
<view class="generate-pic-box"><view class="mask" wx:if="{{spinning}}"><view class="mask-cont"><view class="loading"></view></view></view><block hidden="{{!spinning}}"><canvas class="canvas" style="{{'width: ' + (canvasW) + 'px; height: ' + (canvasH) + 'px;'}}" canvas-id="myCanvas"hidden="{{canvasHidden}}"></canvas><!-- <view class="save-text">保存图片，分享至朋友圈</view> --></block><!-- <view class="save-btn-box"> --><cover-view  class="btuns"><button open-type="share" class="button">分享</button></cover-view><cover-view class="save-btn" bindtap="save">保存图片</cover-view><!-- </view> -->
</view>

components/canvas.wxss里

.generate-pic-box {width: 100%;position: relative;
}
.generate-pic-box .mask {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1001;background-color: rgba(255, 255, 255, 0.5);
}
.generate-pic-box .mask .mask-cont {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
.generate-pic-box .mask .mask-cont .loading {width: 36rpx;height: 36rpx;margin-right: 20rpx;
}
.generate-pic-box .mask .mask-cont .loading-text {color: #fff;
}
.generate-pic-box .canvas {margin: 0 auto;
}
.generate-pic-box .generate-pic-btm {padding-top: 24rpx;padding-bottom: 30rpx;background-color: #fff;
}
.generate-pic-box .save-text {width: 100%;margin-bottom: 21rpx;font-size: 26rpx;line-height: 1.5;color: #999;text-align: center;
}.save-btn-box {width: 100%;display: flex;justify-content: center;align-items: center;
}
.save-btn {width: 84%;height: 64rpx;line-height: 64rpx;font-size: 28rpx;border-radius: 8rpx;text-align: center;color: #fff;margin-left: 60rpx;position: absolute;z-index: 1000;bottom: 80rpx;background: #076BFF ;
}
.btuns {width: 84%;color: #fff;font-size: 29rpx;position: absolute;bottom: 171rpx;border-radius: 8rpx;background: #076BFF ;margin-left: 60rpx;
}
.button {/* width: 84%; */color: #fff;font-size: 29rpx;border-radius: 8rpx;background: #076BFF ;
}

把组件引入json里

 "usingComponents": {"canvas": "../../components/canvas/canvas"},

直接在wxml里调用就行了

  <view class="component-display-box"><generate-pic></generate-pic></view>

合成照片必须是本地图片如果用网络图片要先下载到本地wx.downloadFile官网上也都有详细说明的。重要的一点下载完图片真机调试什么的照片都可以显示如果上传为测试版的话图片没有显示那就说明下载的路径的问题了可以在url 里加replace("http:","https:")，一定要加在图片地址后面

如果有更好的欢迎一起讨论

小程序canvan画布，现两张图片合成一张，并保存到本地相关推荐

PIL实现两张图片合成一张，和图片加文字
PIL实现两张图片合成一张,和图片加文字文章目录: 一.PIL实现两张图片合成一张 1.方法一: 2.方法二二.图片添加文字首先说明一下: (小姐姐是谁,是my sweetheart ,请勿使用 ...
什么相片可以两张弄成一张_ps怎么把两张图片合成一张
ps怎么把两张图片合成一张图片应用在我们的生活中十分广泛,Photoshop似乎已经离不开我们的生活.点点滴滴回忆刻印成一张张图片.不过有不少网友却不知道ps怎么把两张图片合成一张,下文将一一为大家 ...
什么相片可以两张弄成一张_怎么将两张图片合成一张？
有时候我们需要将两张图片放在一起相比较,但是两张图片相互切换对比起来比较困难,有没有什么办法将两张图片合成一张?方法是肯定有的,而且还是多种多样的,本文就给大家介绍一种对普通用户来说最简单方便快捷的方 ...
如何将两张图片合成一张pdf
在职场工作中,学会处理PDF文件是必不可少的技能.由于PDF文档的特殊性,许多新手在编辑PDF文件时往往不知道从何入手.比如一些非pdf格式的文件,像图片,在使用的时候被指定必须使用pdf格式的,这个 ...
android 两张电信_两张图片合成一张app-2张图片合成一张app下载1.2.9 官方安卓版-西西软件下载...
两张图片合成一张app是一款可以把手机上的2张图片合成一张并且看不出是合成的图片的工具,玩转2张图片叠加,可以让你和偶像合照不是梦很逼真的!带你打造与众不同的作品!可以制作双重曝光效果的APP,带你打 ...
使用canvas来实现两张图片合成一张
写在开头: 最近遇到一个需求,就是上传一张图片,原来的图片作为底图,两张图片组合在一起,形成一张新的图片.并能点击另存. 网上各种百度,谷歌.有很多方法.然后在我的需求里面都不是很适用.就结合前人的成 ...
微信小程序绘制海报，或者把多张图片合成一张
微信小程序绘制海报,或者把多张图片合成一张,例子 <image style='height:{{mabgh}}px;width:{{mabgw}}px;' class="savepng ...
实用常识 | 如何将多张图片合成一张gif图片（使用Win10自带工具or利用Photoshop实现）
今天遇到了一个需求,需要将多张图片合成一张gif图片,利用搜索引擎搜来搜去,尝试了很多在线的网页端工具,不过要么是有水印,要么是需付费,而且合成效果也不是很好,找来找去,Win10自带的视频合成工具也 ...
chatgpt赋能python：Python将两张图片拼接成一张图：让您的图片处理更高效！
Python将两张图片拼接成一张图:让您的图片处理更高效! 作为一个有着10年Python编程经验的工程师,我发现Python成为了许多项目的主要语言,其中涵盖了很多关于图像处理的应用程序.在本文中, ...

小程序canvan画布，现两张图片合成一张，并保存到本地

小程序canvan画布，现两张图片合成一张，并保存到本地相关推荐

最新文章

热门文章