小程序 canvas合成图片保存到相册

最新推荐文章于 2022-12-21 13:30:44 发布

tianmeng1999

最新推荐文章于 2022-12-21 13:30:44 发布

阅读量389

点赞数

分类专栏： uni-app 文章标签：小程序 uni-app

本文链接：https://blog.csdn.net/weixin_42448623/article/details/112468410

版权

文章目录

- 调用
- 效果
- eyeCopy.js

调用

const draw = await eyeCopyFun({
   
	cvs:this.cvs,
	bg:'#FFFFFF',
	canvasId:'poster',
	title:{
   
		title:'20元代金券',
		validity:'2021-04-05'
	},
	content:[
		{
   
			img:{
   
				width: 150,
				url:'https://weixin.hotapp.cn/src/home/img/qrcode_example.png',  // 只能
				type:'url' // base64/url(不能为本地图片)
			}, 
			code:'47387554894'
		},
		{
   
			img:{
   
				width: 150,
				base64:data.data.QRCode,
				type:'base64' 
			}, 
			code:'47387554894'
		},
		
		{
   
			img:{
   
				width: 150,
				base64:data.data.QRCode,
				type:'base64' 
			}, 
			code:'47387554894'
		}
	],
	footer:{
   
		title:'可用商家',
		name:'一屋子薯片韩式大头贴（上虞区店）'
	}
})
const path = await draw.getImg();
// 保存合成图片到相册
const save = await saveImgPhotosAlbum(path)		

// saveImgPhotosAlbum ===> https://blog.csdn.net/weixin_42448623/article/details/112365076

效果

在这里插入图片描述

eyeCopy.js

/**
 * eyeCopy.js
 * 通过合成图片
 */

import {
   removeSavedFile,downloadFile, writeFileBase64} from '@/common/saveImgAlbum.js'

class eyeCopy {
   
    constructor(data = {
   }) {
   
        this.data = data
		this.width = this.data.cvs.w
		this.height = this.data.cvs.h
        this.bg = this.data.bg
		this.ctx = uni.createCanvasContext(this.data.canvasId) 
        this.totalH = 0
		
		// this.draw()
		
		// 绘制图片 网络图片
		// const url = 'https://weixin.hotapp.cn/src/home/img/qrcode_example.png'
		// this.ctx.drawImage(url, (this.width - 150) / 2, 60, 150, 150) // yes
		// const base64 = content[0].img.base64
		// let fileName = new Date().valueOf();
		// const filePath = tt.env.USER_DATA_PATH + '/'+ fileName +'.png'
		// writeFileBase64(filePath,base64).then(async res=>{
   
		// 	console.log('写入成功')<