Апплет WeChat создает круг друзей для обмена фотографиями

Апплет WeChat

1. Реализация логики

  • Используйте wx.downloadFile(), чтобы получить путь к изображению (API wx.getImageInfo также может получить путь к изображению)
  • Используйте Canvas API для рисования текста и изображений
  • Используйте canvasToImage() для создания изображений, нарисованных с помощью холста.
  • Используйте wx.saveImageToPhotosAlbum для сохранения изображений на телефон.

Во-вторых, проблемы, возникшие в период

  • Canvas не может использовать rpx как единицу для адаптации, поэтому необходимо динамически получать ширину экрана мобильного телефона
  • При инкапсуляции всей функции генерации картинок в пользовательские компоненты два API wx.canvasToTempFilePath() и wx.createCanvasContext() должны передавать второй параметр this, иначе canvasId получить невозможно.
  • Качество изображения, сгенерированного wx.canvasToTempFilePath(), очень размыто.Вам нужно только установить значения двух параметров destWidth и destHeight так, чтобы они в 4 раза превышали ширину и высоту сгенерированного изображения.

3. Реализация кода

  1. wxml-код
<view class="canvas-box">
    <canvas 
        class="canvas" 
        canvas-id="shareImg"
        style="width: {{width}}px; height: {{height}}px;z-index: 100;">
    </canvas>
</view>
	
<view class="btn-box">
    <view bindtap="saveImageToLocal">
    	<view>保存海报</view>
    </view>
</view>
  1. Динамически получить ширину экрана и получить адаптивный блок (карта пользовательского интерфейса основана на ipone6)
    //获取屏幕宽度，获取自适应单位
    wx.getSystemInfo({
        success: function(res) {
            var num = (res.windowWidth/375).toFixed(2)
            this.setData({rpx: num})
        }
    })
    var rpx = _this.data.rpx
    //给宽高赋值
    this.setData({height: rpx*350})
    this.setData({width: rpx*250})
    this.setData({leftWidth: rpx*60})
    this.setData({topHeight: rpx*110})
  1. скачать изображение
    //获取二维码图片
    wx.downloadFile({
        url: url,
        success (res) {
            _this.setData({tempFilePath: res.tempFilePath})
        },
        fail (err) {
            console.log(err,'err')
        }
    })

4. Рисование холстом

    //在自定义组件中使用canvas，获取wx.createCanvasContext第二个参数必须传入this，不然获取不到
    const ctx = wx.createCanvasContext('shareImg',_this);
    //绘制一个白色矩形
    ctx.setFillStyle('#fff');
    ctx.fillRect(0, 0, _this.data.width, _this.data.height); 
    //绘制背景图
    ctx.drawImage(
        _this.data.wxBgImg,  //背景图
        0,  //目标图片在画布中x坐标
        0,  //目标图片在画布中y坐标
        _this.data.width,  //目标图片宽
        250*rpx  //目标图片高
    );
    
    // 绘制想要的文字
    ctx.setFontSize(16);
    ctx.setFillStyle('black');
    ctx.fillText('请扫码购买', 70*rpx, 300*rpx);
    ctx.stroke();
    // 画（前面都是准备，这才是画的那一步）
    ctx.draw(false,_this.canvasToImage());
  1. Создание изображений, нарисованных холстом
        //画二维码
        canvasToImage: function () {
            var _this = this;
            base.hideLoading()
            //这里必须加一个定时器，不然会生成图片失败
            setTimeout(() => {
                wx.canvasToTempFilePath({
                    canvasId: 'shareImg',
                    width: _this.data.width,
                    height: _this.data.height,
                    destWidth: _this.data.width*4,//输出的图片的宽度是画布区域的宽度的4倍
                    destHeight: _this.data.height*4,//输出的图片的高度是画布区域的高度的4倍
                    success: res => {
                        console.log(res,'画二维码====成功')
                        _this.setData({
                            resultImage: res.tempFilePath
                        });
            
                    },
                    fail: (err) => {
                         console.log(err,"err==========")
                        wx.showToast({
                            title: '图片生成失败',
                            icon: 'success',
                            duration: 2000
                        });
                }
            },this);//在自定义组件中使用canvas，获取wx.canvasToTempFilePath第二个参数必须传入this，不然获取不到
        }, 2000);
  1. сохранить изображение
        //保存图片
        saveImageToLocal() {
            wx.saveImageToPhotosAlbum({
                filePath: this.data.resultImage,
                    success: res => {
                        wx.showToast({
                            title: '保存成功',
                            icon: 'success',
                            duration: 2000
                        });
                    },
                    fail() {
                        wx.showToast({
                            title: '保存失败',
                            duration: 2000
                        });
                    }
            });
        },
Категории