圖片上傳縮略圖預(yù)覽

Pocher 發(fā)布于2019-08-22 15:12 / 2417人閱讀

摘要：目標(biāo)畫(huà)布的左上角在目標(biāo)上軸的位置。允許對(duì)繪制的圖像進(jìn)行縮放。如果不說(shuō)明，在繪制時(shí)圖片高度不會(huì)縮放。如果不說(shuō)明，整個(gè)矩形從坐標(biāo)的和開(kāi)始，到圖像的右下角結(jié)束。需要繪制到目標(biāo)上下文中的，源圖像的矩形選擇框的高度。

在上傳圖片進(jìn)行預(yù)覽時(shí)，直接抓取原圖時(shí)由于原圖過(guò)大會(huì)影響性能，即對(duì)所上傳圖片進(jìn)行壓縮小圖展示；

思路: 利用 canvas 對(duì)原圖進(jìn)行壓縮重繪，抓取區(qū)域以中心為基點(diǎn)最大范圍繪制縮略圖；

對(duì)input[file]進(jìn)行事件綁定

// 監(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 畫(huà)布大小
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;
}

對(duì)原圖進(jìn)行寬高分析，最大化展示原圖區(qū)域

// 判斷原圖寬高
if (imgWidth > imgHeight) {
    drawWidth = drawHeight = imgHeight;
    dx = (imgWidth - imgHeight) / 2, dy = 0
} else {
    drawWidth = drawHeight = imgWidth;
    dx = 0, dy = (imgHeight - imgWidth) / 2
}

進(jìn)行繪制縮略圖

//void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

ctx.drawImage(thumbnailItem, dx, dy, drawWidth, drawHeight, 0, 0, thumbnailWidth, thumbnailHeight)

//dx
//目標(biāo)畫(huà)布的左上角在目標(biāo)canvas上 X 軸的位置。
//dy
//目標(biāo)畫(huà)布的左上角在目標(biāo)canvas上 Y 軸的位置。
//dWidth
//在目標(biāo)畫(huà)布上繪制圖像的寬度。 允許對(duì)繪制的圖像進(jìn)行縮放。 如果不說(shuō)明， 在繪制時(shí)圖片寬度不//會(huì)縮放。
//dHeight
//在目標(biāo)畫(huà)布上繪制圖像的高度。 允許對(duì)繪制的圖像進(jìn)行縮放。 如果不說(shuō)明， 在繪制時(shí)圖片高度不//會(huì)縮放。
//sx
//需要繪制到目標(biāo)上下文中的，源圖像的矩形選擇框的左上角 X 坐標(biāo)。
//sy
//需要繪制到目標(biāo)上下文中的，源圖像的矩形選擇框的左上角 Y 坐標(biāo)。
//sWidth
//需要繪制到目標(biāo)上下文中的，源圖像的矩形選擇框的寬度。如果不說(shuō)明，整個(gè)矩形從坐標(biāo)的sx和sy開(kāi)//始，到圖像的右下角結(jié)束。
//sHeight
//需要繪制到目標(biāo)上下文中的，源圖像的矩形選擇框的高度。

生成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("最多同時(shí)只可上傳100張圖片");
        return;
    }

    files.forEach(function (file, i) {

        var reader = new FileReader(),
            dataUrl = "";
        reader.onload = function () {
            var canvas = document.createElement("canvas");
            // 設(shè)置 canvas 畫(huà)布大小
            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 =
                    "" +
                    "" +
                    "" +
                    "" +
                    "";

                $("#imgList").append(imglist)

            }

            thumbnailItem.src = this.result

            console.log("縮略圖")
            console.log(thumbnaiUrls)

            console.log("原圖")
            console.log(imgUrls)

        };
        reader.readAsDataURL(file);
    })
    
})