图片上传缩略图预览

Pocher 发布于2019-08-22 15:12 / 2386人阅读

摘要：目标画布的左上角在目标上轴的位置。允许对绘制的图像进行缩放。如果不说明，在绘制时图片高度不会缩放。如果不说明，整个矩形从坐标的和开始，到图像的右下角结束。需要绘制到目标上下文中的，源图像的矩形选择框的高度。

在上传图片进行预览时，直接抓取原图时由于原图过大会影响性能，即对所上传图片进行压缩小图展示；

思路: 利用 canvas 对原图进行压缩重绘，抓取区域以中心为基点最大范围绘制缩略图；

对input[file]进行事件绑定

// 监控 file 变化
imgfile.addEventListener("change", function () {
    ...
}

利用 FileReader 读取上传的图片

var reader = new FileReader()
reader.onload = function () {
    ...
}
reader.readAsDataURL(file);

创建 canvas、image，并获取宽高

var canvas = document.createElement("canvas");
// 设置 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;
}

对原图进行宽高分析，最大化展示原图区域

// 判断原图宽高
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开//始，到图像的右下角结束。
//sHeight
//需要绘制到目标上下文中的，源图像的矩形选择框的高度。

生成base64

// 生成base64
dataUrl = canvas.toDataURL()

核心代码

// 监控 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");
            // 设置 canvas 画布大小
            canvas.width = thumbnailWidth, canvas.height = thumbnailHeight;

            var ctx = canvas.getContext("2d");
            var thumbnailItem = new Image();

            // 添加原图 url 至数组
            // 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);
    })
    
})

总结

需要注意 drawImage 需要放在 onload 的回调函数里面，避免图片还未加载完成被绘制出来，即出现图片一片空白;

如有错误或不足，欢迎指出

GPU云服务器云服务器图片缩略图 php 预览上传图片上传图片预览php 图片上传服务器并预览

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93264.html

Bootstrap FileInput(文件上传)中文API整理

摘要：默认为选择上传的文件数超出了允许的最大限制。在这种情况下，每一个人选择的文件被上传成功后，触发事件。此事件仅在上传和完成同步或异步批量上传后触发。下载地址、API和DOM地址（英语好的小伙伴可以看看）下载地址：https://github.com/kartik-v/b...API文档：http://plugins.krajee.com/fil...D E M O：http://p...

TwIStOy 2019-08-26 13:36 评论0 收藏0
PHP微信公众号开发——群发消息(完结)

摘要：关于上传图文消息素材和新增永久图文素材的区别上传图文消息素材等于是直接把图文素材传到微信的服务器，每次凭借获取素材，并且不占用素材库新增永久图文素材在开发者和微信服务器之间，多了一个素材库。 **说明1.文章和有道笔记几乎内容相同，所以如果有人在有道上有幸看到一样的文章，应该也是我写的，除非是全部复制2.内容会较长，故会拆分多篇文章讲解3.目前基本的群发已记录完结，如果后续有补充，会作...

bbbbbb 2019-06-27 14:46 评论0 收藏0
慕课网_《Java实现图片等比例缩略图》学习总结

摘要：时间年月日星期六说明本文部分内容均来自慕课网。可以更加专注于业务逻辑开发，缩短项目开发周期，提高项目开发速度。时间：2017年07月15日星期六说明：本文部分内容均来自慕课网。@慕课网：http://www.imooc.com教学源码：无学习源码：https://github.com/zccodere/s... 第一章：课程介绍 1-1 课程介绍在用户进行信息概略浏览的时候，提供缩...

raledong 2019-08-15 10:57 评论0 收藏0
一步一步搭建一个图片上传网站（后台服务器用nodejs）

摘要：把文件上传路径指定到然后用当前日期和文件名命名上传过来的文件。后端利用建立服务器，利用中间件指定文件路径。利用这个前端和后端技术，我们基本上就可以做出一个图片上传存储的基本网站核心。前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿，大体上讲了以下h5中图片上传的几个核心原理，但是没有后端接受的服务器代码，没法做测试。也没有具体的一个实例都是一些基本的原理片段，并且ui界面也不...

Darkgel 2019-08-20 16:21 评论0 收藏0
ThinkPHP3.2+Krpano实现全景图

摘要：为了实现全立体的全景图效果，我们采用了软件将普通鱼眼图片渲染为全景图说明代码有过调整，并不能保证运行，主要说明实现思路。显示全景图要将图片显示出来，我们必须按照规则生成必须的配置文件。我们将根据上传图片是生成的唯一码作为依据生成全景图。为了实现全立体的3D全景图效果，我们采用了Krpano软件将普通鱼眼图片渲染为720°全景图说明：代码有过调整，并不能保证运行，主要说明实现思路。首...

My_Oh_My 2019-07-01 14:06 评论0 收藏0