小程序js绘制海报

使用小程序画布js代码如下:


 
  1. onLoad: function (options) {

  2. var that = this;

  3. //1. 请求后端API生成小程序码

  4. //that.getQr();

  5.  
  6. //2. canvas绘制文字和图片

  7. const ctx = wx.createCanvasContext('myCanvas');

  8. var imgPath = '../../../image/intro.jpg';

  9. var bgImgPath = '../../../image/bgImgPath.jpg';

  10. var basicprofile ='../../../image/basicprofile.png';

  11. var xcxcode ="http://localhost/mining120/public/static/xcxcode/29-5.jpeg";

  12.  
  13. //填充背景

  14. ctx.setFillStyle('#cccccc');

  15. ctx.fillRect(0, 0, 240, 360);

  16. ctx.setFillStyle('#ffffff');

  17. ctx.fillRect(1, 1, 238, 358);

  18.  
  19. //绘制产品图

  20. ctx.drawImage(imgPath, 2, 2, 236, 200);

  21.  
  22. //绘制标题

  23. ctx.setFontSize(16);

  24. ctx.setFillStyle('#000000');

  25. ctx.fillText('圆通删掉贷方金额', 10, 225);

  26.  
  27. //绘制介绍产品

  28. ctx.setFontSize(12);

  29. ctx.setFillStyle('#6F6F6F');

  30. ctx.fillText('宠友们快来围观萌宠靓照我在萌爪幼稚园', 10, 250);

  31. ctx.fillText('我在萌爪幼稚园', 10, 270);

  32.  
  33. //绘制一条虚线

  34.  
  35. ctx.strokeStyle = 'blue';

  36. ctx.beginPath();

  37. ctx.setLineWidth(1);

  38. ctx.setLineDash([2, 4]);

  39. ctx.moveTo(10, 287);

  40. ctx.lineTo(230, 287);

  41. ctx.stroke();

  42.  
  43. //绘制矿业人图标

  44. ctx.drawImage(basicprofile, 10, 310, 30, 30);

  45.  
  46. //绘制介绍

  47. ctx.setFontSize(11);

  48. ctx.setFillStyle('#aaaaaa');

  49. ctx.fillText('长按扫码查看详情', 47, 318);

  50. ctx.fillText('分享自矿业人小程序', 47, 338);

  51. ctx.drawImage(xcxcode, 165, 295, 60, 60);

  52.  
  53. ctx.draw();

  54.  
  55. },

    wxml代码如下:


 
  1. <canvas style="margin:0 auto;margin-bottom:30px;width: 240px; height: 360px;box-shadow:1px 2px 2px #ccc;border-raidus:1px;" canvas-id="myCanvas"></canvas>

  2.  
  3. <view class='ft'>保存图片到手机相册,分享到朋友圈</view>

  4. <view style="text-align:center;padding-bottom:20px"><button bindtap='savetup' type="primary" size='mini'>保存到相册</button></view>

  5. </view>

保存图片代码:


 
  1. savetup:function(){

  2. var that = this;

  3. wx.canvasToTempFilePath({

  4. x: 0,

  5. y: 0,

  6. width: 240,

  7. height: 360,

  8. destWidth: 240,

  9. destHeight: 360,

  10. canvasId: 'myCanvas',

  11. success: function (res) {

  12. //调取小程序当中获取图片

  13. console.log(res.tempFilePath);

  14. wx.saveImageToPhotosAlbum({

  15. filePath: res.tempFilePath,

  16. success(res) {

  17. wx.showModal({

  18. title: '存图成功',

  19. content: '图片成功保存到相册了,去发圈噻~',

  20. showCancel: false,

  21. confirmText: '好哒',

  22. confirmColor: '#72B9C3',

  23. success: function (res) {

  24. if (res1.confirm) {

  25. console.log('用户点击确定');

  26. }

  27. }

  28. })

  29. }

  30. })

  31. },

  32. fail: function (res) {

  33. console.log(res)

  34. }

  35. })

  36. 转载地址:https://blog.csdn.net/qq_37375882/article/details/79419596

阅读更多

扫码向博主提问

超人阿狸

非学,无以致疑;非问,无以广识
去开通我的Chat快问
换一批

没有更多推荐了,返回首页