js简单实现图片本地预览效果

omgdog 发布于2019-08-22 15:59 / 1930人阅读

摘要：预览效果不废话，贴源码读取文件导出文件地址取到图片原始尺寸解决透明图片，出现黑色背景的问题如果不存在，或者异常错误，不影响后续执行根据设置的，进行尺寸压缩对预览图进行质量压缩导出的图片路径调用

预览效果：

不废话，贴源码：

f.getFileAsUrl = function(file, back) {
    var reader = new FileReader();
    // 读取文件base64
    reader.readAsDataURL(file);
    reader.onload = function(evt) {
        // 导出文件地址
        back(evt.target.result);
    }
};
f.getBase64 = function(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
};
f.zipImgBackUrl = function(base64Img, back, size) {
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    var img = new Image();
    img.src = base64Img;
    img.onload = function() {
        // 取到图片原始尺寸
        var w = img.width;
        var h = img.height;
        if (size.width && size.height) {
            if (size.width > size.height) {
                size.height = false;
            } else {
                size.width = false;
            }
        }
        if (!size) {
            c.width = w;
            c.height = h;
        } else if (size.width) {
            if (size.width < w) {
                c.width = size.width;
                c.height = h * size.width / w;
            } else {
                c.width = w;
                c.height = h;
            }
        } else if (size.height) {
            if (size.height < h) {
                c.height = size.height;
                c.width = w * size.height / h;
            } else {
                c.width = w;
                c.height = h;
            }
        }

        // 解决透明图片，出现黑色背景的问题
        var opacityImg = new Image();
        var base64 = localStorage.getItem("opacityImg");
        var hasLocal = base64 && /^data:image/.test(base64);
        if (hasLocal) {
            opacityImg.src = base64;
        } else {
            opacityImg.src = "/images/opacity-bg.jpg";
        }
        opacityImg.onload = function() {
            if (!hasLocal) {
                base64 = f.getBase64(opacityImg);
                localStorage.setItem("opacityImg", base64);
            }
            ctx.fillStyle = ctx.createPattern(opacityImg, "repeat");
            fillImg(ctx,c,img,back);
        };
        //如果opacityImg不存在，或者异常错误，不影响后续执行
        opacityImg.onerror = function(){
            ctx.fillStyle = "#f0f0f0";
            fillImg(ctx,c,img,back);
        };

        function fillImg(ctx,c,img,back){
            ctx.fillRect(0, 0, c.width, c.height);
            // 根据设置的size，进行尺寸压缩
            ctx.drawImage(img, 0, 0, w, h, 0, 0, c.width, c.height);
            //对预览图进行质量压缩
            var src = c.toDataURL("image/jpeg", 0.5);
            // 导出base64的图片路径
            back(src);
        }
    };
};

调用：

云服务器海外云主机 js实现图片渐入效果图片本地预览预览本地图片预览框效果js

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

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

上传图片本地预览效果实现（兼容IE8）

摘要：以上传图片为例。我们可以通过获取上传的图片相关信息，但是想要实现本地预览还需要借助来实现可以读取本地图片，并将图片数据转换成编码的字符串形式嵌入到页面中。在我们实现上传图片的效果里，就有用到。图片预览兼容处理及以下版本不支持和。最近项目里需要用到上传图片并预览的功能，于是写了个jQuery预览图片插件，下载地址。如果有需要的，可以直接下载。第一次写jQuery插件，如有不对之处，欢迎...

avwu 2019-08-20 16:54 评论0 收藏0
JS基础篇--搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地

摘要：与介绍只是对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存而则是这个对象的事件回调，当图片加载完成后执行绑定的函数。第三次点击，谷歌浏览器结果为浏览器结果为。例打印结果第一次点击，谷歌浏览器结果为浏览器结果为空。 onload与complete介绍 complete只是HTMLImageElement对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存；而onload则...

callmewhy 2019-08-20 18:29 评论0 收藏0
web图片上传时的一种本地压缩预览方案

摘要：简介本文结合实际项目场景，记录图片上传时的一种本地压缩预览解决方案。考虑到这些问题，决定采用本地图片进行预览。解决过程接下来说明将待上传的本地图片展示到界面中。这样就在前端实现了简单的图片压缩处理。简介本文结合实际项目场景，记录图片上传时的一种本地压缩预览解决方案。这里的本地预览是指，页面上的图片是读取的本机资源进行展示，而没有通过网络请求加载。实际的项目场景在这阵子的项目开发...

ytwman 2019-08-20 11:13 评论0 收藏0
javascript实现图片伪异步上传

摘要：使用监听的，一旦有发生，就表示服务器回传了信息增加上传文件类型限制思考这种方式对于单张图片上传没有问题，如果是多张，该怎样优化实现逻辑首先要知道， ajax无法发送带有文件的post请求所以，所以还是要用同步的方式，但是刷新的时候，我们不要在原来的页面刷新，去一个隐藏的iframe里面刷新，form表单中action正常填写处理文件上传的操作。紧着着的target填写一个隐藏的if...

2i18ns 2019-08-19 17:08 评论0 收藏0