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的主要内容，如果未能解决你的问题，请参考以下文章