小程序怎么生成圖片庫

今天小編給大家分享一下小程序怎么生成圖片庫的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

這邊說上幾個小程序 Canvas 的坑：

1， Canvas 繪圖是用的 px，而在小程序中我們一般使用 rpx 進行相對布局。

2，小程序的 drawCanvas 方法，在 IDE 中可以直接設置網絡圖片進行繪制，但在真機上設置網絡圖片無用。

3，canvasContext.clip 方法在 iOS 設備上 微信 6.6.6 版本及以下有 bug，會導致該 clip 下面使用的的 restore 方法失效。

畫家計劃

想到小程序中有如此大量的生成圖片需求，而 Canvas 生成方法又是如此難用和坑爹。那我們就想到可不可以做一款可以很方便生成圖片的庫，而且還能屏蔽掉直接使用 Canvas 的那些坑呢。所以我們發起了 “畫家計劃— 通過 json 數據形式，來進行動態渲染并繪制出圖片”。 

首先，我們定義了一套繪圖 JSON 規范，開發者可以根據需求構建生成圖片的 Palette（調色板），然后在程序運行過程中把調色板傳入給 Painter（畫家）。Painter 會調用 Pen（畫筆），根據 Palette 內容繪制出對應的圖片后返回。

How To Use

運行例子

因該項目為 submodule 管理方式。首次 clone 代碼時，需加上 --recursive 參數。

git clone https://github.com/Kujiale-Mobile/Painter.git --recursive

代碼下載后，用小程序 IDE 打開后即可使用。

使用 Painter

1. 引入代碼

   可以在主項目下執行以下命令，通過 submodule 的方式引入 painter 組件。建議是在 components 目錄下。

   git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter

2. 作為自定義組件引入，注意目錄為第一步引入的代碼所在目錄

   "usingComponents":{
     "painter":"/components/painter/painter"
   }

3. 組件接收 palette 字段作為畫圖數據的數據源, 圖案數據以json形式存在，推薦使用“皮膚模板”的方法進行傳遞，示例代碼如下：

4. 數據傳入后，則會自動進行繪圖。繪圖完成后，你可以通過綁定 imgOK 或 onImgErr 事件來獲得成功后的圖片 或失敗的原因。

   bind:imgOK="onImgOK"
   bind:imgErr="onImgErr"

Palette 規范

如你使用 wxss + wxml 規范進行繪制一樣，Painter 需要根據一定的規范來進行圖片繪制。當然 Painter 的繪制規范要比 wxml 簡單很多。

調色板屬性

一個調色板首先需要給予一些整體屬性

background: 可以是顏色值，也可以為網絡圖片的鏈接，默認為白色
width: 寬度
height: 高度
borderRadius: 邊框的圓角（該屬性也同樣適用于子 view）
views: 里面承載子 view

子 View 屬性

當我們把整體的調色板屬性構建起來后，里面就可以添加子 View 來進行繪制了。

布局屬性

以上 View ，除去自己擁有的特別屬性外，還有以下的通用布局屬性

尺寸即其他

1，目前 Painter 中支持兩種尺寸單位，px 和 rpx，代表的意思和小程序中一致，此處就不多說。

2，目前子 view 的 css 屬性支持 object 或 array。所以意味著，你可以把幾個子 view 共用的 css 屬性提取出來。做到讓 Palette 更加簡潔。

3，因為我們的 palette 是以 js 承載的 json，所以意味著你可以在每一個屬性中很方便的加上自己的邏輯。也可以把某些屬性單獨提取出來，讓多個 palette 共用，做到模塊化。

舉個栗子

{
  background: '#eee',
  width: '654rpx',
  height: '400rpx',
  borderRadius: '20rpx',
  views: [
  {
    type: 'image',
    url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
    css: {
      top: '48rpx',
      right: '48rpx',
      width: '192rpx',
      height: '192rpx',
    },
  }
  ],
}

以上就是“小程序怎么生成圖片庫”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。