canvas无法上传图片

记录用canvas添加图片时，遇到的一个小问题

按正常方式使用canvas图片

//创建一个画布

var canvas=document.getElementById('myCanvas')

var ctx=canvas.getContext('2d')

//画布上添加img元素

var img=new Image()

//设置图片起始位置，缩放比

ctx.drawImage(img,0,0,300,150)

img.src="images/background.png"

无显示，用$nextTick设置延时加载，无用。。。

需要确认img元素添加进去才可以绘画

不使用 png 是因为 背景透明，导出效果不太好，canvas 转换成 jpeg 之前会移除alpha通道，所以透明区域被填充成了黑色

可以多次调用自己 以达到横向或竖向拼接图片的目的

可参考

<form id="form1" runat="server">

<div align="center" class="i-canvas">

<canvas id="myCanvas" width="500" height="300"></canvas>

<ul>

<li><button onclick="javascript:DrawPic()return false">开始画图</button></li>

<li><button onclick="javascript:UploadPic()return false">上传到服务器</button></li>

</ul>

</div>

</form>

---