小程序用Canvas給圖片加水印禀挫,拼接圖片旬陡,制作名片

Canvas是微信小程序中的一個(gè)原生組件,因此我們?cè)谑褂盟臅r(shí)候要特別注意微信小程序?qū)υM件的使用說明语婴。canvas這個(gè)組件其實(shí)就是一個(gè)畫布描孟,你可以在上面畫很多你用其他方式不好實(shí)現(xiàn)的內(nèi)容。下面我就將介紹一下怎么給圖片添加水印砰左,圖片的拼接画拾,怎么制作個(gè)性名片以及制作一個(gè)涂鴉的畫板。


水印.

水印的添加總的來說可以簡(jiǎn)單的分為三步來走菜职,第一步先完成一個(gè)畫布的創(chuàng)建青抛,第二步在畫板上畫出你想添加水印的圖片,第三步畫上你要添加的水印文字

創(chuàng)建畫板
<canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;" canvas-id="myCanvas"></canvas>

需要注意的是canvas-id的唯一性酬核,如果使用一個(gè)已經(jīng)出現(xiàn)過的 canvas-id蜜另,該 canvas 標(biāo)簽對(duì)應(yīng)的畫布將被隱藏并不再正常工作适室。這里我們將寬度和高度設(shè)置成動(dòng)態(tài)的,根據(jù)圖片的寬高來確定畫板寬高的比例举瑰。
然后我們需要在.js文件中進(jìn)行操作:

var ctx= wx.createCanvasContext('myCanvas')
var that = this
//選擇圖片捣辆,這里我們?cè)O(shè)置先選擇一張。
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success(res) {
    var tempFilePaths = res.tempFilePaths
    //獲取圖片基本信息
    wx.getImageInfo({
        src: tempFilePaths[0],
        success: function (res) {
          var width = res.width
          var height = res.height
          //獲取屏幕寬度
          let screenWidth = wx.getSystemInfoSync().windowWidth
          //處理一下圖片的寬高的比例
          if (width >= height) {
            if (width > screenWidth) {
              width = screenWidth
            }
            height = height / res.width * width
          } else {
            if (width > screenWidth) {
              width = screenWidth
            }
            if (height > 400) {
              height = 400
              width = res.width / res.height * height
            } else {
              height = height / res.width * width
            }
          }
          that.setData({
            imageWidth: width,
            imageHeight: height,
          })
          ctx.drawImage(res.path, 0, 0, width, height)
          ctx.rotate(obj.rotate * Math.PI / 180)
          for (let j = 1; j < 12; j++) {
              ctx.beginPath()
              ctx.setFontSize(14)
              ctx.setFillStyle('white')
              ctx.fillText('你要添加的文字', 0, 50 * j)
              for (let i = 1; i < 12; i++) {
                  ctx.beginPath()
                  ctx.setFontSize(14)
                  ctx.setFillStyle('white')
                  ctx.fillText("你要添加的文字", (15 + (14-1)*"你要添加的文字".length) * i, 50 * j)
              }
          }
          for (let j = 0; j < 12; j++) {
              ctx.beginPath()
              ctx.setFontSize(obj.fontSize)
              ctx.setFillStyle(obj.color)
              ctx.fillText("你要添加的文字", 0, -50 * j)
              for (let i = 1; i < 12; i++) {
                  ctx.beginPath()
                  ctx.setFontSize(14)
                  ctx.setFillStyle('white')
                  ctx.fillText("你要添加的文字", (15 + (14-1)* "你要添加的文字".length) * i, -50 * j)
              }
            }
            ctx.draw()
        }
    })
  }
})

圖片拼接.

圖片拼接思路就更加簡(jiǎn)單了此迅,說白了就是在一個(gè)畫布上咱們連續(xù)地畫幾張圖片再將它導(dǎo)出來就OK了汽畴。
創(chuàng)建畫布我就不說了,還是和上面的一樣耸序,width和height也是動(dòng)態(tài)的忍些。我們得根據(jù)獲取的圖片來動(dòng)態(tài)的計(jì)算出它的寬高,這里主要是計(jì)算它的高度坎怪,以保證我們弄出來的圖片是不會(huì)變形的罢坝。

// 這里的圖片數(shù)組可以從相冊(cè)中選取出來,也可以從上一個(gè)頁面?zhèn)鬟^來搅窿,但是要注意傳的時(shí)候得轉(zhuǎn)成JSON再傳
for(var i = 0; i < imagesArr.length; i++){
  var imageUrl = imagesArr[i]
  wx.getImageInfo({
    src: imageUrl,
    success: function (res) {
      var width = res.width
      var height = res.height
      // downNum是一個(gè)對(duì)象嘁酿,用來計(jì)數(shù)
      obj.downNum = obj.downNum + 1
      let sw = wx.getSystemInfoSync().windowWidth
      if(width > sw){
        width = sw
        height = height / res.width * width
      }
      // heightForCanvas也是一個(gè)對(duì)象,用來記錄總的高度   
      ctx.drawImage(res.path, (sw-width)/2.0, obj.heightForCanvas, width, height)
      obj.heightForCanvas = obj.heightForCanvas + height
      that.setData({
        height: obj.heightForCanvas
      })
      // 全部drawImage調(diào)用完畢后再調(diào)用draw()
      if (obj.downNum == imagesArr.length){
        ctx.draw()
      }
    }
  })
}

個(gè)性名片.

個(gè)性名片其實(shí)就是對(duì)畫布的一個(gè)綜合整體的運(yùn)用男应,同樣的技巧你也可以用來制作海報(bào)什么的闹司。還是說一下思路,首先我們也是創(chuàng)建畫布沐飘,然后給它添加一個(gè)貼切你主題的背景圖游桩,添加背景圖最需要注意的還是獲取圖片的尺寸防止其變形。背景添加了我們就需要給它添加展示的內(nèi)容了薪铜,添加文字添加圖片等等。這里說一下怎么給圖片切圓角恩溅,首先我們需要用canvas畫一個(gè)圓隔箍,然后再對(duì)其進(jìn)行裁剪,因?yàn)橐坏┘羟辛四硞€(gè)區(qū)域脚乡,則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)蜒滩。

 onLoad: function () {
    var that = this;
    var ctx = wx.createCanvasContext('myCanvas')
    // 先保存狀態(tài) 已便于畫完圓再用
    ctx.save(); 
    // 開始繪制
    ctx.beginPath();
    //先畫個(gè)圓
    ctx.arc(100, 100, 100, 0, Math.PI * 2, false);
    // 畫了圓 再剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域奶稠,則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)
    ctx.clip();
    ctx.drawImage('圖片的地址', 0, 0, '圖片寬度', '圖片高度'); 
    //恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 可以      繼續(xù)繪制
    ctx.restore(); 
    ctx.draw();
   }
})

最后還有很多的細(xì)節(jié)沒有講到大家如果還有疑點(diǎn)可以看看這個(gè)demo這是我寫的一個(gè)簡(jiǎn)單處理圖片的一個(gè)小程序
demo:

D9D7D683-E725-4A56-B0CA-1C49337D6D28.png

9DF48758-F367-4543-A62A-ACAD958F2FCD.png
720F6893-DEE8-4752-A9DE-CE49315F63B9.png

由于本人也是小程序小白俯艰,有什么地方說的不對(duì)的還請(qǐng)海涵。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末锌订,一起剝皮案震驚了整個(gè)濱河市竹握,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌辆飘,老刑警劉巖啦辐,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谓传,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡芹关,警方通過查閱死者的電腦和手機(jī)续挟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來侥衬,“玉大人诗祸,你說我怎么就攤上這事≈嶙埽” “怎么了直颅?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)肘习。 經(jīng)常有香客問我际乘,道長(zhǎng),這世上最難降的妖魔是什么漂佩? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任脖含,我火速辦了婚禮,結(jié)果婚禮上投蝉,老公的妹妹穿的比我還像新娘养葵。我一直安慰自己,他們只是感情好瘩缆,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布关拒。 她就那樣靜靜地躺著,像睡著了一般庸娱。 火紅的嫁衣襯著肌膚如雪着绊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天熟尉,我揣著相機(jī)與錄音归露,去河邊找鬼。 笑死斤儿,一個(gè)胖子當(dāng)著我的面吹牛剧包,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播往果,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼疆液,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了陕贮?” 一聲冷哼從身側(cè)響起堕油,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后馍迄,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體福也,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年攀圈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了暴凑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡赘来,死狀恐怖现喳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情犬辰,我是刑警寧澤嗦篱,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站幌缝,受9級(jí)特大地震影響灸促,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜涵卵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一浴栽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧轿偎,春花似錦典鸡、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至昆婿,卻和暖如春球碉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背仓蛆。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工睁冬, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人多律。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓痴突,卻偏偏與公主長(zhǎng)得像搂蜓,于是被迫代替她去往敵國(guó)和親狼荞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容