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" />
博思aippt
2024-07-20 广告
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员,对于Word文档生成PPT的操作,我们有以下建议:1. 使用另存为功能:在Word中编辑完文档后,点击文件->另存为,选择PowerPoint演示文稿(*.pptx)格式,即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
展开全部
有一个前提:
两张图片必须是本地(和当前网页同一个服务器的地址)的图片。
技术点:
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')
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
有一个前提:
两张图片必须是本地(和当前网页同一个服务器的地址)的图片。
技术点:
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
两张图片必须是本地(和当前网页同一个服务器的地址)的图片。
技术点:
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
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询