canvas 图片 文字 合成

canvas可以合成文字  图片   这样可以本地预览图片了

直接加载本地的图片：先用<img src="img/xx.jpg"> 引用，然后获取src 赋值到Image对象src的属性值

var starSelectImg = $('#starSelect').val();
		$('#starImg').attr('src',starSelectImg);
		var starImg = new Image();
		starImg.src=$('#starImg').attr('src');
		
		starImg.οnlοad=function(){
			//先把明星图片绘制在这里
			mainCtx.drawImage(starImg,0,0);			
		};

在onload回调函数里做处理

另外一种就是读取用户选择的图片

//读取用户选择的图片
		if(userImgFile){
			var reader=new FileReader();
			reader.οnlοad=function(){
				// 通过 reader.result 来访问生成的 DataURL
				console.log('result:'+reader.result);
				var image=new Image();
				image.src=reader.result;
				mainCtx.drawImage(image,80,120,100,100);
			};
			reader.readAsDataURL(userImgFile);
		}

demo下载地址： DEMO下载地址