轻松抠图-微信小程序之 保存canvas生成商品信息附

2021-05-02 12:29

--------

轻松抠图

------- 看了许多小程序的canvas,许多人在骂街,跟访问器的实际操作确实相差太多,API非常少。因此有些作用基本上没方法完成。可是基本的還是能够的。例如我要完成 转化成产品照片(包括商品的:题目,价钱,照片,小程序产品 需要用到的转化成二维码组件(可自主免费下载加上到小程序根文件目录utils里):demi520/wxapp-qrcode/blob/master/utils/qrcode.js

以上二维码组件默认设置是有时间白边的的,假如不需要空白地区,还可以改动draw方式(如需要改动请进:demi520/wxapp-qrcode/issues/11)

二、要求剖析:

实际效果图是750*1140尺寸的凡科抠图D实际效果图,以下:(点一下可查询大图)

我的思路:

在小程序中先建立三个canvas:

第一个是画二维码;

第二个是画与凡科抠图D同样尺寸的画布可用于储存得手机,样做的缘故是企业不需要变,照片,文本,等 部位和尺寸便可以彻底按凡科抠图D的尺寸了,不需要去测算;

第三个是最终用来显示信息实际效果的(实际上就是将第二个再再次画到这个新的画布上面尺寸就按放缩占比显示信息)。

多走了许多弯路:刚开始实际效果是完成了(画与画布同样尺寸canvas是需要去测算许多的例如文本尺寸与部位,照片的尺寸与部位,起止座标,都是要去测算的)。可是canvas尺寸太小,储存的情况下也就屏幕那末大,迫不得已得新想方法。

JD的小程序也储存的共享的照片非常大(2550px*4002px),不知道道是否用canvas画的還是后台管理转化成的。我如今储存的尺寸与凡科抠图D(750*1140)尺寸一样。不会太小也不会太大。

三、完成编码:

WXML编码:

 view >
  

js编码:

var QR = require( ../../utils/qrcode.js 
Page({
 data: {
 onLoad: function (options) {
 console.log( 网页页面载入恶性事件 
 var that = this;
 wx.getSystemInfo({
 success: function (res) { 
 that.setData({
 scrollWidth: res.windowWidth,
 scrollHeight: res.windowHeight,
 savewidth:750,//储存的照片宽
 saveheight: 1140,//储存的照片高
 }); 
 //console.log(crentwidth, crentheight);
 let shareurl= b?id=8559 
 QR.api.draw(shareurl, mycanvas , 300, 300);
 var ctx1 = wx.createCanvasContext( mycanvas 
 var leftwidth = 30;//两侧间距
 var imgwidth = 750 - leftwidth * 2;
 console.log(imgwidth);
 //转化成共享产品照片 防止二维码还没转化成,等个三秒钟再刚开始画
 setTimeout(function () { 
 wx.showLoading({
 title: 转化成中...... ,
 wx.canvasToTempFilePath({
 canvasId: mycanvas ,
 success: function (res) { 
 var ctx = wx.createCanvasContext( mycanvas2 
 ctx.drawImage(res.tempFilePath, 0, 330, 100, 100);
 ctx.beginPath();
 ctx.setFillStyle( white )
 ctx.rect(0, 0, that.data.savewidth, that.data.saveheight);
 ctx.setFillStyle( #fff 
 ctx.fill();
 console.log( 画题目 
 ctx.setFontSize(32);
 ctx.setFillStyle( #333 
 var chr = 轿车沙鱼腮仿真出风口侧风口模块盖装饰设计进风口假风口汽车贴纸改装用品 
 var temp = 
 //截取文只显示信息一行
 for (var a = 0; a chr.length; a++) {
 if (ctx.measureText(temp+ ...... ).width imgwidth) {
 temp += chr[a];
 else {
 break;
 var titlevtop = 60;//题目距顶部高宽比
 ctx.fillText(temp + ... , leftwidth, titlevtop);
 ctx.setFontSize(36);
 ctx.setFillStyle( #e51a1c 
 var pricevtop = 115;//价钱距顶部高宽比
 ctx.fillText( ¥1.00 , leftwidth, pricevtop);
 wx.getImageInfo({
 src: upload//s2015718.jpg ,
 success: (res) = { 
 var vtop = 156;//商品图间距顶部部位
 // 向画布上绘图图象
 ctx.drawImage(res.path, leftwidth, vtop, imgwidth, imgwidth);
 // 回到之前储存过的相对路径情况和特性
 ctx.restore();
 //画二维码
 wx.canvasToTempFilePath({
 canvasId: mycanvas ,
 success: function (res) {
 var vtop2 = 876;//二维码距顶部部位
 var ewmwidth = 232;//二维码的宽高
 ctx.drawImage(res.tempFilePath, leftwidth - 2, vtop2, ewmwidth, ewmwidth);
 //画LOGO
 wx.getImageInfo({
 src: images/logo.png ,
 success: (res) = {
 console.log( 给二维码加上logo: 
 var logowidth = 73;//logo宽高
 ctx.drawImage(res.path, leftwidth+ ewmwidth / 2 - logowidth / 2, vtop2 + ewmwidth/2 - logowidth / 2, logowidth, logowidth);
 var vtop3 = 970;//文本距顶部的高宽比
 ctx.setFontSize(36);
 ctx.setFillStyle( #333 
 ctx.fillText( 百易商小程序 , leftwidth + ewmwidth + logowidth, vtop3);
 var vtop4 = 1020;//文本距顶部的高宽比
 ctx.setFontSize(26);
 ctx.setFillStyle( #999 
 ctx.fillText( 长按或扫一扫鉴别小程序 , leftwidth + ewmwidth + logowidth, vtop4);
 //ctx.save();
 ctx.draw();
 //ctx.save();
 console.log( 大图转化成完 
 setTimeout(function(){
 var radius = that.data.savewidth / that.data.saveheight;//原尺寸比率
 var crentheight = parseInt((that.data.scrollWidth / radius).toFixed(0));//当今屏幕占比的高
 var x = that.data.scrollWidth / that.data.savewidth;//宽变小占比
 var y = crentheight / that.data.saveheight;//高变小占比
 var ncrentwidth = that.data.scrollWidth;//屏幕的宽
 that.setData({ x: x, y: y, ncrentwidth: ncrentwidth, ncrentheight: crentheight });
 wx.canvasToTempFilePath({
 canvasId: mycanvas2 ,
 success: function (res) {
 console.log(res);
 var ctx3 = wx.createCanvasContext( mycanvas3 
 ctx3.scale(x, y);
 ctx3.beginPath();
 ctx3.drawImage(res.tempFilePath, 0, 0, that.data.savewidth,that.data.saveheight);
 ctx3.draw();
 ctx3.save();
 console.log( 缩略图转化成取得成功,显示信息! )
 wx.showToast({
 title: 转化成进行! ,
 setTimeout(function () {
 wx.hideLoading();
 }, 1000)
 },100) 
 }); 
 }, fail:function(res){
 console.log(res);
 }, 3000)
 //点一下储存共享照片
 previewImg2: function (e) {
 wx.showActionSheet({
 itemList: [ 储存照片 ],
 success: function (res) {
 console.log(res.tapIndex)
 if (res.tapIndex == 0) {
 console.log( 储存照片 )
 wx.canvasToTempFilePath({
 canvasId: mycanvas2 ,
 success: function (res) {
 var tempFilePath = encodeURI(res.tempFilePath)
 console.log(res)
 wx.saveImageToPhotosAlbum({
 filePath: res.tempFilePath,
 success: ess(res) { 
 console.log( saved:: + res.savedFilePath);
 wx.showToast({
 title: 储存取得成功 ,
 fail: function (res) {
 console.log(res);
 wx.showToast({
 title: 储存不成功 ,
 icon: loading 
 setTimeout(function () {
 wx.hideLoading()
 }, 2000)
 fail: function (res) {
 console.log(res.errMsg)
非常表明:

1、wx.getImageInfo应用时照片务必是:downloadFile 合理合法网站域名才可以画出来,要不然会出错。

2、二维码转化成后扫描仪或鉴别需要登陆 小程序微信公众号,在《设定中》- 《开发设计设定》- 《扫一般连接二维码开启小程序》中启用二维码 并加上相应标准。

加上标准以下:

if (typeof (options.q) != undefined ) {
 var getq = decodeURIComponent(options.q).replace( b?id= , //更换标准后,获得的就是产品ID
 //从照片鉴别或扫一扫接受的主要参数
 that.setData({
 id: getq
}else{
 //默认设置接受主要参数
 that.setData({
 id: options.id
} 
四、总结:

针针对小程序有情况下很不想写博文,由于涉及到了许多物品,要写的话也没方法全部编码给你放上来,也只能写这么多了,因此有甚么不懂的地区能够联络我。

大伙儿有甚么难题或技术性上的念头能够在此与大伙儿共享,还可以添加前端开发喜好者QQ群()一起学习培训发展:【幸凡前端开发技术性沟通交流群】如需转载请注明出处:art_detail.aspx?id=859【小程序之 储存canvas转化成产品照片额外小程序二维码 共享到朋友圈】幸凡学习培训网 0 ---------

轻松抠图

------------


扫描二维码分享到微信

在线咨询
联系电话

020-66889888