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

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

<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文件夹来装这个网页的相关图片和脚本信息.


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7226205.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存