canvas处理压缩照片并回显：https://cengjingdeshuige.oss-cn-be

<div class="cnblogs_code">

    画布标签,转换照片宽度，等比压缩


    
<p>图片转换</p>
<p>原图:</p>
<p class="pic_center"><img id="scream" src="https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/20180512/3.jpg" alt="The Scream" width="220" height="277"&gt;
<p></p>Canvas等比转换过的:</p>
<canvas id="myCanvas_img"  style="border:1px solid red;"&gt;</canvas>
<p>转换后输出的图片Base64</p>
<img src="" id="base64" alt="base64"&gt;
<script>
    <span style="color: #0000ff"&gt;var</span> cannovsBox = document.getElementById('myCanvas_img'<span style="color: #000000"&gt;)
    </span><span style="color: #0000ff"&gt;var</span> img = document.getElementById('scream'<span style="color: #000000"&gt;)
    img.onload </span>= <span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; () {
        </span><span style="color: #0000ff"&gt;var</span> imgsInit = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Image()
        imgsInit.src </span>=<span style="color: #000000"&gt; img.src
        </span><span style="color: #0000ff"&gt;var</span> ww =<span style="color: #000000"&gt; imgsInit.width
        </span><span style="color: #0000ff"&gt;var</span> hh =<span style="color: #000000"&gt; imgsInit.height
        console.log(ww)
        console.log(hh)
        </span><span style="color: #0000ff"&gt;var</span> width =<span style="color: #000000"&gt; ww
        </span><span style="color: #0000ff"&gt;var</span> height =<span style="color: #000000"&gt; hh
        </span><span style="color: #0000ff"&gt;if</span> (width > 400<span style="color: #000000"&gt;) {
            width </span>= 400<span style="color: #000000"&gt;
            height </span>= width * hh /<span style="color: #000000"&gt; ww
        }
        console.log(width,height)
        cannovsBox.setAttribute(</span>"width"<span style="color: #000000"&gt;,width);
        cannovsBox.setAttribute(</span>"height"<span style="color: #000000"&gt;,height);

        </span><span style="color: #0000ff"&gt;var</span> huabi = cannovsBox.getContext('2d'<span style="color: #000000"&gt;)
        </span><span style="color: #0000ff"&gt;var</span> sx = 0 <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 开始剪切的x坐标</span>
        <span style="color: #0000ff"&gt;var</span> sy = 0 <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 开始剪切的y坐标</span>
        <span style="color: #0000ff"&gt;var</span> swidth =<span style="color: #000000"&gt; ww
        </span><span style="color: #0000ff"&gt;var</span> sheight =<span style="color: #000000"&gt; hh
        </span><span style="color: #0000ff"&gt;var</span> x = 0
        <span style="color: #0000ff"&gt;var</span> y = 0<span style="color: #000000"&gt;
        huabi.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
        console.log(cannovsBox)
        </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 图片转换成base64位， 必须在服务器同源策略下，服务器允许跨域，不然会报错</span>
        <span style="color: #0000ff"&gt;var</span> url =<span style="color: #000000"&gt; cannovsBox.toDataURL()
        console.log(url)
        document.getElementById(</span>'base64').src =<span style="color: #000000"&gt; url

    }
</span></script>
<script>
    <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 画图的部分，上边是照片处理的</span>
    <span style="color: #0000ff"&gt;var</span> c = document.getElementById('myCanvas'<span style="color: #000000"&gt;)
    </span><span style="color: #0000ff"&gt;var</span> ctx = c.getContext('2d') <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 创建对象</span>
    <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 画长方形</span>
    <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; ctx.fillStyle = 'red' // 画笔颜色</span>
    <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; ctx.fillRect(10,5,150,75) // 画点</span>
    <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 画线段，开始坐标到结束坐标</span>
    ctx.moveTo(10,10) <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 开始的坐标</span>
    ctx.lineTo(200,10) <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 结束的坐标</span>
    ctx.stroke() <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 绘制</span>
    ctx.moveTo(200,10<span style="color: #000000"&gt;)
    ctx.lineTo(</span>200,200<span style="color: #000000"&gt;)
    ctx.stroke()
    ctx.moveTo(</span>200,200<span style="color: #000000"&gt;)
    ctx.lineTo(</span>10,10<span style="color: #000000"&gt;)
    ctx.stroke()

    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 画箭头</span>
    ctx.moveTo(300,300) <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 箭头上线</span>
    ctx.lineTo(500,300<span style="color: #000000"&gt;)
    ctx.stroke()
    ctx.moveTo(</span>300,310) <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 箭头下线</span>
    ctx.lineTo(500,310<span style="color: #000000"&gt;)
    ctx.stroke()
    ctx.moveTo(</span>490,280) <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 上斜线</span>
    ctx.lineTo(510,305<span style="color: #000000"&gt;)
    ctx.stroke()
    ctx.moveTo(</span>510,305) <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 下斜线</span>
    ctx.lineTo(490,320<span style="color: #000000"&gt;)
    ctx.stroke()

    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 画圆蛋</span>
<span style="color: #000000">        ctx.beginPath()

ctx.arc(100,500,50,2  Math.PI) <span style="color: #008000">//<span style="color: #008000"> arc(x,r,start:起点,stop:结束的位置) 

<span style="color: #000000">        ctx.stroke()

<span style="color: #008000">//<span style="color: #008000"> 半圆蛋

<span style="color: #000000">        ctx.beginPath()

ctx.arc(300,Math.PI,2 <span style="color: #000000"> Math.PI)

ctx.stroke()

<span style="color: #008000">//<span style="color: #008000"> 给半圆 封口

ctx.moveTo(250,500<span style="color: #000000">)

ctx.lineTo(350,500<span style="color: #000000">)

ctx.stroke()
    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 创建渐变</span>
    <span style="color: #0000ff"&gt;var</span> grd = ctx.createLinearGradient(510,510,700,520); <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 创建渐变 (x,x1,y1)  都是以父元素0点为起点</span>
    <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;     x0渐变开始点的 x 坐标  y0渐变开始点的 y 坐标   x1    渐变结束点的 x 坐标 y1    渐变结束点的 y 坐标</span>
    grd.addColorStop(0,'red'<span style="color: #000000"&gt;)
    grd.addColorStop(</span>0.5,'blue'<span style="color: #000000"&gt;)
    grd.addColorStop(</span>1,'green'<span style="color: #000000"&gt;)
    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 填充渐变</span>
    ctx.fillStyle =<span style="color: #000000"&gt; grd
    ctx.fillRect(</span>510,80) <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; (x,w,h) x,y的位置，宽高 都是以父元素的0点为起点</span>
</script>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!