html5 canvas 在线图片转换器

Muninn 发布于2019-06-27 11:21 / 3091人阅读

摘要：前天写完文件上传的时候，老板给了个任务，问我能不能把图片压缩后再上传，并且保证前面的功能能正常使用。于是就想能不能做一个在线的图片转换器。目前仅支持当图片较大时，转格式可能失败作者表示他不知道原因。

前天写完文件上传的时候，老板给了个任务，问我能不能把图片压缩后再上传，并且保证前面的功能能正常使用。虽然最后放弃了这个想法，但我在查资料的过程中看到了canvas的toDataURL这个功能。于是就想能不能做一个在线的图片转换器。在经过一天的辛苦耕耘后（我是不会告诉你们我在事件绑定上浪费了半天时间( ´艸｀)ﾑﾌﾟﾌﾟ），总算弄出个大概了。虽然还有一些东西不太明白，但总体没什么问题了。
主要的几个功能就是:
1.toDataURL(用来压缩转码)
2.通过后台的临时储存来达到跨域获取图片(虽然html5提供了跨域获取图片的方式，但这要你情我愿才行啊(´・ω・｀) ）
3.js下载图片

有关html5图片跨域可以参考这篇文章：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

感谢下面的文章提供的学习方向：
http://www.baidufe.com/item/65c055482d26ec59e27e.html
http://blog.csdn.net/chaojie2009/article/details/22047871

演示地址：我是demo
源码地址：点我下载

首先
HTML:





IMGFormat




IMGFormat

    
        
        
        TO
        
        
            

            
                请选择image文件:
                +
                
            
            
                请输入图片链接:
                
            
        
        
            使用链接时请注意图片是否是外链。目前仅支持：jpg|png|gif|bmp
        
        
            当图片较大时，转png格式可能失败（作者表示他不知道原因Σ(ﾟдﾟlll)）。
            如果有谁知道的话，欢迎在文章下面的评论留言，谢谢。
        
    


    转换格式选择:
    
        JPG
        PNG
    
    图片质量:

CSS:

style.css

/*************reset****************/
html{color:#333;-webkit-text-size-adjust:none;height:100%;max-height:100%;overflow: hidden;font-family: "Microsoft Yahei";}
body{height: 100%;max-height:100%;overflow: hidden;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:"";}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
body{font-size:12px;}
a{color: #333333;text-decoration: none;}
a:hover{text-decoration:underline; color:#c00;}

/*font*/
*{
    font-size: 1.05em;
    color: #222;
    font-family: "Microsoft Yahei";
}

format.css

body{
    background: -webkit-linear-gradient(#66ccff,#74b1d1);
    background: -o-linear-gradient(#66ccff,#74b1d1);
    background: -moz-linear-gradient(#66ccff,#74b1d1);
    background: -ms-linear-gradient(#66ccff,#74b1d1);
    background: linear-gradient(#66ccff,#74b1d1);
    position: relative;
}
#header{
    height: 2.8em;
    background: -webkit-linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7));
    background: -o-linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7));
    background: -moz-linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7));
    background: -ms-linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7));
    background: linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7));
    font-size:2.4em;
    font-weight: bolder;
    text-align: center;
    line-height: 2.8em;
    color: #fff;
    text-shadow:0 0 0 #eee,0 0 0 #eee,1px 1px 1px #ede,-1px -1px 1px #eee;
    box-shadow: 0px 2px 6px rgba(16,16,16,0.7);
}

#content{
    position: absolute;
    top: 10em;
    left: 0em;
    bottom: 8em;
    right: 0em;
    padding: 0em 2em;
}

#con_box{
    height: 100%;
    background: #fff;
    box-shadow:0px 0px 10px rgba(0,0,0,0.9);
    border: none;
    border-radius: 10px;
    padding:0em 8%;
    position: relative;
    text-align: center;
}

.img_box{
    width: 100%;
    max-width: 36%;
    max-height: 63.4%;
    height: 100%;
    display: inline-block;
    margin-top: 2em;
    position: relative;
}

.img_box img{
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

#canvas{
    display: none;
}

.to{
    display: inline-block;
    width: 20%;
    max-width: 20%;
    font-size: 3em;
    font-weight: bolder;
}

.select_box{
    text-align: left;
    width: 92%;
    margin:0 auto;
    margin-top: 2em;
}

#way_choose{
    float: left;
    margin-right: 2em;
}

.file_choose,.url_input{
    margin: 0 auto;
    font-weight: bold;
    font-size:1.4em;
    text-align: left;
    display: none;
}

.file_choose{
    display: block;
}

.file_choose>label{
    margin-left: 2em;
    padding:0 1.2em;
    font-size: 1.1em;
    font-weight: bolder;
    background: #222;
    color:#fff;
}

.file_choose>label:hover{
    cursor: pointer;
    box-shadow: 0 0 5px red;
}

.file_choose>input{
    display: none;
}

.url_input>label{
    margin-right: 1em;
}

.url_input>input{
    outline: none;
    border: 2px solid #dedede;
    border-radius: 2em;
    padding-left: 1.5em;
    width:20em; 
}

.tips{
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    width: 92%;
    margin:0 auto;
    margin-top: 1em;
    display: none;
}

.t1{
    display: block;
}

#footer{
    position: fixed;
    bottom: 0em;
    height: 2.8em;
    background: #000;
    line-height: 2.8em;
    width: 100%;
    left: 0em;
    font-size: 1.6em;
    font-weight: bolder;
}

#footer>span{
    float: left;
    margin-left:1.5em;
}

.type_list{
    display: inline;
    margin-right: 2em;
}

.type_list>li{
    display: inline;
    margin-left: 1em;
    background: #ffb515;
    height: 2em;
    padding:0 0.6em;
    font-size: 1.05em;
    color: #fff;
    text-shadow:-1px 1px 2px rgba(0,0,0,0.7);
    border-radius:5px;
    box-shadow:0 0 5px rgba(255,255,255,0.6);
}

.type_list>li:hover{
    cursor: pointer;
    box-shadow: 0 0 5px rgba(255,0,0,0.7);
}

#quality{
    margin-left: 1em;
}

#turnTo,#download{
    margin-left: 2em;
    padding: 0 1em;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
    background: -webkit-linear-gradient(#ffffff,#dfdfdf);
    background: -o-linear-gradient(#ffffff,#dfdfdf);
    background: -moz-linear-gradient(#ffffff,#dfdfdf);
    background: linear-gradient(#ffffff,#dfdfdf);
    box-shadow: 0px 0px 5px rgba(255,255,255,0.7);
    font-weight: bolder;
}

#turnTo:hover,#download:hover{
    background: -webkit-linear-gradient(#66ccff,#74b1d1);
    background: -o-linear-gradient(#66ccff,#74b1d1);
    background: -moz-linear-gradient(#66ccff,#74b1d1);
    background: -ms-linear-gradient(#66ccff,#74b1d1);
    background: linear-gradient(#66ccff,#74b1d1);
    cursor: pointer;
    border: #6cf 1px solid;
}

.bgAdd{
    background: red !important;
}

JS:

//author:孤月
//date:2015/07/17
//变量定义
var sWay    = document.getElementById("way_choose"),       //获取得到图片链接的方式
    sGetUrl = "",                                          //当获取方式为链接时,存放获取的链接地址
    sFile   = "",                                          //当获取方式为本地时,存放获取的文件信息
    sType   = "",                                          //获取要转换的格式
    nQuali  = document.getElementById("quality");           //获取图片转换的质量(压缩比)

var urlInput  = document.getElementById("urlGet"),
    file      = document.getElementById("file"),
    sourceImg = document.getElementById("source_img"),
    previewImg= document.getElementById("preview_img"),
    canvas    = document.getElementById("canvas"),
    typeList  = document.querySelector(".type_list"),
    turnTo    = document.getElementById("turnTo"),
    download  = document.getElementById("download");

var mimeTypeGet,        //获取img格式
    canDownload=false,  //是否可以开始下载
    cross,              //是否是外链
    go=true;            //是否文件或链接或转换格式改变


//获取要转换的目标图片类型
function getType () {
    var type;
    //侦听click事件
    typeList.addEventListener("click",function(e){
        e = e || event;
        if(e.target.tagName.toLowerCase()!="li")
        return;
        var val = e.target.innerHTML;
        var ch = typeList.children;

        for(var x=0;x100 || val<10)
        nQuali.value = 50;
    };
}

//img下载
function downlo(){
    download.onclick = function(){
        if(canDownload)
        {  
            // 加工image data，替换mime type
            var imgData = previewImg.src.replace(mimeTypeGet,"image/octet-stream");
            //download
            var down = document.getElementById("downIMG");
            down.href = imgData;
            down.download = "IGotIt-"+(new Date()).getTime()+"."+(sType?sType:"jpg");
            var mouseEv = document.createEvent("MouseEvents");
            mouseEv.initMouseEvent("click",false,false,window,0,0,0,0,0,false,false,false,false,0,null);
            down.dispatchEvent(mouseEv);
        } else {
            alert("请先进行转换!");
        }
    };
}

//转换
function transformImg(){
    turnTo.onclick = function(e){
        e = e || event;
        e.stopPropagation();
        e.preventDefault();
        var type = sType || "jpg" ,
            mimeType,
            newImage = new Image(),
            cv = canvas,
            ct = cv.getContext("2d");

        if(type=="jpg")
        mimeType = "image/jpeg";
        else
        mimeType = "image/"+type;

        mimeTypeGet  = mimeType;

        if(cross && go){
            //获取外链地址并将其传入服务器
            var xhr = new XMLHttpRequest();
            var nForm = new FormData();

            nForm.append("url",sourceImg.src);
            nForm.append("type",sourceImg.src.substring(sourceImg.src.lastIndexOf(".")));

            xhr.open("POST","php/send.php");
            xhr.send(nForm);

            xhr.addEventListener("load",function(e){
                go = false;
                var newSrc = e.target.responseText;
                newImage.src = newSrc;
                newImage.onload = function(){
                    previewImg.src=trans().src;
                    nForm.append("del",true);
                    xhr.open("POST","php/del.php");
                    xhr.send(nForm);
                };
            },false);
        } else if(go){
            newImage.src = sourceImg.src;
            previewImg.src=trans().src;
        }

        function trans(){
            cv.width = newImage.width;
            cv.height= newImage.height;
            ct.drawImage(newImage,0,0);
            if(mimeType=="image/jpeg")
            var newData = cv.toDataURL(mimeType,nQuali.value/100);
            else
            var newData = cv.toDataURL(mimeType); 
            var nImage = new Image();
            nImage.src = newData;
            canDownload = true;
            downlo();
            return nImage;
        }
    };
}

function init(){
    getType();
    wayChange();
    fileChange();
    urlInputEnd();
    qualityChange();
}

init();

PHP:

send.php

del.php

有什么问题和意见欢迎回复，吐槽楼主的人注定单身一辈子(ｏ￣∇￣ｏ)♪

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

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

html5 canvas 在线图片转换器

摘要：前天写完文件上传的时候，老板给了个任务，问我能不能把图片压缩后再上传，并且保证前面的功能能正常使用。于是就想能不能做一个在线的图片转换器。目前仅支持当图片较大时，转格式可能失败作者表示他不知道原因。前天写完文件上传的时候，老板给了个任务，问我能不能把图片压缩后再上传，并且保证前面的功能能正常使用。虽然最后放弃了这个想法，但我在查资料的过程中看到了canvas的toDataURL这个功...

afishhhhh 2019-08-21 10:35 评论0 收藏0

HTML5调用本地摄像头画面，拍照，上传服务器

摘要：图片数据绘制到先构造对象，为，图片之后绘制到的图片文件数据绘制到还是先转换成一个，然后构造对象，为，图片之后绘制到利用上面的函数，由对象得到格式的，再参考图片数据绘制到转换为对象并使用发送转换为对象后，可以使用上传图像文件。实现功能和适用业务采集本地摄像头获取摄像头画面，拍照保存，上传服务器；前端上传图片处理，展示，缩小，裁剪，上传服务器实现步骤调取本地摄像头（get...

ShevaKuilin 2019-08-01 18:18 评论0 收藏0

HTML5调用本地摄像头画面，拍照，上传服务器

worldligang 2019-08-21 18:25 评论0 收藏0

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

html5 canvas 在线图片转换器

相关文章

***html5* canvas 在线图片*转换器***

HTML5调用本地摄像头画面，拍照，上传服务器

HTML5调用本地摄像头画面，拍照，上传服务器

发表评论

0条评论

Muninn

男|高级讲师

TA的文章

我有环保工程师，从事环保行业七八年了

【C语言】函数栈帧——函数调用时发生了什么？

什么是虚拟主机业务-虚拟主机有什么优势吗？

FCC成都社区·前端周刊第 2 期

2017年前端面试题整理

iKcamp出品｜微信小程序｜小试牛刀(视频)+发布流程｜基于最新版1.0开发者工具初中级教程分享

手机端效果（一）滑块效果

[踩坑] CSS中overflow-y: visible;不起作用

最新活动