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是用来做网站的一种语言哈，就是在html里面改变图片的大小就要改变文件代码，打开图片源代码，图片文件的大小是height，和宽，我们可以更改，在语言中我们需要设置的都是英文的。

现在压缩工具将图片缩小之后都会对画质有影响，压缩图片文件选择压缩工具页面中的普通压缩就可以了压缩程度不要过大，找到图片压缩工具，图片要放置在工具页面上进行数据分析，根据图片的大小工具会制定压缩方案。

图片分享论坛却只允许发几百KB的文件；微信、分享给朋友的时候自动压缩的图像都比较模糊

把 cxt.drawImage(img, 0, 0)

换成

img.onload = function ()

{

    cxt.drawImage(img, 0, 0)

}

试试

---