2018-07-13 小程序网络图片的压缩问题

源码:http://115.28.152.1:3000/zhouyan/picture.git

图片压缩 1网络图片需要调用downloadFile 获取在本地的路径--》drawCanvas

  2本地图片 直接调用 drawCanvas

// 图片压缩

  pictap: function () {

    var that = this;

    var url ='https://mdapi.zjwist.com/mediainfo3/get/67587';

    wx.downloadFile({

      url: url,

      success: function (sres) {

        console.log(sres);

        url = sres.tempFilePath;

        that.drawCanvas(url);

      }, fail: function (fres) {

      }

    })

  },


  //利用Canvas 缩放图片

  drawCanvas: function (url) {

    var that = this;

    var ctx = wx.createCanvasContext('attendCanvasId');

    ctx.drawImage(url, 0, 0, 100, 100);

    ctx.draw(true, function () {

      that.prodImageOpt(url);    });//在回调进行保存不会出现空白

  },

  // 生成图片

  prodImageOpt: function (url) {

    console.log(url);

    var that = this;

    wx.canvasToTempFilePath({

      canvasId: 'attendCanvasId',

      success: function success(res) {

        var path = res.tempFilePath;

        console.log(path);

      that.setData({

          canvasImgUrl: path

        });

      wx.setStorageSync("path", path);

      }

    });

  }


.xml 文件代码

<canvas style=" width: 100px;

  height: 100px;

" canvas-id="attendCanvasId"/>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 6,133评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,960评论 1 45
  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    未央大佬阅读 6,813评论 0 12
  • 好久没有写代码了,今天自己开发了一个快递查询的微信小程序,把自己心得记录下来方便以后巩固。ps,小程序学的太晚了,...
    徐薇薇阅读 5,745评论 0 5
  • 我和老公认识了两年后,有一次他出差在外,突然给我发了条信息:我们在一起吧。一个小时之后我回复:好。 等他回来,我们...
    小小悟阅读 4,746评论 6 12