摘要:目標畫布的左上角在目標上軸的位置。允許對繪制的圖像進行縮放。如果不說明,在繪制時圖片高度不會縮放。如果不說明,整個矩形從坐標的和開始,到圖像的右下角結(jié)束。需要繪制到目標上下文中的,源圖像的矩形選擇框的高度。
在上傳圖片進行預覽時,直接抓取原圖時由于原圖過大會影響性能,即對所上傳圖片進行壓縮小圖展示;
思路: 利用 canvas 對原圖進行壓縮重繪,抓取區(qū)域以中心為基點最大范圍繪制縮略圖;
對input[file]進行事件綁定// 監(jiān)控 file 變化 imgfile.addEventListener("change", function () { ... }利用 FileReader 讀取上傳的圖片
var reader = new FileReader() reader.onload = function () { ... } reader.readAsDataURL(file);創(chuàng)建 canvas、image,并獲取寬高
var canvas = document.createElement("canvas"); // 設(shè)置 canvas 畫布大小 canvas.width = thumbnailWidth, canvas.height = thumbnailHeight; var ctx = canvas.getContext("2d"); var thumbnailItem = new Image(); //獲取圖片寬高 thumbnailItem.onload = function () { var imgWidth = this.width, imgHeight = this.height, drawWidth = "", drawHeight = "", dx, dy; }對原圖進行寬高分析,最大化展示原圖區(qū)域
// 判斷原圖寬高 if (imgWidth > imgHeight) { drawWidth = drawHeight = imgHeight; dx = (imgWidth - imgHeight) / 2, dy = 0 } else { drawWidth = drawHeight = imgWidth; dx = 0, dy = (imgHeight - imgWidth) / 2 }進行繪制縮略圖
//void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); ctx.drawImage(thumbnailItem, dx, dy, drawWidth, drawHeight, 0, 0, thumbnailWidth, thumbnailHeight) //dx //目標畫布的左上角在目標canvas上 X 軸的位置。 //dy //目標畫布的左上角在目標canvas上 Y 軸的位置。 //dWidth //在目標畫布上繪制圖像的寬度。 允許對繪制的圖像進行縮放。 如果不說明, 在繪制時圖片寬度不//會縮放。 //dHeight //在目標畫布上繪制圖像的高度。 允許對繪制的圖像進行縮放。 如果不說明, 在繪制時圖片高度不//會縮放。 //sx //需要繪制到目標上下文中的,源圖像的矩形選擇框的左上角 X 坐標。 //sy //需要繪制到目標上下文中的,源圖像的矩形選擇框的左上角 Y 坐標。 //sWidth //需要繪制到目標上下文中的,源圖像的矩形選擇框的寬度。如果不說明,整個矩形從坐標的sx和sy開//始,到圖像的右下角結(jié)束。 //sHeight //需要繪制到目標上下文中的,源圖像的矩形選擇框的高度。生成base64
// 生成base64 dataUrl = canvas.toDataURL()核心代碼
// 監(jiān)控 file 變化 imgfile.addEventListener("change", function () { if (!this.files.length) return; var files = Array.prototype.slice.call(this.files); if (files.length > maxQuantity) { alert("最多同時只可上傳100張圖片"); return; } files.forEach(function (file, i) { var reader = new FileReader(), dataUrl = ""; reader.onload = function () { var canvas = document.createElement("canvas"); // 設(shè)置 canvas 畫布大小 canvas.width = thumbnailWidth, canvas.height = thumbnailHeight; var ctx = canvas.getContext("2d"); var thumbnailItem = new Image(); // 添加原圖 url 至數(shù)組 // imgUrls.push(this.result); imgUrls[i] = this.result thumbnailItem.onload = function () { var imgWidth = this.width, imgHeight = this.height, drawWidth = "", drawHeight = "", dx, dy; // 判斷原圖寬高 if (imgWidth > imgHeight) { drawWidth = drawHeight = imgHeight; dx = (imgWidth - imgHeight) / 2, dy = 0 } else { drawWidth = drawHeight = imgWidth; dx = 0, dy = (imgHeight - imgWidth) / 2 } // console.log("dx :" + dx, "dy: " + dy, "drawWidth :" + drawWidth, "thumbnailWidth :" + thumbnailWidth, "thumbnailHeight :" + thumbnailHeight) ctx.drawImage(thumbnailItem, dx, dy, drawWidth, drawHeight, 0, 0, thumbnailWidth, thumbnailHeight) // 生成base64 dataUrl = canvas.toDataURL() // thumbnaiUrls.push(dataUrl) thumbnaiUrls[i] = dataUrl var imglist = "總結(jié)" + "" + "" + ""; $("#imgList").append(imglist) } thumbnailItem.src = this.result console.log("縮略圖") console.log(thumbnaiUrls) console.log("原圖") console.log(imgUrls) }; reader.readAsDataURL(file); }) }) " + "
需要注意 drawImage 需要放在 onload 的回調(diào)函數(shù)里面,避免圖片還未加載完成被繪制出來,即出現(xiàn)圖片一片空白;
如有錯誤或不足,歡迎指出
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/93264.html
摘要:默認為選擇上傳的文件數(shù)超出了允許的最大限制。在這種情況下,每一個人選擇的文件被上傳成功后,觸發(fā)事件。此事件僅在上傳和完成同步或異步批量上傳后觸發(fā)。 下載地址、API和DOM地址(英語好的小伙伴可以看看) 下載地址:https://github.com/kartik-v/b...API文檔 :http://plugins.krajee.com/fil...D E M O:http://p...
摘要:關(guān)于上傳圖文消息素材和新增永久圖文素材的區(qū)別上傳圖文消息素材等于是直接把圖文素材傳到微信的服務(wù)器,每次憑借獲取素材,并且不占用素材庫新增永久圖文素材在開發(fā)者和微信服務(wù)器之間,多了一個素材庫。 **說明1.文章和有道筆記幾乎內(nèi)容相同,所以如果有人在有道上有幸看到一樣的文章,應該也是我寫的,除非是全部復制2.內(nèi)容會較長,故會拆分多篇文章講解3.目前基本的群發(fā)已記錄完結(jié),如果后續(xù)有補充,會作...
摘要:時間年月日星期六說明本文部分內(nèi)容均來自慕課網(wǎng)。可以更加專注于業(yè)務(wù)邏輯開發(fā),縮短項目開發(fā)周期,提高項目開發(fā)速度。 時間:2017年07月15日星期六說明:本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng):http://www.imooc.com教學源碼:無學習源碼:https://github.com/zccodere/s... 第一章:課程介紹 1-1 課程介紹 在用戶進行信息概略瀏覽的時候,提供縮...
摘要:把文件上傳路徑指定到然后用當前日期和文件名命名上傳過來的文件。后端利用建立服務(wù)器,利用中間件指定文件路徑。利用這個前端和后端技術(shù),我們基本上就可以做出一個圖片上傳存儲的基本網(wǎng)站核心。 前幾天看了騰訊云社區(qū)的一個文件上傳的文章文件上傳那些事兒,大體上講了以下h5中圖片上傳的幾個核心原理,但是沒有后端接受的服務(wù)器代碼,沒法做測試。也沒有具體的一個實例都是一些基本的原理片段,并且ui界面也不...
摘要:為了實現(xiàn)全立體的全景圖效果,我們采用了軟件將普通魚眼圖片渲染為全景圖說明代碼有過調(diào)整,并不能保證運行,主要說明實現(xiàn)思路。顯示全景圖要將圖片顯示出來,我們必須按照規(guī)則生成必須的配置文件。我們將根據(jù)上傳圖片是生成的唯一碼作為依據(jù)生成全景圖。 為了實現(xiàn)全立體的3D全景圖效果,我們采用了Krpano軟件將普通魚眼圖片渲染為720°全景圖 說明:代碼有過調(diào)整,并不能保證運行,主要說明實現(xiàn)思路。首...
閱讀 3019·2021-11-24 10:21
閱讀 1588·2021-10-11 10:57
閱讀 2804·2021-09-22 15:24
閱讀 2659·2021-09-22 14:58
閱讀 2331·2019-08-30 13:16
閱讀 3478·2019-08-29 13:05
閱讀 3411·2019-08-29 12:14
閱讀 3441·2019-08-27 10:55