實(shí)現(xiàn)原理
1.如何切圖？
用之前的方法就是使用photoshop將圖片切成相應(yīng)大小的圖片。這種做法不靈活，如果要更換圖片的話，就得重新去切圖，很麻煩。
現(xiàn)在是使用canvas，圖片是一整張jpg或者png，把圖片導(dǎo)入到canvas畫(huà)布，然后再調(diào)用上下文context的getImageData方法，把圖片處理成小圖，這些小圖就作為拼圖的基本單位
1 renderImg: function (image) { 2 var index = 0; 3 for (var i = 0; i < 3; i++) { 4 for (var j = 0; j < 3; j++) { 5 this.context.drawImage(image, 300 * j, 300 * i, 300, 600, 0, 0, 300, 300); 6 this.imgArr[index].src = this.canvas.toDataURL('image/jpeg'); 7
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖
2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞
2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式