经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
小程序点击图片实现png转jpg
来源:jb51  时间:2019/10/22 12:48:45  对本文有异议

这篇文章主要介绍了小程序点击图片实现png转jpg,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

页面数据初始化添加参数:isSignCanvassShow<br><br>//通过canvas将图片转为jpg,使图片生成白色底便于查看预览

  1. //list为原图片数组列表,index表示当前图片下标,
  2. //imgList表示已经通过canvas转化的图片列表
  3. trasformImgType(list,index,imgList){
  4. this.setData({
  5. isSignCanvasShow:true
  6. });
  7. index=index?index:0;
  8. const that=this;
  9. let img=list[index].fileUrl;
  10. img=img.replace(/http/,'https');
  11. tip.loading('正在打开图片');
  12. //获取图片信息,
  13. wx.getImageInfo({
  14. src: img,
  15. success (res) {
  16. //画入canvas
  17. const context = wx.createCanvasContext('picCanvas');
  18. that.resetCanvas(context);
  19. context.drawImage(res.path,0, 0);
  20. context.draw(false,function(drawed){
  21. // console.log(drawed);
  22. wx.canvasToTempFilePath({
  23. x: 0,
  24. y: 0,
  25. width: 414,
  26. height: 300,
  27. destWidth: 414,
  28. destHeight:300,
  29. fileType: 'jpg',
  30. canvasId: 'picCanvas',
  31. success(imgRes) {
  32. tip.loaded();
  33. imgList.push(imgRes.tempFilePath);
  34. if(index<list.length-1){
  35. that.trasformImgType(list,index+1,imgList)
  36. return;
  37. }
  38. that.setData({
  39. isSignCanvasShow:false
  40. })
  41. wx.previewImage({
  42. current: '', //图标当前下标
  43. urls: imgList, // 需要预览的图片http链接列表
  44. fail:function(res){
  45. tip.alert('图片过期需刷新');
  46. },
  47. })
  48. },
  49. fail() {
  50. that.setData({
  51. isSignCanvasShow:false
  52. })
  53. tip.loaded();
  54. tip.alert('图片过期需刷新');
  55. }
  56. })
  57. } )
  58. }
  59. })
  60. },
  61. //重绘画板
  62. resetCanvas(context){
  63. context.rect(0, 0, this.data.screenWidth, this.data.screenHeight - 4); //画板大小
  64. context.setFillStyle('#fff');//背景填充
  65. context.fill() //设置填充
  66. context.draw() //开画
  67. },

wxml文件需要添加如下代码:

  1. <view hidden="{{!isSignCanvasShow}}">
  2.   <canvas canvas-id="picCanvas" id='picCanvas' class="pic-canvas" ></canvas>
  3. </view>

方法解释:

通过wx.previewImage预览图片时,会出现格式为png预览背景为黑色时,图片查看不清楚,能过下面的方法转化为白色底,方便查看

1、先用wx.getImageInfo 下载图片到本地,并且获取图片的信息;

2、将图片画入canvas,并生成临时图片地址;

3、将canvas生成的地址填写入imgList缓存起来;

4、当所有图片都转化完成之后,调用wx.previewImage查看图片

5、每次转化完一片图片的时候,就重新绘制一下canvas;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号