微信小程序生成海报图片js代码(调试中...)

data: {
        // 屏幕可用宽高
        windowWidth: wx.getSystemInfoSync().windowWidth,
        windowHeight: wx.getSystemInfoSync().screenHeight,
        // 图片预览本地文件路径
        previewImageUrl: null
    },
    buildPosterSaveAlbum: function() {
        var imgWidth = 0; // 主图的宽度
        var imgHeight = 0; // 主图的高度
        let that = this;
        wx.showLoading({
            title: ‘海报生成中...‘,
        })
        // 获取图1信息
        // tip 貌似本地静态文件路径不能作为画布的src 参数,网络图片无影响。
        let promise1 = new Promise(function(resolve, reject) {
            wx.getImageInfo({
				src: ‘https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKvEFUUhmicMJVARZicC9ApzqvlFbSibsX1Nc4nibhWPJ2xGia4wThpS8AViaoFPCGd4GHk0xrp9MHBYCpA/132‘,
                success: function(res) {
					console.log(res)
                    imgWidth = res.width; // 设置主图的宽度
                    imgHeight = res.height; // 设置主图的高度
                    resolve(res);
                },
                fail: function(res) {
                    reject(res)
                }
            })
        });

		console.log(imgWidth);
		console.log(imgHeight)

        // // 获取图2信息,二维码图片,后期在服务器获得
        // let promise2 = new Promise(function(resolve, reject) {
        //     wx.getImageInfo({
		// 		src: ‘https://wx.qlogo.cn/mmhead/XBu6rjtdhtCcrAPKNLfiaaVwMSaaOGDx8kzewniaicmVicM/132‘,
        //         success: function(res) {
        //             resolve(res);
        //         },
        //         fail: function(res) {
        //             reject(res)
        //         }
        //     })
        // });

        //头像
        // let promise3 = new Promise(function(resolve, reject) {
        //     wx.getImageInfo({
        //         src: wx.getStorageSync("userInfo").userInfo.avatarUrl,
        //         success: function(res) {
        //             resolve(res);
        //         },
        //         fail: function(res) {
        //             reject(res)
        //         }
        //     })
        // });
        // 执行
        Promise.all(
            [promise1]
        ).then(res => {

            // 获取宽高
            let wW = that.data.windowWidth;

            var imgH = imgHeight / (imgWidth / wW) * 0.9;

            let wH = imgH + 200;
            that.setData({
                windowHeight: imgH + 200
            });
            // 定义画布上下文常量
            const ctx = wx.createCanvasContext(‘firstCanvas‘);

            //背景白色
            ctx.setFillStyle(‘white‘);
            //从x=0,y=0开始绘制白色
            ctx.fillRect(0, 0, wW, wH);

            //图1
			console.log(res);
            ctx.drawImage(res[0].path, wW * 0.05, wW * 0.05, wW * 0.9, imgH);
            //图2
            // ctx.drawImage(res[1].path, wW * 0.7, imgH + 40, wW * 0.25, wW * 0.25);

            //绘制谁推荐的文字
            // ctx.drawImage(res[2].path, wW * 0.05, imgH + 40, wW * 0.09, wW * 0.09);
            ctx.setFillStyle("#007382");
            ctx.setFontSize(20);
            // var nickName = wx.getStorageSync("userInfo").NickName;
			console.log(‘nickName‘)
			var nickName = "hahah";
            if (nickName.length >= 8 && nickName.length != 8) {
                nickName = nickName.substring(0, 8) + "..";
            }
            var tuijian = nickName + "为你推荐";
            ctx.fillText(tuijian, (wW * 0.05) + (wW * 0.09) + 10, imgH + 60 + ((wW * 0.09) / 8));

            ctx.setFillStyle(‘#000000‘);
            ctx.setFontSize(18);
            let str = ‘多头玫瑰1扎29.9元(随机颜色)范德萨范德萨范德萨范德萨发生的啊‘;
            if (str.length >= 10 && str.length != 10) {
                str = str.substring(0, 10) + "...";
            }
            ctx.fillText(str, (wW * 0.05) + (wW * 0.09) + 7, imgH + 60 + wW * 0.09);

            // 绘制文字
            //ctx.lineWidth = 0;
            //ctx.fillText("29.9", wW * 0.05, wW * 1.08)
            ctx.setFillStyle(‘#ff2200‘);
            ctx.setFontSize(23);
            ctx.fillText("¥29.99", (wW * 0.05) + (wW * 0.09) + 2, imgH + 60 + wW * 0.1 + 35)

            //ctx.save();
            ctx.draw();

            //destWidth值越大图片越清晰/大小成正比 解决画布模糊的问题
            //详细的参数见画布文档
            setTimeout(function() {
                wx.canvasToTempFilePath({
                    canvasId: ‘firstCanvas‘,
                    width: wW,
                    height: wH,
                    destWidth: wW * 3,
                    destHeight: wH * 3,
                    quality: 1,
                    fileType: "png",
                    success: function success(res) {
                        console.log(‘转图片结果‘);
                        // 关闭loading
                        wx.hideLoading();
                        // 到page对象的data中
                        that.setData({
                            previewImageUrl: res.tempFilePath
                        })
                        console.log("tempFilePath:+++" + res.tempFilePath);
                        wx.previewImage({
                            current: that.data.previewImageUrl,
                            urls: [that.data.previewImageUrl]
                        })
                    },
                    complete: function complete(e) {
                        console.log(e.errMsg);
                    }
                });
            }, 300);
        }).
        catch(err => {
            //error 错误处理
        })
    },

  

原文地址:https://www.cnblogs.com/lizhipengvvip/p/11198343.html

时间: 2024-10-27 19:00:34

微信小程序生成海报图片js代码(调试中...)的相关文章

微信小程序生成二维码插件基于base64-weapp-qrcode.js

weapp-qrcode 微信小程序生成二维码的插件,基于base64编码输出二维码,不依赖canvas 详情demo可以去github上预览-weapp-qrcode.js https://github.com/Pudon/weapp-qrcode =.=,加个star那就更好了 PS: 主要在node-yaqrcode项目基础上进行改造适应微信小程序 说明 只需要在 wxml 文件中增加个image标签动态引用base64编码即可 <image src="{{qrcodeURL}&qu

微信小程序裁剪图片成圆形

代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-v

微信小程序「官方示例代码」剖析【下】:运行机制

在上一篇<微信小程序「官方示例代码」浅析[上]>中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的--就是看看IDE的代码,了解它是怎么运行的. 还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码--真想建议他们看看Growth的第二部分,构建系统. 解压应用 首先你需要有下面的工具啦 Mac电脑 微信web开发者工具.app WebStorm / 其他编程器 或 IDE,最好可以支持重命名 首先,我们需要右键微信web开发者工具.app,然后显示包的内

微信小程序怎么上传代码

很多企业商家做了微信小程序,都想自己独立的去操作后台,但大多企业商家都没有相关的技术人员,就上传代码都成了问题,以下微信小程序观察网请添加链接描述就和大家分享一下微信小程序怎么上传代码,希望对您有帮助! 第一步:登录微信公众号后台进行小程序基本信息设置操作第二步:设置小程序基本信息,包括名称.头像.介绍以及服务范围.第三步:填写完成之后,再打开你的微信小程序开发工具,点击上传功能,点击上传提示窗口中输入版本号和说明即可.第四步:上传完成之后,返回到微信公众号后台,点击[开发管理].第五步:拉到底

微信小程序结合原生JS实现电商模板(二)

接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车,加入购物车和立即购买的逻辑实现:购物车结算功能完善(需添加收货地址才能结算,并完善新增.编辑.杉树地址相关操作):在分类模块实现了商品的分类展示以及不同分类对应的数据流显示,以及进入详情的逻辑操作.请不要吝啬你的发财手帮我star或转发一下,谢谢了.下面附上目前的效果:(切图自己抠的,请见谅.) 附上源码地

android代码调试中出现Permission Denial:

最近在做项目出现了下面的问题W/ActivityManager(  300): Permission Denial: starting Intent { cmp=com.android.settings/.MovieViewProxySet } from ProcessRecord{4057a828 1797:com.cooliris.media/10005} (pid=1797, uid=10005) requires nullE/AndroidRuntime( 1797): FATAL EX

js 代码运行中插入交互

js 代码运行中插入交互 背景 最近突发奇想,如果能在 js 运行时插入用户操作,是否就可以看到每一步的状态了呢? 以冒泡排序为例,最终实现的效果是这样的: 思路 我们知道,如果代码中 await 一个 promise,那么这行代码需要等到 promise 状态为 resolved 时才能向下继续执行. 例如: await new Promise(resolve=>{}),这样代码将会一直在这里等待下去,因为这个 Promise 的状态为pending. 有了这个思路,我们只需想办法将这个 pr

JS 代码调试经验总结(菜鸟必读)

前言:不知不觉写了很多,希望你能耐心看完这篇文章 任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度.不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug. 在长期解答 zTree 相关问题时,也的确发现很多的问题其实不算什么问题,仅仅是编程者不会调试造成的,通过自己日常工作观察,这里

微信小程序「官方示例代码」浅析【上】

从某个微信群里,拿到了这个IDE的下载地址,然后就有了这个: 根本登不上去,怎么办,怎么办呢? 看代码啊... 反正我又没有保密协议,解压缩一看NodeWebkit + React: 好啦 ,逛逛呗,这真是一个庞大的项目: 等等,这里有一个目录是 weapp/quick,这难道就是传说中的源码,打开一看,果然是.. 好了,毫无疑问,某讯又故计重演. html -> wxml css -> wxss app.js里面是登录代码: app.json定义了一些样式,和页面: wxss里面,明显就是c