小程序drawImage剪切圖片

1躺苦、var imgsW = [];

? ? ? ?var imgsH = [];

????????Page({

? ? ? ? ? ? ? ? ..........

????????????})

2身腻、需要下載圖片的地方調(diào)用,獲取用戶寬高圾另,并賦值霸株,數(shù)組添加使用push

var _this = this;

wx.downloadFile({?

????url: 圖片地址,

? ? ? success: function (res) {

? ? ? ? if (res.statusCode === 200) {

//獲取圖片信息,主要獲取寬高

? ? ? ? ? wx.getImageInfo({

? ? ? ? ? ? src: res.tempFilePath,

? ? ? ? ? ? success: function (rest) {

? ? ? ? ? ? ? imgsW.push(rest.width);//賦值

? ? ? ? ? ? ? imgsH.push(rest.height);

? ? ? ? ? ? ? let url = _this.data.downloadImg;

? ? ? ? ? ? ? url.push(res.tempFilePath)

? ? ? ? ? ? ? _this.setData({

? ? ? ? ? ? ? ? downloadImg: url,

? ? ? ? ? ? ? })

? ? ? ? ? ? ????_this.drawView(); ? // 所需圖片的下載完成后集乔,才可開始draw界面

? ? ? ? ? ? ? ? return;

? ? ? ? ? ? ? }

? ? ? ? ? ? }

?? ? ? ? ?})

?? ? ? ?}

? ? ? }

? ? })

3去件、圖片下載完成,開始畫圖扰路,

drawView() {

????var context = wx.createCanvasContext('shareHomePage', this);

? ? context.setFillStyle('#ffffff');

? ? context.fillRect(0, 0, 500, 600);

? ? var?img_top = 10;

? ? var img_left = 10;

? ? var spaceX = 6;

? ? var?img_w_h = (500 - (spaceX + img_left)?* 2 ) / 3.0;

????for (var i in this.data.downloadImg) {

? ? ????? if (i >= 3) {

? ? ? ? ????break;

?? ? ? ? ?}

? ? ? var url = this.data.downloadImg[i];

? ? ? var minx = (imgsW[i] - imgsH[i]) / 2.0;

? ? ? var miny = (imgsH[i] - imgsW[i]) / 2.0;

? ? ? if(imgsW[i] > imgsH[i]) {

? ? ? ? context.drawImage(url, minx, 0, imgsH[i], imgsH[i], img_left, img_top, img_w_h, img_w_h);

? ? ? } else {

? ? ? ? context.drawImage(url, 0, miny, imgsW[i], imgsW[i], img_left, img_top, img_w_h, img_w_h);

? ? ? }

? ? ? img_left += spaceX + img_w_h

? ? }

}

/**

?context.drawImage(url, 0, miny, imgsW[i], imgsW[i], img_left, img_top, img_w_h, img_w_h);

括號(hào)內(nèi)對(duì)應(yīng)參數(shù)內(nèi)容:

(圖片地址, 起始x, ?起始y, 截取寬度, 截取長(zhǎng)度, 圖片放置位置x, 圖片放置位置y, 圖片放置寬尤溜,圖片放置高)

**/

完結(jié)

ps:

調(diào)用wx.switchTab時(shí)候,發(fā)覺沒有調(diào)用對(duì)應(yīng)tab界面的onLoad: function () /?onShow: function ()汗唱,需要自己手動(dòng)調(diào)用宫莱,調(diào)用方法如下:

? ? ? wx.switchTab({

? ? ? ? ? ? ? url: '../news/news',

? ? ? ? ? ? ? success: function (e) {

? ? ? ? ? ? ? ? var page = getCurrentPages().pop();

? ? ? ? ? ? ? ? if (page == undefined || page == null) return;

? ? ? ? ? ? ? ? page.onLoad(); // ?page.onShow();

? ? ? ? ? ? ? }

? ? ? ? ?});


真的完結(jié)了,開心??......??????????

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末哩罪,一起剝皮案震驚了整個(gè)濱河市授霸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌际插,老刑警劉巖碘耳,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異框弛,居然都是意外死亡辛辨,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門瑟枫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來斗搞,“玉大人,你說我怎么就攤上這事慷妙∑Х伲” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵膝擂,是天一觀的道長(zhǎng)虑啤。 經(jīng)常有香客問我,道長(zhǎng)猿挚,這世上最難降的妖魔是什么咐旧? 我笑而不...
    開封第一講書人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任驶鹉,我火速辦了婚禮绩蜻,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘室埋。我一直安慰自己办绝,他們只是感情好伊约,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著孕蝉,像睡著了一般屡律。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上降淮,一...
    開封第一講書人閱讀 51,708評(píng)論 1 305
  • 那天超埋,我揣著相機(jī)與錄音,去河邊找鬼佳鳖。 笑死霍殴,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的系吩。 我是一名探鬼主播来庭,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼穿挨!你這毒婦竟也來了月弛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤科盛,失蹤者是張志新(化名)和其女友劉穎帽衙,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體土涝,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡佛寿,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了但壮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片冀泻。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖蜡饵,靈堂內(nèi)的尸體忽然破棺而出弹渔,到底是詐尸還是另有隱情,我是刑警寧澤溯祸,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布肢专,位于F島的核電站,受9級(jí)特大地震影響焦辅,放射性物質(zhì)發(fā)生泄漏博杖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一筷登、第九天 我趴在偏房一處隱蔽的房頂上張望剃根。 院中可真熱鬧,春花似錦前方、人聲如沸狈醉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽苗傅。三九已至抒线,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間渣慕,已是汗流浹背嘶炭。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留逊桦,地道東北人旱物。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像卫袒,于是被迫代替她去往敵國(guó)和親宵呛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355

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

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,031評(píng)論 0 2
  • 北京2018年4月1日上午逮矛,NBA常規(guī)賽勇士客戰(zhàn)國(guó)王的比賽中,發(fā)生了令人痛心不已的一幕转砖。比賽進(jìn)行到第三節(jié)還有41...
    Curry_宇閱讀 1,192評(píng)論 1 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5须鼎? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,489評(píng)論 1 45
  • NO.1 東東呢?上哪兒去了姓赤? 記得多年前赡译,面對(duì)一年級(jí)的孩子,讓他們用“情”組詞不铆,不得不佩服現(xiàn)在的孩子們蝌焚,雖然只有...
    陽光Sunflower閱讀 341評(píng)論 0 1
  • 不得不說自己有點(diǎn)敏感每天總有一段不合群的時(shí)間此刻 它如期到來受蠱的思緒翩躚 我曾試著改變自己就在最近幾年總感覺生活...
    墨成閱讀 557評(píng)論 12 5