js compress 图片

function compressImage(maxWidth,maxHeight,srcOriginalImage,callback){
    // 创建 canvas

    var canvasId ="canvas_"+new Date().getTime()+""+parseInt(Math.random());
    $("<canvas></canvas>").hide().attr("id",canvasId).appendTo("body");

    var c=$("#"+canvasId)[0];
    var ctx=c.getContext("2d");

    // 释放canvas
    function releaseCanvas(){
        $("#"+canvasId).remove();
    }

    // 创建要绘制的Image对象
    var img = new Image();
    img.src = srcOriginalImage;
    // 等待img加载完毕
    img.onload = function(){
        // 与backgournd-size:contain效果相同
        if(img.width/img.height<maxWidth/maxHeight){
            c.height = img.height;
            if(img.height>maxHeight){
                c.height = maxHeight;
            }
            c.width = img.width/img.height*c.height;
        }else{
            c.width = img.width;
            if(img.width>maxWidth){
                c.width = maxWidth;
            }
            c.height = img.height/img.width*c.width;
        }
        ctx.drawImage(img,0,0,img.width,img.height,0,0,c.width,c.height);
        callback(c.toDataURL());

        releaseCanvas();
    };

}
时间: 2024-08-09 10:43:03

js compress 图片的相关文章

js 压缩图片 上传

感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/u011415782/article/details/79978608 大概的流程就是 点击file选择图片 js将图片解读出base64编码,然后通过js将base64编码转为压缩后的base64 然后通过ajax或者form把压缩后的base64编码提交到服务器(php) 然后php将base6

JS获取图片的缩略图,并且动态的加载多张图片

找了好多资料也没有找到该死的ie的解决办法,最后放弃了ie <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js获取缩略图</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <st

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

【COCOS2DX-LUA 脚本开发之十二】Hybrid模式-利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)

转载自:http://www.himigame.com/iphone-cocos2dx/1354.html 首先说明一个问题: 为什么要在线更新资源和脚本文件!? 对于此问题,那要说的太多了,简单概括,如果你的项目已经在google play 或Apple Store 等平台上架了,那么当你项目需要做一些活动或者修改前端的一些代码等那么你需要重新提交一个新版本给平台,这时候你的上架时候是个不确定的时候,具体什么时候能上架,主要跟平台有关,你再着急,也没有用的. 那么如果你的项目是使用脚本语言进行

分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

asp.net MVC发布iis无法加载css,js和图片

今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual studio运行的时候就已经不能加载css和js文件,那种情况一般都是路径的问题,改下页面代码就行,网上教程不少,而这个其实是一个CMS的开源系统.Orchard,国庆实在无聊,就想玩下这个asp.net MVC框架的CMS,而且是微软推荐的开源CMS,提到了就来说说这个吧,和国内的其他CMS对比起来

兼容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

js判断图片加载完成

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <img id="mainPic" src="http://img1c.xgo-img

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口