Wx- небольшая программа использует холст, чтобы сохранить скриншот

1, wxml страница

Используйте холст станций и добавить кнопку, чтобы связать события

< Button класс = 'БТН БТН-Theme' bindtap = 'setSaveImage' > сохранить изображение на локальном </ Button > 

<! - Используйте холст станции -> 
< Canvas скрыт = "{} {} canvasHidden" Canvas-ID = 'imageCanvas'class =' imageCanvas 
 стиль = 'ширина: {{}} canvasWidth PX; высота: {{}} canvasHeight PX' отключить прокрутки = 'истина' > 

</ Canvas >

2, JS файл связывания подход

/ * * 
   * Сохранение изображений локально 
   * / 
  setSaveImage: функция (E) {
     вар , что = в этом ; 
    wx.showLoading ({ 
      название: 'поколение Image ...' , 
    }) 
    вар RES = '' ;
     // Paint вызов метод 
    that.drawImages (); 
    
  }, 
  
  / * * 
   * метод краски 
   * / 
  drawImages: функция () { 
    Выпускаемые , что = это ;
     // console.log (that.data); 
    that.canvasHidden = ложь ;
     // вращать фиги. фотографии 
    //that.data.imgUrls banner_image = Var [0]; 
    
    // сетевые адреса не могут быть перехвачены с изображениями холста, так что использование микро-канал изображения получения информации интерфейса, чтобы установить сетевой адрес изображения 
    that.getImageInfo (that.data.imgUrls [0 ]) ; 
    
    // D изображение штрихкода 
    вар qrcode_image = that.data.imagePath;
     // название 
    вар название = that.data.goodsInfo.title, 

    контекст пусть = wx.createCanvasContext ( 'imageCanvas' , что); 
    context.setFillStyle ( '# FFF ' );
     // нарисовать прямоугольник ширину и высоту 
    context.fillRect (0, 0, 375, 356 ); 

    // нарисовать карусель фиг 
    context.drawImage (that.data.banner_image_url, 0, 0, 375180 ); 
    
    // нарисовать заголовок
    context.setFontSize (14 ); 
    context.setFillStyle ( "# 000" ) 
    context.fillText (название, 26, 228)   // рисунок описание 

    // рисование двумерного кодовую ширина высота XY   
    context.drawImage (qrcode_image, 228, 200, 130., 130. );
     // context.draw (); 
    context.draw ( ложь , that.drawCallBack); 

  }, 
  
    / * * 
   * рисунок функция обратного вызова холста 
   * / 
  drawCallBack: функция () {
     вар , что = в этот 
    wx.canvasToTempFilePath ( { 
      // X: 0, 
      // Y: 0, 
      //ширина: that.data.canvasWidth, 
      // высота: that.data.canvasHeight, 
      canvasId: 'imageCanvas' , 
      FileType: 'JPG' , 
      успех: функция (разрешение) {
         вар shareImg = res.tempFilePath;
        // console.log (shareImg) 
        wx.saveImageToPhotosAlbum ({ 
          Filepath: res.tempFilePath, 
          успех (Рез) { 
            wx.hideLoading (); 
            wx.showToast ({ 
              название: '保存成功' , 
              значок: 'Успех' , 
              продолжительность: 2000
            }); 
          } 
        }) 

      }, 
      Сбой: функция (Рез) { 
        cosole.log (резисторный, '<-fail разреш' ) 
      } 
    }) 
  }, 
    
    / * * 
   *设置画布宽高
   * / 
  setCanvasSize: функция () {
     вар , что = это ; 
    wx.getSystemInfo ({ 
      успех: функция (Рез) { 
        console.log (RES); 
        вар myCanvasWidth = res.windowWidth;
         вар myCanvasHeight = res.windowHeight; 
        that.setData ({
          canvasWidth: myCanvasWidth, 
          canvasHeight: myCanvasHeight 
        }); 
      }, 
    }) 
    
  }, 

  / * * 
   * получение информации изображения в соответствии с URL 
   * / 
  getImageInfo (ewmbgurl) { 
    IF ( TypeOf ewmbgurl === 'строка' ) {
       вар , что = это ; 
      WX .getImageInfo ({    //   апплет извлекает изображения API 
        SRC: ewmbgurl, 
        успех: функция (RES) { 
          that.setData ({ 
            banner_image_url: res.path 
          }) 
        }, 
        Сбой (ERR) {
          console.log (ERR)
        } 
      }) 
    } 
  },

3, метод холста описан API

/ * * 
  * X => X-координата 
  * у => у-координата 
  * ширина => прямоугольная ширина 
  * высота => Прямоугольный высокий 
* / 
    context.fillRect ( 0, 0, 375, 356 ); 

/ * * 
* = Х> Х координат 
* у => у-координаты 
* / 
context.fillText (название, 26, 228 ) 
    
/ * * 
  * img_url => адрес изображения 
  * х => х-координата 
  * у => у-координата 
  * ширина => прямоугольная ширина 
  * высота => прямоугольная высокой 
* / 
context.drawImage (qrcode_image, 228, 200, 130., 130. ); 
    
/ * * 
  если * булево => Далее последняя рисунок 
  * that.drawCallBack => обратный вызов
* / 
Context.draw ( ложь , that.drawCallBack);

4 Примечания

1 . Если адрес сетевой адрес изображения могут быть нормальными в скриншоте язя, но гаснет по телефону, мы рекомендуем использовать выше 
    полученное изображение информации метод
 2 . Ширина Screenshot холста и высоту и положение в соответствии с их потребностями модификация
 3 . Так как информация изображения способа получения является асинхронным уведомлением, последующая эксплуатация холста может быть помещена внутрь успеха операции

Автор: морковь вместо картофеля 
ссылке: https: //www.jianshu.com/p/657785af9c07 Источник: Джейн книги