canvas处理压缩照片并回显:https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/20180512/cannovs%E5%AD%A6%E4%B9

Posted cengjingdeshuige

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas处理压缩照片并回显:https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/20180512/cannovs%E5%AD%A6%E4%B9相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>画布标签,转换照片宽度,等比压缩</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #000000;">
    </canvas>

    <p>图片转换</p>
    <p>原图:</p>
    <img id="scream" src="https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/20180512/3.jpg" alt="The Scream" width="220" height="277">
    <p>Canvas等比转换过的:</p>
    <canvas id="myCanvas_img"  style="border:1px solid red;"></canvas>
    <p>转换后输出的图片Base64</p>
    <img src="" id="base64" alt="base64">
    <script>
        var cannovsBox = document.getElementById(‘myCanvas_img‘)
        var img = document.getElementById(‘scream‘)
        img.onload = function () {
            var imgsInit = new Image()
            imgsInit.src = img.src
            var ww = imgsInit.width
            var hh = imgsInit.height
            console.log(ww)
            console.log(hh)
            var width = ww
            var height = hh
            if (width > 400) {
                width = 400
                height = width * hh / ww
            }
            console.log(width, height)
            cannovsBox.setAttribute("width", width);
            cannovsBox.setAttribute("height", height);
            
            var huabi = cannovsBox.getContext(‘2d‘)
            var sx = 0 // 开始剪切的x坐标
            var sy = 0 // 开始剪切的y坐标
            var swidth = ww
            var sheight = hh
            var x = 0
            var y = 0
            huabi.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
            console.log(cannovsBox)
            // 图片转换成base64位, 必须在服务器同源策略下,服务器允许跨域,不然会报错
            var url = cannovsBox.toDataURL()
            console.log(url)
            document.getElementById(‘base64‘).src = url
            
        }
    </script>
    <script>
        // 画图的部分,上边是照片处理的
        var c = document.getElementById(‘myCanvas‘)
        var ctx = c.getContext(‘2d‘) // 创建对象
        // 画长方形
        // ctx.fillStyle = ‘red‘ // 画笔颜色
        // ctx.fillRect(10, 5, 150, 75) // 画点
        // 画线段,开始坐标到结束坐标
        ctx.moveTo(10, 10) // 开始的坐标
        ctx.lineTo(200, 10) // 结束的坐标
        ctx.stroke() // 绘制
        ctx.moveTo(200, 10)
        ctx.lineTo(200, 200)
        ctx.stroke()
        ctx.moveTo(200, 200)
        ctx.lineTo(10, 10)
        ctx.stroke()

        // 画箭头
        ctx.moveTo(300, 300) // 箭头上线
        ctx.lineTo(500, 300)
        ctx.stroke()
        ctx.moveTo(300, 310) // 箭头下线
        ctx.lineTo(500, 310)
        ctx.stroke()
        ctx.moveTo(490, 280) // 上斜线
        ctx.lineTo(510, 305)
        ctx.stroke()
        ctx.moveTo(510, 305) // 下斜线
        ctx.lineTo(490, 320)
        ctx.stroke()

        // 画圆蛋
        ctx.beginPath()
        ctx.arc(100, 500, 50, 0, 2 * Math.PI) // arc(x,y,r,start:起点,stop:结束的位置) 
        ctx.stroke()
        // 半圆蛋
        ctx.beginPath()
        ctx.arc(300, 500, 50, Math.PI, 2 * Math.PI)
        ctx.stroke()
        // 给半圆 封口
        ctx.moveTo(250, 500)
        ctx.lineTo(350, 500)
        ctx.stroke()

        // 创建渐变
        var grd = ctx.createLinearGradient(510, 510, 700, 520); // 创建渐变 (x,y,x1,y1)  都是以父元素0点为起点
        //     x0渐变开始点的 x 坐标  y0渐变开始点的 y 坐标   x1    渐变结束点的 x 坐标 y1    渐变结束点的 y 坐标
        grd.addColorStop(0, ‘red‘)
        grd.addColorStop(0.5, ‘blue‘)
        grd.addColorStop(1, ‘green‘)
        // 填充渐变
        ctx.fillStyle = grd
        ctx.fillRect(510, 510, 150, 80) // (x,y,w,h) x,y的位置,宽高 都是以父元素的0点为起点
    </script>
</body>

</html>

 

以上是关于canvas处理压缩照片并回显:https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/20180512/cannovs%E5%AD%A6%E4%B9的主要内容,如果未能解决你的问题,请参考以下文章

使用 PHP ping IP 地址并回显结果

图片上传并回显后端篇

uview+uniapp+springboot 实现小程序上传图片并回显

图片上传并回显Ajax异步篇

上传图片至fastdfs分布式文件系统并回显

从数据库中请求并回显一个浮点数[重复]