详解HTML5 canvas移动、缩放、旋转插入的图片

HTML5 herman 3028浏览 0评论

最近有网友问到了,HTML5 Canvas的缩放图片功能。我这里整理一下关于Canvas的相关图片操作写了一个实例,希望对大家能有所帮助!

<!DOCTYPE html>    
<html>    
<head>    
<title>CANVAS touch测试</title>    
<meta charset="UTF-8">    
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">    
<meta http-equiv="pragma" content="no-cache">    
<meta http-equiv="Cache-Control" content="no-cache">    
<meta http-equiv="Expires" content="0">    
<meta name="apple-mobile-web-app-capable" content="yes">    
<meta name="apple-mobile-web-app-status-bar-style" content="black">    
<meta name="format-detection" content="telephone=no">    
<meta name="apple-mobile-web-app-title" content="">    
<style type="text/css">    
*{ margin:0px; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0); box-sizing:border-box;}    
html{ min-width:320px; max-width:640px; margin:0 auto;}    
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; color:; font-size:16px;    
-webkit-user-select:none;/* 禁用长触选择文字等功能 */    
user-select:none;    
-webkit-touch-callout:none; /* 禁用长触弹出的下载图片菜单 */    
touch-callout:none;    
}    
li{ list-style:none;}    
i{ font-style:normal;}    
a:link , a:visited , a:hover ,a:active{ text-decoration:none; color:;}    
.cle:after{ content:""; display:block; height:0; clear:both;}    
button ,    
input ,    
select ,    
textarea{    
outline:none; border-radius:0; font-size:16px; font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei";    
-webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none;    
}    
img{ vertical-align:middle;}    
.f_right{ float:right;}    
    
html,body{ display:block; width:100%; height:100%; position:relative;}    
.hide{ display:none;}    
    
.page1 , .page2{ width:100%; height:100%; line-height:1rem; position:absolute; left:0; top:0;}    
    
.page1{ padding-top:2rem;}    
.page1 > div{ margin-bottom:.5rem;}    
.page1_left , .page1_right{ min-height:1rem; float:left;}    
.page1_left{ width:30%; padding-right:.3rem; text-align:right;}    
.page1_right{ width:70%;}    
input , textarea{ width:80%; border:#e1e1e1 solid 1px; background:none; resize:none;}    
input{ height:1rem;}    
textarea{ height:2rem; line-height:.6rem;}    
.show_img{ text-align:center;}    
.show_img img{ height:2rem;}    
.filebtn{ display:block; width:4rem; height:1rem; text-align:center; border-radius:.2rem; background-color:#ddd; cursor:pointer;}    
.setbtn , .resetbtn{ width:5rem; height:1rem; margin:0 auto .5rem auto; border-radius:2px; border:#e1e1e1 solid 1px; background-color:#eee; text-align:center; cursor:pointer;}    
    
.page2{}    
canvas{ width:100%; height:auto; margin:0; padding:0;}    
.roat_img{ display:block; width:2rem; height:2rem; line-height:2rem; text-align:center; border-radius:50%; background-color:#ddd; cursor:pointer; position:fixed; right:.5rem; top:50%;}    
.show_end_img{ display:block; width:5rem; height:1rem; border-radius:2px; border:#e1e1e1 solid 1px; background-color:#eee; text-align:center; cursor:pointer; position:fixed; left:50%; margin-left:-2.5rem; bottom:2rem;}    
    
.page3{ width:100%; height:100%; text-align:center; background-color:rgba(0,0,0,.6); position:fixed; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}    
.page3 img{ display:inline-block; width:90%;}    
.page3:after{ content:""; display:inline-block; width:0; height:100%; vertical-align:middle;}    
</style>    
</head>    
    
<body>    
    
<section class="page1">    
  <div class="cle">    
        <div class="page1_left">第一句话</div>    
        <div class="page1_right"><input type="text" id="uptitle" name="uptitle" value="" maxlength="10" /></div>    
    </div>    
    <div class="cle">    
        <div class="page1_left">第二句话</div>    
        <div class="page1_right"><textarea id="upcontent" name="upcontent"></textarea></div>    
    </div>    
    <div class="show_img hide"><img src="" /></div>    
    <div class="cle">    
        <div class="page1_left">上传照片</div>    
        <div class="page1_right"><span class="filebtn">选择图片</span><input class="hide" type="file" id="upfile" name="upfile" value="" accept="image/*" /></div>    
    </div>    
    <div class="setbtn">生成预览</div>    
    <div class="resetbtn">重置</div>    
</section>    
    
<section class="page2 hide">    
    <canvas id="canvas_img"></canvas>    
    <span class="roat_img">旋转</span>    
    <span class="show_end_img">生成图片</span>    
</section>    
    
<section class="page3 hide"><img src=""/></section>    
    
    
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>    
<script type="text/javascript">    
function initHtmlFontSize(){    
    var _width = document.body.clientWidth;    
    _width = _width>640?640:_width;    
    var _fs = _width/16;    
    document.getElementsByTagName("html")[0].style.fontSize = _fs+"px";    
}    
initHtmlFontSize();    
function getObjectURL(file) {    
    var url = null ;    
    if (window.createObjectURL!=undefined) { // basic    
        url = window.createObjectURL(file) ;    
    } else if (window.URL!=undefined) { // mozilla(firefox)    
        url = window.URL.createObjectURL(file) ;    
    } else if (window.webkitURL!=undefined) { // webkit or chrome    
        url = window.webkitURL.createObjectURL(file) ;    
    }    
    return url ;    
}    
$(function(){    
    var img , imgurl;    
    var canvas_img = document.getElementById("canvas_img");      
    var ctx_2d = canvas_img.getContext("2d");       
    //上传图片    
    $('.filebtn').on('click',function(){    
        $('#upfile').trigger('click');    
    });    
    $('#upfile').on('change', function(){    
        imgurl = getObjectURL(this.files[0]);    
        img = new Image();    
        img.src = imgurl;    
        img.onload = function(){    
            ctxmsg.imgoldw = img.width ,    
            ctxmsg.imgoldh = img.height;    
        };    
        $(this).val('');    
        $('.show_img img').attr('src', imgurl);    
        $('.show_img').show();    
    });    
    //重置    
    $('.resetbtn').on('click',function(){    
        $('#uptitle').val('');    
        $('#upcontent').val('');    
        $('#upfile').val('');    
        $('.show_img').hide();    
        $('.show_img img').attr('src', '');    
    });    
    //生成图片    
    $('.show_end_img').on('click',function(){    
        var new_img_src = canvas_img.toDataURL("image/jpg");    
        $('.page3 img').attr('src', new_img_src);    
        $('.page3').show();    
    })    
    //旋转canvas中的图片    
    var roate_num = 0;    
    var create_cvs = document.createElement('canvas');    
    var create_cvs_2d = create_cvs.getContext('2d');    
    var ifroate = false;    
    $('.roat_img').on('click',function(){    
        console.log('上次宽:' + ctxmsg.imgw + '   上次高:' + ctxmsg.imgh);  
        ifroate = true;    
        roate_num += 90;    
        roate_num = roate_num % 360;    
            
        var w = img.width;    
        var h = img.height;    
            
        var x = w/-2;    
        var y = h/-2;    
            
        if(roate_num % 180 != 0){    
            create_cvs.width = h;    
            create_cvs.height = w;    
            if(w > h){    
                console.log(1);  
                ctxmsg.imgw = ctxmsg.w;    
                ctxmsg.imgh = ctxmsg.w / h * w;    
            }else{    
                console.log(2);  
                ctxmsg.imgh = ctxmsg.h;    
                ctxmsg.imgw = ctxmsg.h / w * h;    
            }    
        }else{    
            create_cvs.width = w;    
            create_cvs.height = h;    
            if(w > h){    
                console.log(3);  
                ctxmsg.imgh = ctxmsg.h;    
                ctxmsg.imgw = ctxmsg.h / h * w;    
            }else{    
                console.log(4);  
                ctxmsg.imgw = ctxmsg.w;    
                ctxmsg.imgh = ctxmsg.w / w * h;    
            }    
        }    
            
        create_cvs_2d.translate(create_cvs.width/2, create_cvs.height/2);    
        create_cvs_2d.rotate(roate_num * Math.PI/180);    
        create_cvs_2d.drawImage(img, x, y);    
          
        //防止旋转图片后,指定画图区留白(图片小于画图区)  
        if(ctxmsg.imgw < ctxmsg.w){  
            ctxmsg.imgh = ctxmsg.w / ctxmsg.imgw * ctxmsg.imgh;  
            ctxmsg.imgw = ctxmsg.w;  
        }  
        if(ctxmsg.imgh < ctxmsg.h){  
            ctxmsg.imgw = ctxmsg.h / ctxmsg.imgh * ctxmsg.imgw;  
            ctxmsg.imgh = ctxmsg.h;  
        }  
          
        ctxmsg.imgx = ctxmsg.x;    
        ctxmsg.imgy = ctxmsg.y;    
        drawNewImg();    
        console.log('本次宽:' + ctxmsg.imgw + '   本次高:' + ctxmsg.imgh);  
    });    
    //预览(首次生成CANVAS图片)    
    $('.setbtn').on('click',function(){    
        var title = $.trim($('#uptitle').val());    
        var content = $.trim($('#upcontent').val());    
        if(!$.trim(title)){    
            alert('请填写你的表白对象哦');    
            return;    
        }    
        if(!$.trim(content)){    
            alert('请填写你想说的话哦');    
            return;    
        }    
        if(!imgurl){    
            alert('请上传图片');    
            return;    
        }    
        setcanvas(title,content,imgurl);    
    });    
            
    function setcanvas(title,content,imgurl){    
        bgimg = new Image();    
        //底图图片  640  的宽度,所有距离长度 相对此宽度 设置的    
        bgimg.src = "bg.jpg";//跨域问题,只能相对路径的图片生成图片时不会出错    
        bgimg.onload = function() {    
            var iw = bgimg.width;    
            var ih = bgimg.height;    
            canvas_img.width = iw;    
            canvas_img.height = ih;    
            ctx_2d.drawImage(bgimg,0,0,iw,ih,0,0,iw,ih);    
                
            drawNewImg();    
                
            ctx_2d.font = 'bold 24px "PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"';    
            ctx_2d.fillStyle = '#E86B59';    
            ctx_2d.textBaseline="top";    
            ctx_2d.textAlign="left";    
            ctx_2d.fillText(title, 182, 543);    
            ctx_2d.fillStyle = '#A14FB1';    
            writeTextOnCanvas(ctx_2d,40,24,content,182,615);    
                
            $('.page1').hide();    
            $('.page2').show();    
        }      
    }    
        
    var touchs = {    
        startx:0,starty:0,endx:0,endy:0,    
        startx2:0,starty2:0,endx2:0,endy2:0,    
        };    
    canvas_img.addEventListener("touchstart", canvasTouchStart, false);    
    canvas_img.addEventListener("touchmove", canvasTouchMove, false);    
    canvas_img.addEventListener("touchend", canvasTouchEnd, false);    
    function canvasTouchEnd(e){    
            
    }    
    function canvasTouchStart(e){    
        e.preventDefault();    
        touchs.startx = e.touches[0].pageX;    
        touchs.starty = e.touches[0].pageY;    
        if(e.touches.length == 1){    
            ctxmsg.imgoldx = ctxmsg.imgx;    
            ctxmsg.imgoldy = ctxmsg.imgy;    
        }else if(e.touches.length == 2){    
            touchs.startx2 = e.touches[1].pageX;    
            touchs.starty2 = e.touches[1].pageY;    
            ctxmsg.imgoldw = ctxmsg.imgw;    
            ctxmsg.imgoldh = ctxmsg.imgh;    
        }    
    }      
    function canvasTouchMove(e){    
        e.preventDefault();    
        touchs.endx = e.touches[0].pageX;    
        touchs.endy = e.touches[0].pageY;    
        if(e.touches.length == 1){    
            ctxmsg.imgx = ctxmsg.imgoldx + touchs.endx - touchs.startx;    
            ctxmsg.imgy = ctxmsg.imgoldy + touchs.endy - touchs.starty;    
        }else if(e.touches.length == 2){    
            touchs.endx2 = e.touches[1].pageX;    
            touchs.endy2 = e.touches[1].pageY;    
                
            //var xdiff = x2 - x1;    
            //var ydiff = y2 - y1;    
            var xdiff1 = touchs.startx2 - touchs.startx;    
            var ydiff1 = touchs.starty2 - touchs.starty;    
            var line1 = Math.sqrt(Math.pow(xdiff1 , 2) + Math.pow(ydiff1 , 2));    
                
            var xdiff2 = touchs.endx2 - touchs.endx;    
            var ydiff2 = touchs.endy2 - touchs.endy;    
            var line2 = Math.sqrt(Math.pow(xdiff2, 2) + Math.pow(ydiff2, 2));    
                            
            img_new_w = ctxmsg.imgw + (line2 - line1) / 20;    
            img_new_h = img_new_w / ctxmsg.imgw * ctxmsg.imgh;    
            //固定区域内缩放,画图区域不留白    
            if(img_new_w <= ctxmsg.w || img_new_h <= ctxmsg.h){    
                return;    
            }    
                
            ctxmsg.imgx -= img_new_w - ctxmsg.imgw;    
            ctxmsg.imgy -= img_new_h - ctxmsg.imgh;    
                
            ctxmsg.imgw = img_new_w;    
            ctxmsg.imgh = img_new_h;    
        }    
        //固定区域内移动,画图区域不留白    
        if(ctxmsg.imgw <=  ctxmsg.w || ctxmsg.imgx > ctxmsg.x){    
            ctxmsg.imgx = ctxmsg.x;    
        }else if(ctxmsg.imgw >  ctxmsg.w && ctxmsg.imgx <= ctxmsg.x - (ctxmsg.imgw - ctxmsg.w)){    
            ctxmsg.imgx = ctxmsg.x - (ctxmsg.imgw - ctxmsg.w);    
        }    
        if(ctxmsg.imgh <=  ctxmsg.h || ctxmsg.imgy > ctxmsg.y){    
            ctxmsg.imgy = ctxmsg.y;    
        }else if(ctxmsg.imgh >  ctxmsg.h && ctxmsg.imgy <= ctxmsg.y - (ctxmsg.imgh - ctxmsg.h)){    
            ctxmsg.imgy = ctxmsg.y - (ctxmsg.imgh - ctxmsg.h);    
        }    
        drawNewImg();    
    }      
        
    var ctxmsg = {    
        x:155,y:77,w:334,h:293,    
        imgx:155,imgy:77,imgw:0,imgh:0,    
        imgoldx:0,imgoldy:0,imgoldw:0,imgoldh:0    
        };    
    function drawNewImg(cvs){    
        ctx_2d.clearRect(ctxmsg.x,ctxmsg.y,ctxmsg.w,ctxmsg.h);    
        ctx_2d.rect(ctxmsg.x,ctxmsg.y,ctxmsg.w,ctxmsg.h);    
        ctx_2d.save();    
        ctx_2d.clip();    
        //ctxmsg.imgoldw = img.width ,    
        //ctxmsg.imgoldh = img.height;    
        if(!ctxmsg.imgw){    
            //设置画入画布内的图片宽、高(等比例铺满指定盒子,溢出被剪切掉)    
            if(ctxmsg.imgoldw/ctxmsg.imgoldh > ctxmsg.w/ctxmsg.h){    
                ctxmsg.imgh = ctxmsg.h;    
                ctxmsg.imgw = ctxmsg.h / ctxmsg.imgoldh * ctxmsg.imgoldw;    
            }else{    
                ctxmsg.imgw = ctxmsg.w;    
                ctxmsg.imgh = ctxmsg.w / ctxmsg.imgoldw * ctxmsg.imgoldh;    
            }    
        }    
        if(ifroate){    
            ctx_2d.drawImage(create_cvs , ctxmsg.imgx , ctxmsg.imgy , ctxmsg.imgw , ctxmsg.imgh);    
        }else{    
            ctx_2d.drawImage(img , ctxmsg.imgx , ctxmsg.imgy , ctxmsg.imgw , ctxmsg.imgh);    
        }    
        ctx_2d.restore();    
    }    
    function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){      
        function getTrueLength(str){//获取字符串的真实长度(字节长度)      
            var len = str.length, truelen = 0;      
            for(var x = 0; x < len; x++){      
                if(str.charCodeAt(x) > 128){      
                    truelen += 2;      
                }else{      
                    truelen += 1;      
                }      
            }      
            return truelen;      
        }      
        function cutString(str, leng){//按字节长度截取字符串,返回substr截取位置      
            var len = str.length, tlen = len, nlen = 0;      
            for(var x = 0; x < len; x++){      
                if(str.charCodeAt(x) > 128){      
                    if(nlen + 2 < leng){      
                        nlen += 2;      
                    }else{      
                        tlen = x;      
                        break;      
                    }      
                }else{      
                    if(nlen + 1 < leng){      
                        nlen += 1;      
                    }else{      
                        tlen = x;      
                        break;      
                    }      
                }      
            }      
            return tlen;      
        }      
        for(var i = 1; getTrueLength(text) > 0; i++){      
            var tl = cutString(text, bytelength);      
            ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);      
            text = text.substr(tl);      
        }      
    }    
});    
</script>    
</body>    
</html>  

用到的背景图片

HTML5 canvas 操作图片

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 详解HTML5 canvas移动、缩放、旋转插入的图片