第一种：等比例缩放图片（没有设置清除画布，所以在第一次上传图片后再上传一次会被覆盖掉）

<input type="file" name="" id="inputBox">	<!-- 获取对文件的描述信息 -> 选择文件 -->
<canvas id="avatar"></canvas>   <!-- 在画布上加载图片 -->
<script type="text/javascript">
	window.onload = function(){
		var canvas = document.getElementById('avatar');
		// 检测canvas支持性
		if (canvas.getContext) {
			var ctx = canvas.getContext('2d');	// 返回一个对象，该对象提供了用在画布上绘图的方法和属性
		}else {
			document.write("你的浏览器不支持canvas，请升级你的浏览器");
			// return 
		// canvas 大小
		canvas.width = document.documentElement.clientWidth;
		canvas.height = document.documentElement.clientHeight - 102;
		// 读取文件数据 -> 显示图片
		var inputBox = document.getElementById("inputBox");
		inputBox.addEventListener("change", function() {
			var reader = new FileReader();
			reader.readAsDataURL(inputBox.files[0]);  // 发起异步请求
			reader.onload = function() {
				// 图片加载完后，将其显示在canvas中
				var img = new Image();
				img.src = this.result;
				img.onload = function() {
					// 等比例缩放图片
					var scale = 1;
					var tt = 1000; // 可以根据具体的要求去设定
					if (this.width > tt || this.height > tt) {
						if (this.width > this.height) {
							scale = tt / this.width;
						}else {
							scale = tt / this.height;
					ctx.width = this.width * scale;
					ctx.height = this.height * scale; // 计算等比缩小后图片
					ctx.drawImage(this, 0, 0, ctx.width, ctx.height);  // 加载图片
</script>

第二种：上传的图片的宽/高会等比例满屏 （设置了清除画布，所以第二次上传图片不会覆盖第一次上传的图片）

有一个问题就是像素小的图片会放在角落上，这时候要设置在画布居中显示。还有一个问题就是，像素小的图片放大了会模糊。

read(ctx,canvas.width,canvas.height);
// 读取文件的数据
	function read(ctx,canvasWidth, canvasHeight) {
		var inputBox = document.getElementById("inputBox");
		inputBox.addEventListener("change", function() {
			console.log('清除画布');
			ctx.clearRect(0,0,canvasWidth,canvasHeight);
			var reader = new FileReader();
			reader.readAsDataURL(inputBox.files[0]);  // 发起异步请求
			reader.onload = function() {
				// 读取完成后，数据保存在对象的result 属性中
				// 图片加载完后，将其显示在canvas中
				var img = new Image();
				img.src = this.result;
				img.onload = function() {
					var xRate = canvasWidth / img.width;
					var yRate = canvasHeight / img.height;
					var setRate = xRate<yRate ? xRate : yRate;
					if(setRate>5){ setRate = 5;}
					ctx.drawImage(this, 0, 0, img.width * setRate, img.height*setRate);
(一).使用mode：widthFix 
widthFix：宽度不变，高度自动变化，保持原图宽高比不变。 
首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。 
这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位
(二).使用bindload绑定函
				
前两天把canvas的translate()和rotate()的方法都介绍了下，今天就来说说scale()scale() 方法缩放当前绘图，更大或更小。 
注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。 
scale(x,y) 
参数：x：X表示横轴方向上缩放倍数 
          y：Y表示纵轴方
08 12, 2015 
在Web上显示图片，通常都会有图片显示比例问题，如果不给限制width和height，那么如果图片大了就会将整个页面挤乱，图片小了又会使图片失真。
我的需求如下：
预先定义好图片显示的标准宽度和高度。 如果图片的大小超过了标准定义，那么等
     var input = document.querySelector("input");
    var imgArr=[];
    input.addEventListener("input",function(){
        var files = this.files;
        var  isOk= checkStyle(...
				
目的：为了将一些数据点集数据展示到页面上，可以使用鼠标缩放和拖动；是不是有点抽象，那，可以想象一下百度/高德地图上的效果，绘制了一些地形和路标： 
- 拖动：可以查看相邻位置和更远位置的地形； 
- 缩放：可以更清晰的查看当前位置。当然了，我要做的并没有地图那么完美和复杂，但是麻雀虽小，该有的基本逻辑也都是有的，今下来，记录一下开发(研究)过程：【1】 绘制一个支持拖动的球 (gif图没录好，就先用
				
前段时间在论坛看到有人问如何自由改变画布大小,闲来无事,就花了点时间解决,在CSDN 博客中没有相关博文,于是顺手记录下来html5 里面有一个新标签canvas,也就是画布,画布常常需要重绘,改变大小等 
这里处理的就是改变大小的问题,总结一下改变大小的方式, 
1.直接设置style,document.getElemntById("canvas").style.width=""
document
				
图片地址必须是同域图片，非同域图片请设置 Access-Control-Allow-Origin 返回头
 * @param src图片路径，也可以是canvas生成的dataUrl
function scale(src){
    let cv = document.createElement("canvas");//创建一个处理图像的画布
    cv.width=300;//设置画布宽度
    cv.height=240;//设置画布高度
    let img = new Imag
				
在canvas对当前绘图对象进行变形时，其中心点是画布(0,0)的坐标原点。1.缩放缩放context.scale(x,y)
x:x坐标轴按x比例缩放   y:y坐标轴按y比例缩放
比如1表示不缩放、0.5表示缩小50%、2.3表示放大2.3倍。
例子：<script>
var c = document.getElementById("myCanvas");
var ctx = c.getConte
        $(function () {
            function decodeUnicode(str) {
                return unescape(unescape(str.replace(/\\u/g, '%u')));
            $("#pic").change(
  我们在网页中经常会用到图片展示，通常情况下会给一个固定的宽高来显示这个图片，然而从服务器端上传的图片大小是不确定的，如果直接按默认填充这个框有时候就会特别丑orz。作为一个完(wai)美(mao)主(xie)义(hui)者，让图片们尽可能优美地展现在网页上是一个很愉悦的责任。 
  今天就给太瘦小图片们伸展伸展或者给XXXL号减减肥吧(～￣▽￣)～
一、canvas绘图API
				
canvas 图片处理（缩放、旋转、裁剪、合并、文字）图片旋转以图片中心作旋转示例未完待续。。。。。。
图片旋转
tupian图片旋转主要调用的是canvas的rotate()方法
rotate()旋转当前的绘图。
语法：context.rotate(angle)
参数：angle旋转角度，以弧度计（n*Math.PI）
举例：假如想要旋转60度，可以context.rotate(Math.PI/...
				
代码使用到的js插件：jquery、bootstrap、lrz。 
jquery就不说了，基本都知道。bootstrap是一个响应式的前端ui框架。使用它是为了在手机端查看页面时能够自适应宽高。lrz是一个前端的js压缩图片的插件。 
截图后的图片： 
源代码下载：点击下载 
HTML页面代码：<html lang="zh-CN">
    <meta http-equ