快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)張圖片合成為一張并下載

更新時(shí)間：2019年07月16日 10:22:02 作者：xhk碎語(yǔ)

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)張圖片合成為一張并下載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)張圖片合成為一張并下載的具體代碼，供大家參考，具體內(nèi)容如下

微信小程序海報(bào)

Page({

 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 imgUrl: "項(xiàng)目中圖片地址", //圖片鏈接
 img: '' // 合成后圖片路徑
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
 */
 onLoad: function (options) {
 let that = this;
 wx.downloadFile({
  url: '線上圖片地址',
  success(res) {
  // 繪制背景海報(bào)到canvas
  var postersize = that.setCanvasSize(750);//動(dòng)態(tài)設(shè)置畫布大小
  const ctx = wx.createCanvasContext('shareCanvas')
  ctx.drawImage(that.data.imgUrl, 0, 0, postersize.w, postersize.h)

  var re = wx.getSystemInfoSync();
  var scale = 750 / 180;
  var width = re.windowWidth / scale;
  var height = width
  var leftscale = 750 / 480; // 180為left
  var left = re.windowWidth / leftscale;
  var topscale = 750 / 880; // 180為top
  var top = re.windowWidth / topscale;
  ctx.drawImage(res.tempFilePath, left, top, width, height)
  ctx.draw()

  setTimeout(() => {
   // code_url = this.canvasToTempImage(); 
   //獲取臨時(shí)緩存合成照片路徑，存入data中
   wx.canvasToTempFilePath({
   canvasId: 'shareCanvas',
   success: function (res) {
    var tempFilePath = res.tempFilePath;
    that.setData({
    img: tempFilePath
    })
    console.log(tempFilePath)
   },
   fail: function (res) {
    console.log(res);
   }
   });
  }, 1000);

  }
 })


 
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
 */
 onReady: function () {
 
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
 */
 onShow: function () {
 
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
 */
 onHide: function () {
 
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
 */
 onUnload: function () {
 
 },

 /**
 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
 */
 onPullDownRefresh: function () {
 
 },

 /**
 * 頁(yè)面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {
 
 },

 /**
 * 用戶點(diǎn)擊右上角分享
 */
 onShareAppMessage: function () {
 
 },
 //適配不同屏幕大小的canvas
 setCanvasSize: function (width) {
 var size = {};
 try {
  var res = wx.getSystemInfoSync();
  var scale = 750 / width;//不同屏幕下canvas的適配比例；設(shè)計(jì)稿是750寬
  // var scale = 1
  var width = res.windowWidth / scale;
  var height = res.windowHeight / scale;;
  size.w = width;
  size.h = height;
 } catch (e) {
  // Do something when catch error
  console.log("獲取設(shè)備信息失敗" + e);
 }
 return size;
 },
 //點(diǎn)擊圖片進(jìn)行預(yù)覽，長(zhǎng)按保存分享圖片
 previewImg: function (e) {
 var img = this.data.img;
 let _this = this;
 //保存二維碼到相冊(cè)

 wx.saveImageToPhotosAlbum({
  filePath: img,
  success: function (res) {
  wx.showModal({
   content: '保存成功',
   confirmText: '確認(rèn)',
   showCancel: false,
   success: function (res) {

   }
  });
  },
  fail: function (res) {
  wx.showModal({
   content: '保存失敗',
   confirmText: '確認(rèn)',
   showCancel: false,
   success: function (res) {

   }
  });
  }
 })
 },
 
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: