收藏
回答

wx.canvasToTempFilePath生成图片为透明

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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、大佬们有什么图片旋转、裁剪、涂鸦的插件或者模板么?


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


最后一次编辑于  03-12
回答关注问题邀请回答
收藏

4 个回答

  • 小程序技术专员-villainhr
    小程序技术专员-villainhr
    03-13

    有代码片段么?

    03-13
    赞同
    回复 3
  • 桌子凳子丫
    桌子凳子丫
    04-11

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

    04-11
    赞同
    回复 2
    • yxChan
      yxChan
      04-28

      我也遇到这个问题,在

      wx.createCanvasContext

      之后设置了

      ctx.setFillStyle('#FFFFFF')

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

      求教...

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

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

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

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

    03-15
    赞同
    回复
  • 谢舜海
    谢舜海
    03-13

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

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

    加我vx,我给你个demo

    03-13
    赞同
    回复