HTML5如何通过canvas，把两张图片绘制到画布，然后导出大图

<img src="......." id="img1" />

<img src="......." id="img2" />

<img id="img3" /> var img1 = document.getElementById("img1"),

    img2 = document.getElementById("img2"),

    img3 = document.getElementById("img3")

var canvas = document.createElement("canvas"),

    context = canvas.getContext("2d")

canvas.width = img1.naturalWidth + img2.naturalWidth

canvas.height = Math.max(img1.naturalHeight,img2.naturalHeight)

// 将 img1 加入画布

context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight)

// 将 img2 加入画布

context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight)

// 将画布内容导出

var src = canvas.toDataURL()

img3.src = src <p>drawImage 的使用方法可以去这里看一下</p>

<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage" />

html文件的源文件只有键接,其图片和一些脚本是用另外一个文件夹装着的.

比如说,你"另存"了一相网页aa.htm,在与这个网页相同的目录下必定有一个aa.file文件夹来装这个网页的相关图片和脚本信息.

---