欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
小程序小部件使用画布自适应屏幕来绘制海报和保存图片
来源:南京网站制作 时间:2019-09-03 08:03:54

canvas的API 不支持小程序独有的rpx自适应大小单元作为其他程序。绘图内容中使用的单位仍为px。那么如何实现不同尺寸屏幕的适应?

 
我们常用的参考屏幕尺寸(iPhone 6)正在开发中,为375 * 667;
 
如果您想要适应其他尺寸的屏幕,您只需要根据iPhone 6的图纸尺寸按比例转换它。
 
获取系统屏幕大小
首先,通过使用wx的API获得屏幕宽度。getSystemInfo,然后通过划分iPhone 6的屏幕宽度获得相对单位。
 
// Called in onLoad
const that = this
wx.getSystemInfo({
  success: function (res) {
    console.log(res)
    that.setData({
      model: res.model,
      screen_width: res.windowWidth/375,
      screen_height: res.windowHeight
    })
  }
})
在渲染方法中,参数可以乘以相对单位以实现自适应。
这里,rpx是屏幕宽度的相对单位。测量实际宽度是实际测量的PX像素值* rpx。在那之后,无论实际的iPhone 5,6,7 ......都可以适应。
 
这里的HTML也需要动态设置宽和高
<canvas  canvas-id="PosterCanvas" style="width:{{screen_width*375+'px'}}; height:{{screen_height*1.21+'px'}}"></canvas>
drawPoster(){
    let ctx = wx.createCanvasContext('PosterCanvas'),that=this.data;
    Console. log ('phone model'+ that. model,'width' + that. screen_width*375,'high'+ that. screen_height)
    let rpx = that.screen_width
    // Here rpx is a relative unit of screen width, the actual width measurement is the actual measured PX pixel value * rpx; after that, regardless of the actual iPhone 5, 6, 7... can be adapted.
    ctx.setFillStyle('#1A1A1A')
    ctx.fillRect(0, 0, rpx * 375, that.screen_height * 1.21)
    ctx.fillStyle = "#E8CDAA";
    ctx.setFontSize(29*rpx)
    ctx.font = 'normal 400  Source Han Sans CN';
    Ctx. fillText ('Hi Friends', 133 * rpx, 66 * rpx)
    Ctx. fillText ('Get gifts before you buy a car', 84 * rpx, 119 * rpx)
    ctx.drawImage('../../img/sell_index5.png', 26*rpx, 185*rpx, 324*rpx, 314*rpx)
    ctx.drawImage('../../img/post_car2x.png', 66 * rpx, 222 * rpx, 243 * rpx, 145 * rpx)
    ctx.setFontSize(16*rpx)
    ctx.font = 'normal 400 Source Han Sans CN';
    Ctx. fillText ('Long Scan for More Preferences', 108 * rpx, 545 * rpx)
    ctx.drawImage('../../img/code_icon2x.png', 68 * rpx, 575 * rpx, 79 * rpx, 79 * rpx)
    ctx.drawImage('../../img/code2_icon2x.png', 229 * rpx, 575 * rpx, 79 * rpx, 79 * rpx)
    ctx.setStrokeStyle('#666666')
    ctx.setLineWidth(1*rpx)
    ctx.lineTo(187*rpx,602*rpx)
    ctx.lineTo(187*rpx, 630*rpx)
    ctx.stroke()
    ctx.fillStyle = "#fff"
    ctx.setFontSize(13 * rpx)
    Ctx. fillText ('xxx Technological Automobile Sales Company', 119 * rpx, 663 * rpx)
    ctx.fillStyle = "#666666"
    Ctx. fillText ('Chaoyang District Wangjing XXX Science and Technology Building', 109 * rpx, 689 * rpx)
    ctx.setFillStyle('#fff')
    ctx.draw()
  },

如果图片是在线地址ctx。drawImage(),它会犯错,无法绘制图片。
因为它访问get请求,这是一个异步操作TX。draw()在get返回之前绘制画布。解决方案是下载图片并在wx中绘制画布。下载文件 ()。
 
wx.downloadFile({
      url: that.data.url,
      success(res) {
        if (res.statusCode === 200) {
          // Activities
          ctx.drawImage(res.tempFilePath, 66 * rpx, 222 * rpx, 243 * rpx, 145 * rpx)
          // Two-dimensional code
          ctx.draw()
        }
      }
    })
保存到相册
在绘制图片后调用canvasToTempFilePath()在绘图回调函数中在内存中生成零时间链接非常简单,然后调用saveImageToPhotosAlbum(); 它涉及授权。如果您是第一次拒绝授权,当您第二次进入时,您将不会再次使用iPhone。提醒您授权,然后需要手动调用; 以下附加代码!
 
ctx.draw(true, ()=>{
        // console. log ('finished drawing')
        wx.canvasToTempFilePath()({
          x: 0,
          y: 0,
          width: rpx * 375,
          height: that.screen_height * 1.21,
          canvasId: 'PosterCanvas',
          success: function (res) {
            // console.log(res.tempFilePath);
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: (res) => {
                console.log(res)
              },
              fail: (err) => { }
            })
 
          }
        }) 
      })
拒绝授权后提醒授权码
mpvue.saveImageToPhotosAlbum({
        filePath: __path,
        success(res) {
          mpvue.showToast({
          Title:'Save Successfully',
          icon: 'success',
          duration: 800,
          mask:true
          });
         },
        fail(res) {
            if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
 
          mpvue.showModal({
                Title:'Tip',
                Content:'You need authorization to save the album'.
                showCancel: false,
                success:modalSuccess=>{
                  mpvue.openSetting({
                    success(settingdata) {
                      // console.log("settingdata", settingdata)
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        mpvue.showModal({
                          Title:'Tip',
                          Content:'Acquire permission successfully, click the picture again to save'.
                          showCancel: false,
                        })
                      } else {
                        mpvue.showModal({
                          Title:'Tip',
                          Content:'Failed to obtain permission, will not be able to save to the album oh'.
                          showCancel: false,
                        })
                      }
                    },
                    fail(failData) {
                      console.log("failData",failData)
                    },
                    complete(finishData) {
                      console.log("finishData", finishData)
                    }
                  })
                }
              })
          }
         }
      });
就这样。以上就是南京小程序开发安优网络带来的一些技术帮助,希望能够给到你一些帮助。

本文地址:http://www.njanyou.cn/web/2707.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 如何在不丢失内容质量的情况下编写更长的博客
下一篇: 如何在建立网站后获得流量
最新案例
永银
永银
珠海跨境电商
珠海跨境电商
五颗星商城
五颗星商城
上海万客生鲜超市
上海万客生鲜超市
一九在线商城
一九在线商城
你可能感兴趣
MySQL优化查询的面试题
PHP开发中应避免哪些不良编程习惯
为什么在Python判断变量类型时不推荐type方法
Android如何捕获本地信号异常,如何在Activey中调用将通过c底部的反射结束的方法,然后重新打开Android应用程序?
Github上git commit提交注释的规范
git如何从远程仓库删除错误提交?
快捷方式的Eclipse实现界面是什么?
关于在指定的IIFE中重新分配功能的问题?
最后更新
运行时如何更改itertools.product参数 合并熊猫数据框 如何使用swingworker从JTable删除行? 防止在Jquery中提交表单? 最新的链接构建技术是什么? 使用Jmeter进行性能测试 c程序打印给定输入数字或值的所有可能组合? 如何编写将应用程序信息存储在文本文件中的Python程序?
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例
城市网站导航:无锡网站建设 徐州企业网站定制 常州网站开发哪家好 苏州网站改版 南通网站开发 连云港网站建设 淮安网站建设公司 盐城网站定制 扬州网站改版公司 镇江网站开发 泰州高端网站制作 宿迁高端网站开发 江阴高端网站开发 宜兴建设网站 新沂建设网站 邳州建设网站 常熟建设网站 张家港网站改版 昆山公司网站开发 太仓高端网站制作 丹阳高端网站制作 句容专业建站 泰兴网站制作公司 合肥网站建设 芜湖网站制作 蚌埠网站建设 淮南网站制作哪家好 马鞍山网站建设 铜陵网站制作公司 安庆网站建设公司 黄山网站制作 滁州网站建设 阜阳网站设计 六安网站建设 亳州网站制作 宣城网站建设 巢湖网站建设哪家好 桐城网站制作 天长网站建设 明光网站建设 全椒网站建设 扬中网站建设公司 城市小程序导航: