收藏
回答

wx.canvasToTempFilePath生成图片为透明

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug wx.canvasToTempFilePath 客户端 7.0.3 2.6.2

1、图片旋转之后,进行裁剪,把图片画到canvas上之后生成图片

wx.canvasToTempFilePath,返回的图片打开是透明的。

若把图片格式改为jpg,在开发工具上为白色实底区块,在真机上为黑色区块。

代码:

```

        /**

* 把图片绘制到canvas上

* @param [Boolean] isOnload 是否是在刚加载阶段,

* @param [String]  imageSrc 背景图片的路径

* @param [Number]  width    图片在canvas上的宽度

* @param [Number]  height   图片在canvas上的高度

* @param [Number]  turnNum  图片旋转的次数(1:90度;2:180;0:原位置)

*/

drawImg: function (isOnload,imageSrc, w , h,turnNum) {

const ctx = wx.createCanvasContext('canvasIn', this);

let yuandian ,yuandian1, yuandian2, w1,h1;

let {imageInfo,testSrc} = this.data;

// 旋转原点配置

yuandian = [

[0,0],

[imageInfo.height,0],

[imageInfo.width,imageInfo.height],

[0,imageInfo.width]

];

if (turnNum % 2 == 0) {

w1 = imageInfo.width;

h1 = imageInfo.height;

} else {

w1 = imageInfo.height;

h1 = imageInfo.width;

}

this.setData({

turnNum: turnNum,

imageInfo: {

width: w1,

height: h1,

}

})

ctx.translate(yuandian[turnNum][0], yuandian[turnNum][1]);

// 旋转度数

ctx.rotate(turnNum * 90 * Math.PI / 180);

ctx.drawImage(imageSrc, 0, 0,w,h);

let _this = this;

let timer = setTimeout(function(){

ctx.draw(false, wx.canvasToTempFilePath({

x: w / 2,

y: h / 2,

width: w,

height: h,

destWidth: w,

destHeight: h,

canvasId: 'canvasIn',

success: function (res) {

var tempFilePath = res.tempFilePath;

console.log('图片路径---',tempFilePath)

// wx.uploadFile()将图片传到服务端

_this.setData({

testSrc: tempFilePath

})

},

fail: function (res) {

console.log(res);

}

}));

// clearTimeout(timer);

},1000);

// ctx.draw();

if (isOnload) this.context = ctx;

},

    

```

2、大佬们有什么图片旋转、裁剪、涂鸦的插件或者模板么?


各位大佬帮帮忙,谢谢了!


回答关注问题邀请回答
收藏

8 个回答

  • 小程序商城定制开发2600元全包
    小程序商城定制开发2600元全包
    05-10

    这个我就帮不了你了

    05-10
    有用 1
    回复
  • MOIL
    MOIL
    01-12

    有大佬看看我的问题吗,canvastotempfilepath 有几率生成空图片

    01-12
    有用
    回复
  • 技术-李工
    技术-李工
    2020-07-14

    有没有解决的,安卓手机一直是透明图片

    2020-07-14
    有用
    回复
  • 时迁
    时迁
    2019-12-19

    楼主解决了吗?我现在也遇到了这个问题,点击图片预览,一片漆黑就只能看见红边框

    2019-12-19
    有用
    回复
  • 桌子凳子丫
    桌子凳子丫
    2019-04-11

    导出jpg,再绘制图片的时候,先把画布填充上想要的背景色

    2019-04-11
    有用
    回复 2
    • yxChan
      yxChan
      2019-04-28

      我也遇到这个问题,在

      wx.createCanvasContext

      之后设置了

      ctx.setFillStyle('#FFFFFF')

      ,导出后还是黑色的背景色?

      求教...

      2019-04-28
      回复
    • 桌子凳子丫
      桌子凳子丫
      2019-07-03回复yxChan

      设置好背景后,再加个延迟后再导出

      2019-07-03
      回复
  • 想太多
    想太多
    2019-03-15

    遇到了相同的问题,我是绘制canvas转成图片然后保存到相册,pc上打开保存的图片背景是透明的,手机上打开是黑的

    2019-03-15
    有用
    回复 1
    • Dream丶
      Dream丶
      2020-05-29
      +1
      2020-05-29
      回复
  • 零度的田
    零度的田
    2019-03-13

    有代码片段么?

    2019-03-13
    有用
    回复 3
  • 谢舜海
    谢舜海
    2019-03-13

    哈哈,这个问题我也遇到过,

    一个每天人流量50+小程序TT,求大神关注

    加我vx,我给你个demo

    2019-03-13
    有用
    回复
登录 后发表内容