【关于图片预览使用base64在chrome上的性能问题解决方法】的更多相关文章

关于图片预览使用base64在chrome上的性能问题解决方法

在开发后台上传图片的功能时候使用base64预览图片,结果在传入大量图片后导致chrome崩溃,代码如下 var img = new Image(); var render = new FileReader(); render.onload = function(e) { img.src = e.target.result; }; render.readAsDataURL(file); 本人猜测是在图片数量太多而且图片太大,浏览器在解析base64文件的时候消耗了太多资源导致崩溃,所以更换图片预…

适用于各浏览器支持图片预览，无刷新异步上传js插件

文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西,我们可以调用它的新的api来做文件的异步上传.但是非常可惜,这个新的api并非每个浏览器都支持. 如果你会flash这当然很好,你可以自己写一个flash的上传插件来支持上传,不过本文不会对flash这个技术做任何的讨论. 好了言归正传,我们还是来讨论下只使用js的情况下如何才能异步无刷新的上传文…

HTML5浏览器端图片预览&生成Base64

本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或Blob对象异步读取存储在用户计算机上的文件(或数据缓冲区)的内容. 有了FileReader就不需要先把文件发送到服务器端,然后再返回到浏览器端显示这种模式了,可以直接在浏览器端读取文件并显示. DND获取文件 通过对DragAndDrop事件的监听获取文件. z.event.on(listDiv…

js图片预览插件，不涉及上传

小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns…

【Js应用实例】图片预览

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片预览</title> </head> <body> <!-- 文件上传在现代浏览器是基于FileReader API 基于浏览器的安全策略,file标签在…

H5图片预览、压缩、上传

目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!-- html部分 --> <ul id="preview" class="clear"> <li class="fl"> <img src="/images/audition/icon_upload.pn…

vue项目中图片预览旋转功能

最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/viewerjs 在git上看了下,有很多功能,不过我的项目只需要做个图片旋转功能,引入这个组件感觉大材小用了,于是自己写了个简易版的,因为我们只是查看而已,没什么要求.如果你需要比较精确的图片旋转功能,可以使用这个viewerjs组件 功能描述: 一个图片预览框,三个操作按钮: 上一张,下一张,旋转; 点…

兼容最新firefox、chrome和IE的javascript图片预览实现代码

这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE6-IE10 都兼容,需要的朋友可以参考下 javascript实现客户端file选择文件后img标签加载客户端图片实现图片预览. 测试浏览器:firefox6,firefox12,chrome 25.0.1364.172 m,IE6-IE10 都兼容 safari5.0.4不支持FileReade…

本地与在线图片转Base64及图片预览

查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src = this.files[0]; var self = $(this); var read = new FileReader(); read.onload = function(e) { var html = "<img src=" + e.target.result + "…

兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/Headphoto/noperson.jpg" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" alt="" /> </div> <asp:FileUpload…