1***@qq.com
1***@qq.com
  • 发布:2020-10-16 19:38
  • 更新:2021-04-01 15:28
  • 阅读:973

uniapp 开发微信公众号怎么把canvas生成图片进行保存

分类:uni-app
2020-10-16 19:38 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

;老哥 你的公众号 canvas遇到 图片的跨域问题了吗 怎么解决啊

q***@163.com

q***@163.com - 喜欢枫叶

请问楼主有解决办法嘛?

口区

口区 -

以前写的,不知道还能不能用,两种方法,仅限H5,当时用原生的方法生成的速度会快一些,现在不知道怎么样了。保存的话公众号上面的图片长按可以保存到相册

// 原生canvas方法生成图片  
                    let c = document.createElement("canvas");  
                    c.id = 'myCanvas';  
                    let ctx = c.getContext("2d");  
                    c.width = 614*this.width/750*2;  
                    c.height = 912*this.width/750*2;  
                    ctx.fillStyle = '#fff';  
                    ctx.rect(0, 0, c.width*2, c.height*2);  
                    ctx.fillRect(0, 0, c.width*2, c.height*2);  
                    let img = new Image();  
                    img.src = this.imgSrc;  
                    img.crossOrigin = "Anonymous";//图片允许跨域  
                    img.onload = ()=> {  
                        ctx.drawImage(img, 0, 0, 614*this.width/750*2, 740*this.width/750*2);  
                        ctx.fillStyle = "#000";  
                        ctx.font = `bold ${30*this.width/750*2}px PingFang SC Light`;  
                        ctx.fillText(`我是${this.custInfo.custName}`,30*this.width/750*2, 795*this.width/750*2);  
                        ctx.font = `bold ${24*this.width/750*2}px PingFang SC Light`;  
                        ctx.fillText("我是SVIP会员,给你申请一张",35*this.width/750*2, 840*this.width/750*2);  
                        ctx.font = `bold ${26*this.width/750*2}px PingFang SC Light`;  
                        ctx.fillText("「岛亲礼卡」",30*this.width/750*2, 875*this.width/750*2);  
                        ctx.font = `bold ${24*this.width/750*2}px PingFang SC Light`;  
                        ctx.fillText("试用,扫我的码领取",180*this.width/750*2, 875*this.width/750*2);  
                        let img2 = new Image();  
                        img2.src = this.qrSrc;//二维码  
                        img2.onload = ()=> {  
                            ctx.drawImage(img2, 460*this.width/750*2, 770*this.width/750*2, 110*this.width/750*2, 110*this.width/750*2);  
                            let img = c.toDataURL("image/jpeg", 0.5);  
                            this.imgList.push(img);//把生成的图片放入数组中  
                        };  
                    };  
                // uni方法  
                //  const ctx = uni.createCanvasContext('myCanvas', this);  
                //  ctx.beginPath();  
                //  ctx.drawImage( this.imgSrc, 0, 0, 614*this.width/750, 740*this.width/750 );  
                //  ctx.setFontSize(30*this.width/750);  
                //  ctx.setFillStyle('#000');  
                //  ctx.fillText(`我是${this.custInfo.custName}`, 30*this.width/750, 795*this.width/750)  
                //  ctx.setFontSize(24*this.width/750);  
                //  ctx.fillText('我是SVIP会员,给你申请一张', 30*this.width/750, 840*this.width/750)  
                //  ctx.setFontSize(26*this.width/750);  
                //  ctx.fillText('「岛亲礼卡」', 30*this.width/750, 875*this.width/750)  
                //  ctx.setFontSize(24*this.width/750);  
                //  ctx.fillText('试用,扫我的码领取', 180*this.width/750, 875*this.width/750)  
                //  ctx.drawImage( this.qrSrc, 460*this.width/750, 770*this.width/750, 110*this.width/750, 110*this.width/750 );  
                //  ctx.draw(true,()=>{  
                //      uni.canvasToTempFilePath({  
                //          canvasId: 'myCanvas',  
                //          fileType: 'jpg',  
                //          quality: 0.5,  
                //          success:res=>{  
                //              console.log(res);  
                //              this.imgList.push(res.tempFilePath);//把生成的图片放入数组中  
                //          }  
                //      })  
                //  });

该问题目前已经被锁定, 无法添加新回复