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

发布网友

我来回答

共3个回答

热心网友

<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" />

热心网友

有一个前提：
两张图片必须是本地（和当前网页同一个服务器的地址）的图片。
技术点：
img.onload,
canvas.getContext('2d').drawImage()
canvas.toDataURL
data.replace('image/png', 'image/octet-stream')

热心网友

有一个前提：
两张图片必须是本地（和当前网页同一个服务器的地址）的图片。
技术点：
img.onload,
canvas.getContext('2d').drawImage()
canvas.toDataURL
data.replace('image/png', 'image/octet-stream')
顺便给出一个使用canvas对图片压缩的源码，自己写的，有什么bug，可以给我回复
https://github.com/jsoncode/jsFunction/blob/master/imgzip.js