浏览器加载本地图片并预览

news/2024/10/17 16:20:04/
function imgPreview(config) {var width = config.width || 200;var height = config.height || 200;return {/*** ie9- 预览图片* @param {type} input_file ,$('input[type=file]') 或者 $('input[type=file]')[0]* @param {type} callback 回掉参数为,$(居中的图片)* @returns {interval}*/iePreview: function(input_file, callback) {$(input_file).select();$(input_file).blur();var src = document.selection.createRange().text;if (/.+\.(jpg|gif|png)$/.test(src) === false) {alert('not image!');return;}var imgitem = $('<div></div>').appendTo('body');var f = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "' , sizingMethod= 'image' )";imgitem.css({filter: f,display: 'none',width: '1px',height: '1px'});var itval = setInterval(function() {var w = imgitem.width();if (w !== 1) {window.clearInterval(itval);var boxWidth = width;var boxHeight = height;var zoom = imgPreview.calcZoom({boxWidth: boxWidth,boxHeight: boxHeight,imgWidth: imgitem.width(),imgHeight: imgitem.height()});var fn = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "' , sizingMethod= 'scale' )";var out = $('<div></div>').css(zoom).css({'filter': fn,display: 'block'});callback(out);imgitem.remove();}},16);},/*** html5 objecturl 预览* @param {type} input_file ,$('input[type=file]') 或者 $('input[type=file]')[0]* @param {type} callback 回掉参数为,$(居中的图片)* @returns {undefined}*/canvasPreview: function(input_file, callback) {var files = $(input_file).prop('files');$.each(files,function(index, val) {var img = new Image();img.src = window.URL.createObjectURL(val);img.onload = function() {window.URL.revokeObjectURL(img.src);var boxWidth = width;var boxHeight = height;var zoom = imgPreview.calcZoom({boxWidth: boxWidth,boxHeight: boxHeight,imgWidth: img.naturalWidth,imgHeight: img.naturalHeight});//var canvas = document.createElement( 'canvas' );//canvas.width = parseInt(zoom.width);//canvas.height = parseInt(zoom.height);////var ctx = canvas.getContext("2d");//ctx.drawImage(img, 0,0,canvas.width, canvas.height);//var out = $(canvas).css(zoom);//canvas裸压缩成像质量太差,如果要高质量压缩请参考 https://github.com/mailru/FileAPIvar out = $(img).css(zoom);callback(out);};});},preview: function() {if (document.body.filters) {this.iePreview.apply(this, arguments);} else if (window.HTMLCanvasElement) {this.canvasPreview.apply(this, arguments);}}};
}imgPreview.calcZoom = function(param) {var boxw = param.boxWidth;var boxh = param.boxHeight;var imgw = param.imgWidth;var imgh = param.imgHeight;var out = {width: '0px',height: '0px',marginLeft: '0px',marginRight: '0px',marginTop: '0px',marginBottom: '0px'};if (boxw / boxh > imgw / imgh) {out.height = boxh;out.width = imgw / imgh * boxh;out.marginLeft = (boxw - out.width) / 2;out.marginRight = boxw - out.marginLeft - out.width;} else {out.width = boxw;out.height = imgh / imgw * boxw;out.marginTop = (boxh - out.height) / 2;out.marginBottom = boxh - out.marginTop - out.height;}return out;
};


http://www.ppmy.cn/news/150205.html

相关文章

【Android】简单图片浏览器

开始重新学习Android&#xff0c;还是依照《疯狂Android讲义》。 简单图片浏览器&#xff1a; 功能&#xff1a;图片浏览器&#xff0c;点击图片可以切换。 注意&#xff1a;在res/drawable中添加p1.jpg、p2.jpg、p3.jpg。 Java代码&#xff1a; import android.support.v7.…

网页图片浏览器

公司有个需求是一个webview页面里的图片点击会放大&#xff0c;支持保存功能&#xff0c;在网上找了很多资料&#xff0c;也没用一个合适的&#xff0c;决定自己写一个&#xff0c;效果如下&#xff1a; 废话不多说&#xff0c;先上代码&#xff1a;实现代码 ####实现思路&…

图片预览器

此预览器&#xff0c;一次只能翻页十张图片&#xff0c;开发人员可根据自己需要&#xff0c;修改前台代码。 页面代码 <% Page Language"C#" AutoEventWireup"true" CodeBehind"UpFilesAndPreview.aspx.cs" Inherits"WebFramework.Comm…

chrome浏览器不能显示本地图片办法解决(图片预览)

近期开发项目时有个功能是实现图片预览&#xff0c;但是我将图片路径赋值给img标签的src时&#xff0c;预览的显示是这样的。 唉。我就郁闷了&#xff0c;再仔细一看&#xff0c;浏览器给我加了个路径啊。 这是什么鬼东西啊。 试了一下replace替换掉浏览器加给我的路径也不行&…

图片网页浏览器

图片网页浏览器 首先呢&#xff0c;大家需要在网上找到图片&#xff0c;然后复制图片的网址&#xff0c;记住&#xff0c;是图片网址&#xff0c;而不是当前打开的网页的网址。比如下面这两幅图就分别是我在网页看到的图片&#xff0c;以及用图片浏览器查看时的截图 下面是mai…

图片浏览

图片的浏览&#xff0c;经常会看见在图片的左边点一下转到上一张图片&#xff0c;点右边一下&#xff0c;转到下一张图片&#xff0c;而且鼠标在左边时鼠标是向左的方向&#xff0c;鼠标在右边时鼠标是向右方向。以下示例是用html做的静态的形式&#xff0c;如果用jsp则可以做成…

windows的图片浏览器

windows的图片浏览器 之前用华为手机&#xff0c;截图什么的&#xff0c;windows 7都能正常打开&#xff0c;自从华为手机升级了以后&#xff0c;截图一律都在windows 7的图片浏览器里打不开&#xff0c;提示内存不足&#xff0c;网络上说要用第三方图片软件就可以&#xff0c;…

图片浏览器

ImageViewer 项目地址&#xff1a;albert-lii/ImageViewer 简介&#xff1a; :crystal_ball:图片浏览器&#xff0c;支持图片手势缩放、拖拽等操作&#xff0c;自定义 View的模式显示&#xff0c;自定义图片加载方式&#xff0c;更加灵活&#xff0c;易于扩展&#xff0c;同时…