公告列表
公告列表
收藏
回答

phone不支持canvas的scale为负数

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug wx.createCanvasContext 微信iOS客户端 iOS 6.66 看不到

最近在做一个ocr扫描，安卓，模拟机iphone，iphone真机，出现了不同的情况，首先是图片转换base64时候。iphone转换的图片竟然反转了，没错。就是反转了。。想通过设置canvas中scale为-1解决，然后模拟机没问题，真机设置为负数的时候，会变成正1.

wx.createSelectorQuery().select('#canvasId').boundingClientRect((res) => { let canvas = wx.createCanvasContext('canvasId') let canvasWidth = res.width; let canvasHeight = res.height; let canvasX = canvasWidth; // 1. 绘制图片至canvas canvas.translate(0, res.height); canvas.rotate(-Math.PI / 2); var phone = wx.getSystemInfoSync(); if(phone.system.indexOf('iOS')!==-1){ canvas.translate(canvasHeight, 0) canvas.scale(-1, 1); canvas.translate(0, 0) that.setData({ flagScale:-1 }) } wx.getImageInfo({ src: filePath, success(res) { if(canvasHeight>res.height / (res.width / canvasWidth)){ canvasHeight = res.width / (res.height / canvasWidth); }else{ canvasWidth = res.height/(res.width/canvasHeight); canvasX = (canvasX - canvasWidth)/2 } canvas.drawImage(filePath, 0, canvasX, -canvasHeight, canvasWidth) // 绘制完成后执行回调，API 1.7.0 canvas.draw(false, () => { // 2. 获取图像数据， API 1.9.0 that.setData({ imageOcr: 'none', }) wx.canvasGetImageData({ canvasId: "canvasId", x: 0, y: 0, width: Math.ceil(canvasWidth + canvasX), height:Math.ceil(canvasHeight), success(res) { // 3. png编码 let pngData = upng.encode([res.data.buffer], res.width, res.height) // 4. base64编码 console.log(pngData) let base64 = wx.arrayBufferToBase64(pngData)
回答关注问题邀请回答
收藏

10 个回答

  • 黄思程
    黄思程
    2018-05-03

    麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题

    2018-05-03
    有用
    回复
  • Cailven
    Cailven
    2020-04-28

    用 type=2d的版本是可以的。没有type的不行

    2020-04-28
    有用
    回复
  • 建鑫
    建鑫
    2018-11-05

    我也遇到设置canvas的scales（-1,1）无法左右翻转的问题了,在真机Android和开发工具上都是没问题的。在ios上没反应，请问有什么解决办法吗，还是说只能给后端决绝了

    2018-11-05
    有用
    回复
  • 上啊
    上啊
    2018-05-04

    @小辣椒，代码片段page页面实际上是有内容的，不过我在发一个吧，上个代码段确实有点问题wechatide://minicode/NjUW99mU6zZr

    2018-05-04
    有用
    回复
  • 9527
    9527
    2018-05-04

    https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000ea8f6638908c236466222a5b000&highline=canvas%7C%26%E9%A2%A0%E5%80%92&token=1520799202&lang=zh_CN @黄思成   @小辣椒    看这个问题

    2018-05-04
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-05-04

    我打开看了你的代码片段，没有你的内容哦，麻烦再仔细参考文档来创建代码片段

    2018-05-04
    有用
    回复
  • 上啊
    上啊
    2018-05-04

    我最后应该算不上解决办法了。。换了接口，直接上传图片了

    2018-05-04
    有用
    回复
  • 9527
    9527
    2018-05-03

    楼主使用的优图吗？  怎么解决的？  我的也是iOS 翻转

    2018-05-03
    有用
    回复
  • 上啊
    上啊
    2018-05-02

    我知道不支持base64格式，我引入了一个库，对获取的像素进行转码，问题的官检不在于这个，而是ios真机在调用canvasGetImageData这个api的时候，获取的Arraybuffer数组与安卓和模拟顺序是有差别的，还有ios真机也不支持canvas的scale为负数，安卓和模拟器都支持。。。这个差别我觉得官方应该关注下



    2018-05-02
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-05-02

    你好，canvas的图片不支持base64格式

    2018-05-02
    有用
    回复
请 登录 后发表内容
相关问题
相关文档